index.html

<!--- Code For Website Starts Here  -->
<!DOCTYPE html>
<html lang="en">


<!--- Start of HEAD  -->

<head>



    <!-- All Meta  links  -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />


    <!-- The Javascript from external websites -->
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/highcharts-more.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>




    <!-- All lunks and  Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="style.css" rel="stylesheet">

    <!-- Map Styling Within Head -->
    <style>
        #wrapper {
            height: 100% width: 100%;
            position: relative;
        }

        #map-canvas {
            height: 830px;
            width: 55%;
            margin-bottom: 10px;
            margin-left: 5%;
            margin-right: 160px;
            margin-top: 30px;
            padding: 40px;
            position: absolute;
        }

        #controls {
            top: 80px;
            left: 110px;
            width: 360px;
            height: 65px;
        }

        #data-box {
            margin-top: 40px;
            height: 45px;
            line-height: 45px;
            display: none;
            margin-left: 40%;
            position: absolute;
            z-index: 1;
        }

        #census-variable {
            width: 360px;
            height: 20px;
        }

        #legend {
            display: flex;
            display: -webkit-box;
            padding-top: 7px;
            margin-left: : 60%;
            width: 25%
        }

        .color-key {
            background: linear-gradient(to right,
                    hsl(30, 100%, 99%) 0%,
                    hsl(24, 100%, 76%) 70%,
                    hsl(1, 57%, 57%) 100%);
            flex: 1;
            -webkit-box-flex: 1;
            margin: 0 160px;
            text-align: center;
            font-size: 1.0em;
            line-height: 1.0em;
            width: 280px;
            position: absolute;
            margin-left: 40%;
            margin-top: 80px;
        }


        .census-min {
            margin-left: : 120px;

        }

        .census-max {

            margin-left: 120px;
        }



        #data-value {
            font-size: 1.5em;
            font-weight: bold;
            text-align: left
        }

        #data-label {
            font-size: 1.5em;
            font-weight: normal;
            margin: text-align: left
        }

        #data-label: after {
            content: ':'
        }

        #data-caret {
            margin-left: -5px;
            display: none;
            font-size: 25px;
            width: 10px
        }
    </style>




    <!--- END of HEAD  -->
</head>





<!--- Start Of Body  -->

<body onload="document.getElementById(" census-variable small").dataManage();">


    <!-- NAVBAR -->



    <nav class=" navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="#" onclick="smoothScroll(document.getElementById('about'))"> Chicago's Gun
                    Violence </a>
            </div>
            <ul class="nav navbar-nav">

                <li><a href="#" onclick="smoothScroll(document.getElementById('mapid'))">Map & Analysis</a></li>
                <li><a href="#" onclick="smoothScroll(document.getElementById('methods'))">Overview </a></li>
                <li><a href="#" onclick="smoothScroll(document.getElementById('read'))"> Methodology & Data </a></li>
                <li><a href="#" onclick="smoothScroll(document.getElementById('aut'))"> The Authors </a></li>
            </ul>
        </div>
    </nav>






    <!-- FRONT PAGE -->


    <div class="container" id="about">
        <h1 class="page-header text-center" ,"text-center">Chicago's Gun Violence </h1>

        <p class="lead">

            The following visualisation will compare the location of gun shootings within Chicago's communities with
            socio-economic variables.
            Mapping out the precise location of gun violence alongside different factors shows significant spatial
            variation in where these events occur.
            The tool allows a user to click on a variable to obtain a statistical analysis of how gun shootings compare
            across Chicago's community areas.



        <p class="  lead1 lead" ,"text-center">- Click on the variable buttons, to see an updated chloropleth map,
            linear regression and analysis.<br>
            - Hover over specific communities, to analyse how they differ with other communities within Chicago.<br>
            - Click on specific incidents, to explore the date of the event and how many where injured/killed. <br>
            - Click on clusters to see an analysis of similarities between communities. </p>
    </div>



    <div class="container">

        <div class="btn">
            <button type="button" class=" btn1 btn-default btn-lg"
                onclick="smoothScroll(document.getElementById('mapid'))">Go To The Map</button>
            <button type="button" class="btn2 btn-default btn-lg"
                onclick="smoothScroll(document.getElementById('methods'))">Read More</button>
        </div>

        <div class="mapster" id="mapid">

            <h2 class="page-header1 page-header text-center" ,"text-center"> Map & Analysis </h2>

            <div class="container">

                <h5 class="mapdescription page-header1 lead text-center" ,"text-center">
                    <h5 class="mapdescription lead" ,"text-center"> Select variable of interest, explore the map and
                        statistical analysis on the right hand side. </h5>
                </h5>

            </div>

            <div class="btn">

                <!-- Incident Rate Action Button -->
                <button type="button" class="btn3 btn-default link " id="census-variable small1" href="#about"
                    data-link="eigth" onclick="dataManage(0)" value=7> Incident Rate</button>



                <!-- Per Capita Income Action Button -->
                <button type="button" class="btn3 btn-default link " id="census-variable small" href="#about"
                    data-link="third" onclick="dataManage(7)" value=7>Per Capita Income</button>

                <!-- Housing Vavancy Action Button -->

                <button type="button" class="btn3 btn-default link" id="census-variable small" href="#about"
                    data-link="first" onclick="dataManage(3)" value=3>Housing Vacancy Rate</button>

                <!-- School Dropout Rate Action Button -->

                <button type="button" class=" btn3 btn-default link" href="#about" data-link="second"" onclick="
                    dataManage(4)" value=4 id="census-variable small ">School Dropout Rate</button>

                <!-- Family Structure Action Button -->

                <button type="button" class="btn3 btn-default link" href="#about" data-link="fourth""  onclick="
                    dataManage(5)" value=5 id="census-variable small">Family Structure</button>

                <!-- Age of Home -->

                <button type="button" class="btn3 btn-default link " href="#about" data-link="fifth"" id="
                    census-variable small" onclick="dataManage(6)" value=6>Age of Housing</button>


                <!-- Mental Health -->


                <button type="button" class="btn3 btn-default link " href="#about" data-link="sixth"" id="
                    census-variable small" onclick="dataManage(1)" value=1>Mental Health</button>

                <!-- Type of occupancy  -->


                <button type="button" class=" btn3 btn-default link " href="#about" data-link="seventh"" id="
                    census-variable small" onclick="dataManage(2)" value=2>Occupied Housing Rented Rate</button>


                <!-- Clustering  -->

                <button type="button" class="btn3 btn-default link " onclick="dataManage(8)" href="#about"
                    data-link="ninth"" id=" census-variable small">Clusters</button>

            </div>

        </div>

    </div>

    <div id="wrapper">

        <div id="legend"></div>
        <div> </div>

        <div> </div>

        <div id="data-box" class="nicebox">
            <label id="data-label" for="data-value"></label>
            <span id="data-value"></span>
        </div>


        <div id='map-canvas'>
        </div>
        <div class="color-key"><span id="data-caret">&#x25c6;</span></div>


        <!-- The Javascript from external websites gets Loaded Here -->
        <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js?ver=1.10.2'></script>
        <script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true"> </script>
        <script type='text/javascript' src='http://arshaw.com/xdate/downloads/0.8/xdate.js'></script>
        <script type='text/javascript' src='mapStyle.js'></script>

        <!-- The Javascript gets loaded here -->
        <script type="text/javascript">
            var map;
            var markerArray = [];
            var dataArray = [];
            var infowindow = new google.maps.InfoWindow({ maxWidth: 300 });
            var censusMin = Number.MAX_VALUE, censusMax = -Number.MAX_VALUE;
            var mapStyle = [
                {
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#f5f5f5"
                        }
                    ]
                },
                {
                    "elementType": "labels.icon",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#616161"
                        }
                    ]
                },
                {
                    "elementType": "labels.text.stroke",
                    "stylers": [
                        {
                            "color": "#f5f5f5"
                        }
                    ]
                },
                {
                    "featureType": "administrative.land_parcel",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "administrative.land_parcel",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#bdbdbd"
                        }
                    ]
                },
                {
                    "featureType": "administrative.neighborhood",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#eeeeee"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "labels.text",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "poi",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#757575"
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#e5e5e5"
                        }
                    ]
                },
                {
                    "featureType": "poi.park",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#9e9e9e"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#ffffff"
                        }
                    ]
                },
                {
                    "featureType": "road",
                    "elementType": "labels",
                    "stylers": [
                        {
                            "visibility": "on"
                        }
                    ]
                },
                {
                    "featureType": "road.arterial",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#757575"
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#dadada"
                        }
                    ]
                },
                {
                    "featureType": "road.highway",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#616161"
                        }
                    ]
                },
                {
                    "featureType": "road.local",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#9e9e9e"
                        }
                    ]
                },
                {
                    "featureType": "transit.line",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#e5e5e5"
                        }
                    ]
                },
                {
                    "featureType": "transit.station",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#eeeeee"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "geometry",
                    "stylers": [
                        {
                            "color": "#c9c9c9"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.text",
                    "stylers": [
                        {
                            "visibility": "off"
                        }
                    ]
                },
                {
                    "featureType": "water",
                    "elementType": "labels.text.fill",
                    "stylers": [
                        {
                            "color": "#9e9e9e"
                        }
                    ]
                }
            ];
            function initialize() {
                var mapOptions = {
                    center: new google.maps.LatLng(41.78, -87.66),
                    zoom: 11,
                    styles: mapStyle,
                    rotateControl: true,
                    scrollwheel: false
                };

                map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

                var zoom = map.getZoom();

                if (zoom < 14) {
                    map.data.setStyle(styleFeature);

                    map.data.addListener('mouseover', mouseInToRegion);
                    map.data.addListener('mouseout', mouseOutOfRegion);
                }
                else if (zoom >= 14) {
                    map.data.setStyle(styleFeature1);
                    map.data.addListener('mouseover', mouseInToRegion1);
                    map.data.addListener('mouseout', mouseOutOfRegion1);
                };

                getIncidentData();

                loadMapShapes();
                document.getElementById("census-variable small1").click();
            }

            function dataManage(i) {
                clearVariableData();
                var zoom = map.getZoom();
                if (zoom < 14) {

                    loadCommunityData(i);
                }
                else if (zoom >= 14) {

                    loadTractData(i);
                }
            }

            function getIncidentData() {


                console.log("Getting Data: Incidents");

                setAllMap(null);
                markerArray = [];

                $.getJSON("http://dev.spatialdatacapture.org:8890/data/incidents", function (data) {
                    $.each(data, function (k, v) {

                        var latLng = new google.maps.LatLng(v.latitude, v.longitude);

                        dataArray.push(latLng);

                        var marker = new google.maps.Marker({
                            position: latLng,
                            icon: "./img/icon.png",
                            customInfo: v.gva_id
                        });
                        marker.addListener('click', function (content) {
                            return function () {
                                infowindow.setContent("");
                                var content = "<b>Date: </b>" + v.incident_d + "<br/><b>Number Killed:</b>" + v.num_killed + "<br/><b>Number Injured:</b>" + v.num_injure + "<br/><b>For more information: </b><br/>http://www.gunviolencearchive.org/incident/" + v.gva_id;
                                infowindow.setContent(content);


                                infowindow.open(map, this);
                            }
                        }(""));


                        markerArray.push(marker);

                    });


                    $("#photoNum").html(data.length);

                    setAllMap(map);
                });
            }

            google.maps.event.addDomListener(window, 'load', initialize);

            //load variable data
            function loadTractData(i) {
                console.log("Getting Data: Tracts");
                console.log(i);
                // load the requested variable from the census API (using local copies)
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://dev.spatialdatacapture.org:8890/data/tracts');
                xhr.responseType = 'json';
                xhr.onload = function () {
                    var censusData = xhr.response;

                    console.log(censusData);

                    //censusData.shift(); // the first row contains column names
                    $(jQuery.parseJSON(JSON.stringify(censusData))).each(function () {

                        var id = this.geojoin;
                        var variableArray = [];
                        variableArray[0] = Math.round(this.incidentrate * 100) / 100;
                        variableArray[1] = (this.MentalHealthValue) / 100;
                        variableArray[2] = Math.round(this.pctrented * 100) / 100;
                        variableArray[3] = Math.round(this.pctvacant * 100) / 100;
                        variableArray[4] = Math.round(this.pctnohsd * 100) / 100;
                        variableArray[5] = Math.round(this.pctchildinmf * 100) / 100;
                        variableArray[6] = this.medianyearbuilt;
                        variableArray[7] = this.percapitaincome;
                        variableArray[8] = this.stid;

                        var censusVariable = variableArray[i];

                        // keep track of min and max values
                        if (censusVariable < censusMin) {
                            censusMin = censusVariable;
                        }
                        if (censusVariable > censusMax) {
                            censusMax = censusVariable;
                        }

                        // update the existing row with the new data
                        map.data
                            .getFeatureById(id)
                            .setProperty('census_variable', censusVariable);
                    });

                };
                xhr.send();
            }

            function loadCommunityData(i) {
                console.log("Getting Data: Communities");
                console.log(i);
                // load the requested variable from the census API (using local copies)
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'http://dev.spatialdatacapture.org:8890/data/communities');
                xhr.responseType = 'json';
                xhr.onload = function () {
                    var censusData = xhr.response;

                    console.log(censusData);

                    //censusData.shift(); // the first row contains column names
                    $(jQuery.parseJSON(JSON.stringify(censusData))).each(function () {

                        var id = this.COMMAREA;
                        var variableArray = [];
                        variableArray[0] = Math.round(this.incident_rate * 100) / 100;
                        variableArray[1] = Math.round(this.MentalHealthValue * 100) / 100;
                        variableArray[2] = Math.round(this.Renter_Occupied_rate * 100) / 100;
                        variableArray[3] = Math.round(this.Vacant_rate * 100) / 100;
                        variableArray[4] = Math.round(this.lessthanhsd_rate * 100) / 100;
                        variableArray[5] = Math.round(this.marriedWithChildren * 100) / 100;
                        variableArray[6] = Math.round(this.medianyearbuilt);
                        variableArray[7] = Math.round(this.percapitaincome);
                        variableArray[8] = this.stid;

                        var censusVariable = variableArray[i]
                        console.log(censusVariable);

                        // keep track of min and max values
                        if (censusVariable < censusMin) {
                            censusMin = censusVariable;
                        }
                        if (censusVariable > censusMax) {
                            censusMax = censusVariable;
                        }

                        // update the existing row with the new data
                        map.data
                            .getFeatureById(id)
                            .setProperty('census_variable', censusVariable);
                    });

                };
                xhr.send();
            }

            function clearVariableData() {
                censusMin = Number.MAX_VALUE;
                censusMax = -Number.MAX_VALUE;
                map.data.forEach(function (row) {
                    row.setProperty('census_variable', undefined);
                });
                document.getElementById('data-box').style.display = 'none';
                document.getElementById('data-caret').style.display = 'none';
            }
            //load boundaries

            function loadMapShapes() {
                map.data.loadGeoJson('http://dev.spatialdatacapture.org:8890/data/communities/boundaries.js', { idPropertyName: 'area_numbe' });
                map.data.loadGeoJson('http://dev.spatialdatacapture.org:8890/data/tracts/boundaries.js', { idPropertyName: 'geoid10' });

                google.maps.event.addListenerOnce(map.data, 'addfeature', function () {
                    google.maps.event.trigger(document.getElementById('census-variable small'),
                        'change');
                    google.maps.event.trigger(document.getElementById('data-label'),
                        'change');

                });

            }

            function styleFeature1(feature) {
                var low = [5, 69, 54];  // color of smallest datum
                var high = [151, 150, 150];   // color of largest datum

                // delta represents where the value sits between the min and max
                var delta = (feature.getProperty('census_variable') - censusMin) /
                    (censusMax - censusMin);

                var color = [];
                for (var i = 0; i < 3; i++) {
                    // calculate an integer color based on the delta
                    color[i] = (high[i]) * 0.3 * (1 - delta) + low[i];
                }

                // determine whether to show this shape or not
                var showRow = true;
                if (feature.getProperty('census_variable') == null ||
                    isNaN(feature.getProperty('census_variable'))) {
                    showRow = false;
                }

                var outlineWeight = 0.2, zIndex = 1;

                if (feature.getProperty('geojoin') === 'hover') {
                    outlineWeight = 2, zIndex = 1
                }

                return {
                    strokeWeight: outlineWeight,
                    strokeColor: '#4d4f4f',
                    zIndex: zIndex,
                    fillColor: 'hsl(' + color[0] + ',' + color[1] + '%,' + color[2] + '%)',
                    fillOpacity: 0.1,
                    visible: showRow
                };
            }

            function styleFeature(feature) {
                var low = [5, 69, 54];  // color of smallest datum
                var high = [151, 150, 150];   // color of largest datum

                // delta represents where the value sits between the min and max
                var delta = (feature.getProperty('census_variable') - censusMin) /
                    (censusMax - censusMin);

                var color = [];
                for (var i = 0; i < 3; i++) {
                    // calculate an integer color based on the delta
                    color[i] = (high[i]) * 0.3 * (1 - delta) + low[i];
                }

                // determine whether to show this shape or not
                var showRow = true;
                if (feature.getProperty('census_variable') == null ||
                    isNaN(feature.getProperty('census_variable'))) {
                    showRow = false;
                }

                var outlineWeight = 0.2, zIndex = 1;



                if (feature.getProperty('COMMAREA') === 'hover') {
                    outlineWeight = 2, zIndex = 1;
                }

                return {
                    strokeWeight: outlineWeight,
                    strokeColor: '#000000',
                    zIndex: zIndex,
                    fillColor: 'hsl(' + color[0] + ',' + color[1] + '%,' + color[2] + '%)',
                    fillOpacity: 0.5,
                    visible: showRow
                };
            }
            //  ******************* FUNCTIONS TO USE FOR THE MAP YOU DON"T NEED TO EDIT ANYTHING BELOW THIS LINE **************************************************

            function createMarkers() {
                var marker = new google.maps.Marker({
                    position: latLng
                });
            }

            function setAllMap(map) {
                for (var i = 0; i < markerArray.length; i++) {
                    markerArray[i].setMap(map);
                }
            }

            function clearMarkers() {
                setAllMarkers(null);
            }

            String.prototype.replaceAll = function (str1, str2, ignore) {
                return decodeURIComponent(this.replace(new RegExp(str1.replace(/([\/\,\!\\\^\$\{\}\[\]\(\)\.\*\+\?\|\<\>\-\&])/g, "\\$&"), (ignore ? "gi" : "g")), (typeof (str2) == "string") ? str2.replace(/\$/g, "$$$$") : str2));
            }

            function mouseInToRegion(e) {
                // set the hover state so the setStyle function can change the border
                e.feature.setProperty('COMMAREA', 'hover');

                var percent = (e.feature.getProperty('census_variable') - censusMin) /
                    (censusMax - censusMin) * 100;

                // update the label

                document.getElementById('data-label').textContent =
                    e.feature.getProperty('community');
                document.getElementById('data-value').textContent =
                    e.feature.getProperty('census_variable').toLocaleString();
                document.getElementById('data-box').style.display = 'block';
                document.getElementById('data-caret').style.display = 'block';
                document.getElementById('data-caret').style.paddingLeft = percent + '%';
            }
            function mouseInToRegion1(e) {
                // set the hover state so the setStyle function can change the border
                e.feature.setProperty('geojoin', 'hover');

                var percent = (e.feature.getProperty('census_variable') - censusMin) /
                    (censusMax - censusMin) * 100;

                // update the label

                document.getElementById('data-label').textContent =
                    e.feature.getProperty('geoid10');
                document.getElementById('data-value').textContent =
                    e.feature.getProperty('census_variable').toLocaleString();
                document.getElementById('data-box').style.display = 'block';
                document.getElementById('data-caret').style.display = 'block';
                document.getElementById('data-caret').style.paddingLeft = percent + '%';
            }
            /**
            * Responds to the mouse-out event on a map shape (state).
            *
            * @param {?google.maps.MouseEvent} e
            */
            function mouseOutOfRegion(e) {
                // reset the hover state, returning the border to normal
                e.feature.setProperty('COMMAREA', 'normal');
            }
            function mouseOutOfRegion1(e) {
                // reset the hover state, returning the border to normal
                e.feature.setProperty('geojoin', 'normal');
            }
        </script>

        <div id="vacancy" class="textWord_about " data-link="first"
            style=" width: 35%; height: 450px; margin-left: 60%; margin-top: 30px ;position:absolute;  "></div>

        <div style="height:380px;width:35%;border:1px solid grey ;overflow:auto; margin-top: 479px; margin-left: 60%; text-align:center;position:relative;"
            class="textWord_about1 lead mapdescription" data-link="first">


            <p><b>Results & Description</b></p>
            <hr>
            <div text align="left">
                <p>This variable pays attention to the level of occupation in the built environment defined as the level
                    of vacant housing units over the total number of housing units. A high vacancy rate may be
                    associated with either an undesirable neighbourhood where housing is difficult to find occupiers or
                    high turnover areas that are vacant at time of survey.The map shows gun incidents cluster where
                    vacancy rate is high, except in downtown. Vacancy rates tend to be high in the South Side and around
                    Austin where many incidents occur.
                    The R-value indicates this is the strongest predictor of incidents in our variables, at 0.761. We
                    can not say whether higher violence causes higher vacancy or vice versa, but that they are related
                    literature that supports vacancy being a measure of social decline.
                </p>
                <hr>
            </div>
            <table style="width:100%">
                <tr style="background-color: #B0B0B0">
                    <th>Line Slope</th>
                    <th>Intercept</th>
                    <th>P-Value</th>
                    <th>Standard Error</th>
                    <th>R-Value</th>
                </tr>
                <tr>
                    <td>224.374</td>
                    <td>-13.803</td>
                    <td>9.845e-16</td>
                    <td>22.098</td>
                    <td>0.761</td>
                </tr>
            </table>


        </div>

        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>

        <script type="text/javascript">

            Highcharts.chart('vacancy', {
                chart: {
                    type: 'scatter',
                    zoomType: 'xy'
                },
                title: {
                    text: 'Housing Vacancy Rate Vs Gun Incidents'
                },
                subtitle: {
                    text: 'Source: NHGIS, 2015'
                },
                xAxis: {
                    title: {
                        enabled: true,
                        text: 'Housing vacancy rate in Chicago`s communities'
                    },
                    startOnTick: true,
                    endOnTick: true,
                    showLastLabel: true
                },
                yAxis: {
                    title: {
                        text: 'Gun crime incident rate in Chicago`s communities'
                    }
                },
                legend: {
                    layout: 'vertical',
                    align: 'left',
                    verticalAlign: 'top',
                    x: 100,
                    y: 70,
                    floating: true,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                    borderWidth: 1
                },
                plotOptions: {
                    scatter: {
                        marker: {
                            radius: 4,
                            states: {
                                hover: {
                                    enabled: true,
                                    lineColor: 'rgb(112, 128, 144)'
                                }
                            }
                        },
                        states: {
                            hover: {
                                marker: {
                                    enabled: false
                                }
                            }
                        },
                        tooltip: {
                            headerFormat: '<b>{series.name}</b><br>',
                            pointFormat: '{point.x} , {point.y} '
                        }
                    }
                },
                series: [{
                    name: 'Chicago Community',
                    color: 'rgba(243, 83, 83, .5)',
                    data: [[1.35800000e-01, 1.09108000e+01],
                    [1.24500000e-01, 2.78000000e+00],
                    [9.64000000e-02, 1.24197000e+01],
                    [6.88000000e-02, 2.53200000e+00],
                    [1.03300000e-01, 0.00000000e+00],
                    [8.72000000e-02, 1.05960000e+00],
                    [8.72000000e-02, 1.55960000e+00],
                    [1.53800000e-01, 1.24240000e+00],
                    [8.44000000e-02, 0.00000000e+00],
                    [8.23000000e-02, 0.00000000e+00],
                    [7.46000000e-02, 3.92950000e+00],
                    [6.96000000e-02, 0.00000000e+00],
                    [7.61000000e-02, 0.00000000e+00],
                    [9.44000000e-02, 5.82040000e+00],
                    [8.85000000e-02, 3.11890000e+00],
                    [9.69000000e-02, 7.49630000e+00],
                    [6.39000000e-02, 0.00000000e+00],
                    [1.16400000e-01, 0.00000000e+00],
                    [1.03000000e-01, 7.61970000e+00],
                    [9.58000000e-02, 0.00000000e+00],
                    [1.05300000e-01, 2.54690000e+00],
                    [1.00500000e-01, 4.07630000e+00],
                    [1.59000000e-01, 3.37339000e+01],
                    [7.62000000e-02, 8.59610000e+00],
                    [1.41000000e-01, 4.36486000e+01],
                    [2.97700000e-01, 6.11077000e+01],
                    [1.76900000e-01, 8.26566000e+01],
                    [9.45000000e-02, 1.63991000e+01],
                    [2.57700000e-01, 5.84762000e+01],
                    [1.60100000e-01, 1.26122000e+01],
                    [1.35300000e-01, 8.38710000e+00],
                    [1.57000000e-01, 1.02448000e+01],
                    [1.30600000e-01, 4.67500000e+00],
                    [8.72000000e-02, 0.00000000e+00],
                    [1.20200000e-01, 2.19322000e+01],
                    [1.09900000e-01, 0.00000000e+00],
                    [2.90000000e-01, 3.47705000e+01],
                    [1.94800000e-01, 3.19212000e+01],
                    [1.35900000e-01, 2.24202000e+01],
                    [2.40400000e-01, 3.41384000e+01],
                    [1.32800000e-01, 0.00000000e+00],
                    [2.33400000e-01, 1.92433000e+01],
                    [2.25600000e-01, 2.81310000e+01],
                    [1.79800000e-01, 4.51205000e+01],
                    [1.44700000e-01, 9.81830000e+00],
                    [2.72600000e-01, 4.16693000e+01],
                    [3.04900000e-01, 1.02880600e+02],
                    [1.03700000e-01, 1.44801000e+01],
                    [1.94000000e-01, 2.24119000e+01],
                    [1.61200000e-01, 0.00000000e+00],
                    [1.24100000e-01, 6.61850000e+00],
                    [1.20700000e-01, 4.33990000e+00],
                    [1.86700000e-01, 3.70982000e+01],
                    [2.97600000e-01, 3.08546000e+01],
                    [9.65000000e-02, 3.18268000e+01],
                    [4.81000000e-02, 2.89740000e+00],
                    [9.57000000e-02, 0.00000000e+00],
                    [1.40300000e-01, 4.40830000e+00],
                    [8.08000000e-02, 1.92159000e+01],
                    [9.47000000e-02, 3.12720000e+00],
                    [2.47500000e-01, 3.15478000e+01],
                    [5.63000000e-02, 5.52210000e+00],
                    [8.74000000e-02, 2.00531000e+01],
                    [6.80000000e-02, 0.00000000e+00],
                    [7.16000000e-02, 2.99800000e+00],
                    [1.61500000e-01, 1.61789000e+01],
                    [2.55600000e-01, 5.06970000e+01],
                    [3.62500000e-01, 6.52443000e+01],
                    [2.35500000e-01, 4.90767000e+01],
                    [4.88000000e-02, 7.30260000e+00],
                    [1.60800000e-01, 1.84641000e+01],
                    [6.09000000e-02, 0.00000000e+00],
                    [9.17000000e-02, 3.39712000e+01],
                    [7.97000000e-02, 0.00000000e+00],
                    [9.33000000e-02, 2.21788000e+01],
                    [6.63000000e-02, 7.83940000e+00],
                    [1.14800000e-01, 1.76920000e+00]]
                },
                {
                    type: 'line',
                    name: 'Regression Line',
                    data: [[0.0481, -3.0065650718597787], [0.3625, 67.53594397124948]],
                    marker: {

                        enabled: false
                    },
                    states: {
                        hover: {
                            lineWidth: 0
                        }
                    },
                    enableMouseTracking: false
                }]
            });
        </script>
    </div>

    <div id="dropout" class="textWord_about " data-link="second"
        style=" width: 35%; height: 450px; margin-left: 60%; margin-top: 30px ;position:absolute;   "></div>

    <div style="height:380px;width:35%;border:1px solid grey ;overflow:auto; margin-top: 479px; margin-left: 60%; text-align:center;position:relative;"
        class="textWord_about1 lead mapdescription" data-link="second">

        <div text align="left">
            <p>Lack of a high school diploma is associated with a lack of opportunities. Here the p-value is above the
                5% significance level hypothesis test against the slope being zero, but there seems to be an upward
                trend. The distribution of high school drop out rates is skewed towards the low end and so we log
                transform the variable for an improved regression fit. The R-value between log drop out rate and gun
                incidents is 0.299, another weak corrlelation where there is a lot of unexplained variation in the
                incident rate. A smaller p-value here indicates that the slope is signifiant and there is a general
                increase in gun incidents where there is a larger high school dropout population, but this is not
                explained well with simple linear regression.

            </p>
            <hr>
        </div>
        <p><b>Results & Description</b></p>

        <hr>
        <table style="width:100%">
            <tr style="background-color: #B0B0B0">
                <th>Line Slope</th>
                <th>Intercept</th>
                <th>P-Value</th>
                <th>Standard Error</th>
                <th>R-Value</th>
            </tr>
            <tr>
                <td>40.9</td>
                <td>9.94</td>
                <td>0.078</td>
                <td>22.93</td>
                <td>0.202</td>
            </tr>
        </table>
    </div>
    </div>

    <script type="text/javascript">
        Highcharts.chart('dropout', {
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'High School Dropout Rate Vs Gun Incidents'
            },
            subtitle: {
                text: 'Source: NHGIS, 2015'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'Rate of people with less than highschool diploma in Chicago`s communities'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Gun crime incident rate'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                borderWidth: 1
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 4,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: '{point.x} , {point.y} '
                    }
                }
            },
            series: [{
                name: 'Chicago Community',
                color: 'rgba(243, 83, 83, .5)',
                data: [[1.32000000e-01, 1.09108000e+01],
                [1.31900000e-01, 2.78000000e+00],
                [9.77000000e-02, 1.24197000e+01],
                [8.34000000e-02, 2.53200000e+00],
                [6.11000000e-02, 0.00000000e+00],
                [2.13000000e-02, 1.05960000e+00],
                [2.62000000e-02, 1.55960000e+00],
                [2.13000000e-02, 1.24240000e+00],
                [4.52000000e-02, 0.00000000e+00],
                [6.61000000e-02, 0.00000000e+00],
                [1.26100000e-01, 3.92950000e+00],
                [3.97000000e-02, 0.00000000e+00],
                [1.01800000e-01, 0.00000000e+00],
                [2.14600000e-01, 5.82040000e+00],
                [1.58100000e-01, 3.11890000e+00],
                [1.82100000e-01, 7.49630000e+00],
                [1.23900000e-01, 0.00000000e+00],
                [2.17200000e-01, 0.00000000e+00],
                [3.51400000e-01, 7.61970000e+00],
                [3.90300000e-01, 0.00000000e+00],
                [2.55600000e-01, 2.54690000e+00],
                [1.18200000e-01, 4.07630000e+00],
                [2.91200000e-01, 3.37339000e+01],
                [9.91000000e-02, 8.59610000e+00],
                [2.18200000e-01, 4.36486000e+01],
                [2.68000000e-01, 6.11077000e+01],
                [2.03800000e-01, 8.26566000e+01],
                [7.64000000e-02, 1.63991000e+01],
                [2.54600000e-01, 5.84762000e+01],
                [4.84000000e-01, 1.26122000e+01],
                [3.24500000e-01, 8.38710000e+00],
                [1.44000000e-02, 1.02448000e+01],
                [5.74000000e-02, 4.67500000e+00],
                [3.03600000e-01, 0.00000000e+00],
                [1.26600000e-01, 2.19322000e+01],
                [1.40500000e-01, 0.00000000e+00],
                [2.28300000e-01, 3.47705000e+01],
                [1.44500000e-01, 3.19212000e+01],
                [8.24000000e-02, 2.24202000e+01],
                [1.81200000e-01, 3.41384000e+01],
                [3.19000000e-02, 0.00000000e+00],
                [1.59500000e-01, 1.92433000e+01],
                [1.25900000e-01, 2.81310000e+01],
                [1.26000000e-01, 4.51205000e+01],
                [1.05300000e-01, 9.81830000e+00],
                [2.16300000e-01, 4.16693000e+01],
                [2.01100000e-01, 1.02880600e+02],
                [9.18000000e-02, 1.44801000e+01],
                [1.49400000e-01, 2.24119000e+01],
                [1.14300000e-01, 0.00000000e+00],
                [1.86800000e-01, 6.61850000e+00],
                [2.74300000e-01, 4.33990000e+00],
                [1.52800000e-01, 3.70982000e+01],
                [2.41900000e-01, 3.08546000e+01],
                [1.13600000e-01, 3.18268000e+01],
                [1.69000000e-01, 2.89740000e+00],
                [2.92000000e-01, 0.00000000e+00],
                [4.15100000e-01, 4.40830000e+00],
                [2.81500000e-01, 1.92159000e+01],
                [1.85300000e-01, 3.12720000e+00],
                [3.10000000e-01, 3.15478000e+01],
                [2.68700000e-01, 5.52210000e+00],
                [4.13400000e-01, 2.00531000e+01],
                [1.51600000e-01, 0.00000000e+00],
                [2.99000000e-01, 2.99800000e+00],
                [2.95500000e-01, 1.61789000e+01],
                [2.28200000e-01, 5.06970000e+01],
                [2.44400000e-01, 6.52443000e+01],
                [1.44000000e-01, 4.90767000e+01],
                [1.56200000e-01, 7.30260000e+00],
                [1.62000000e-01, 1.84641000e+01],
                [2.93000000e-02, 0.00000000e+00],
                [1.02300000e-01, 3.39712000e+01],
                [4.27000000e-02, 0.00000000e+00],
                [1.00800000e-01, 2.21788000e+01],
                [1.47000000e-01, 7.83940000e+00],
                [7.15000000e-02, 1.76920000e+00]]
            },
            {
                type: 'line',
                name: 'Regression Line',
                data: [[0.0144, 10.540225562245045], [0.484, 29.787800083216545]],
                marker: {
                    enabled: false
                },
                states: {
                    hover: {
                        lineWidth: 0
                    }
                },
                enableMouseTracking: false
            }]
        });

    </script>



    <!-- Per Capita Income  -->



    <div id="income" class="textWord_about " data-link="third"
        style=" width: 35%; height: 450px; margin-left: 60%; margin-top: 30px ;position:absolute; "></div>

    <div style="height:380px;width:35%;border:1px solid grey ;overflow:auto; margin-top: 479px; margin-left: 60%; text-align:center;position:relative;"
        class="textWord_about1 lead mapdescription" data-link="third">


        <p><b>Results & Description</b></p>
        <div text align="left">
            <p>This variable is chosen since it indicates the average level of prosperity in each area and is taken from
                American Community Survey database. There is massive variation within the city from $7,000 to $88,000,
                and income explains 41.9% of the variation in incident rate, where most incidents occur in the lower
                income communities.


            </p>

        </div>
        <hr>
        <table style="width:100%">
            <tr style="background-color: #B0B0B0">
                <th>Line Slope</th>
                <th>Intercept</th>
                <th>P-Value</th>
                <th>Standard Error</th>
                <th>R-Value</th>
            </tr>
            <tr>
                <td>-0.000552</td>
                <td>31.577</td>
                <td>0.000149</td>
                <td>0.000138</td>
                <td>0.419</td>
            </tr>
        </table>



    </div>

    </div>

    </div>




    <script type="text/javascript">
        Highcharts.chart('income', {
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'Per Capita Income vs Gun Incidents'
            },
            subtitle: {
                text: 'Source: NHGIS, 2015'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'per capita income in Chicago`s communities'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Gun crime incident rate'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                borderWidth: 1
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 4,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: '{point.x} , {point.y} '
                    }
                }
            },
            series: [{
                name: 'Chicago Community',
                color: 'rgba(243, 83, 83, .5)',
                data: [[2.43213445e+04, 1.09108000e+01],
                [2.38776463e+04, 2.78000000e+00],
                [3.76436232e+04, 1.24197000e+01],
                [4.04478282e+04, 2.53200000e+00],
                [5.82868157e+04, 0.00000000e+00],
                [6.23413331e+04, 1.05960000e+00],
                [7.04924237e+04, 1.55960000e+00],
                [8.78303493e+04, 1.24240000e+00],
                [4.41927015e+04, 0.00000000e+00],
                [3.55609805e+04, 0.00000000e+00],
                [3.15365031e+04, 3.92950000e+00],
                [4.52429261e+04, 0.00000000e+00],
                [2.66924563e+04, 0.00000000e+00],
                [2.34304761e+04, 5.82040000e+00],
                [2.55993708e+04, 3.11890000e+00],
                [2.66824074e+04, 7.49630000e+00],
                [2.64397507e+04, 0.00000000e+00],
                [2.24380649e+04, 0.00000000e+00],
                [1.66339887e+04, 7.61970000e+00],
                [1.56287450e+04, 0.00000000e+00],
                [2.16399902e+04, 2.54690000e+00],
                [3.40067227e+04, 4.07630000e+00],
                [1.47565599e+04, 3.37339000e+01],
                [4.68532517e+04, 8.59610000e+00],
                [1.61078256e+04, 4.36486000e+01],
                [1.19908440e+04, 6.11077000e+01],
                [1.32661050e+04, 8.26566000e+01],
                [4.42173182e+04, 1.63991000e+01],
                [1.14360846e+04, 5.84762000e+01],
                [1.02873755e+04, 1.26122000e+01],
                [1.73685986e+04, 8.38710000e+00],
                [7.25057546e+04, 1.02448000e+01],
                [6.86617836e+04, 4.67500000e+00],
                [1.54005120e+04, 0.00000000e+00],
                [2.31088498e+04, 2.19322000e+01],
                [2.07477447e+04, 0.00000000e+00],
                [1.79959058e+04, 3.47705000e+01],
                [2.30954505e+04, 3.19212000e+01],
                [3.70472136e+04, 2.24202000e+01],
                [1.29427877e+04, 3.41384000e+01],
                [3.70493642e+04, 0.00000000e+00],
                [1.71098789e+04, 1.92433000e+01],
                [1.85793043e+04, 2.81310000e+01],
                [1.98273630e+04, 4.51205000e+01],
                [2.20457703e+04, 9.81830000e+00],
                [1.60989126e+04, 4.16693000e+01],
                [1.43220000e+04, 1.02880600e+02],
                [2.58885888e+04, 1.44801000e+01],
                [1.87380861e+04, 2.24119000e+01],
                [2.13946000e+04, 0.00000000e+00],
                [1.59238009e+04, 6.61850000e+00],
                [1.70419351e+04, 4.33990000e+00],
                [1.63990084e+04, 3.70982000e+01],
                [7.05582370e+03, 3.08546000e+01],
                [2.55853520e+04, 3.18268000e+01],
                [2.63895836e+04, 2.89740000e+00],
                [1.71414791e+04, 0.00000000e+00],
                [1.34267514e+04, 4.40830000e+00],
                [1.76885534e+04, 1.92159000e+01],
                [2.31047548e+04, 3.12720000e+00],
                [1.24145852e+04, 3.15478000e+01],
                [1.56001826e+04, 5.52210000e+00],
                [1.22597547e+04, 2.00531000e+01],
                [2.43071024e+04, 0.00000000e+00],
                [1.77846907e+04, 2.99800000e+00],
                [1.31845331e+04, 1.61789000e+01],
                [1.27554863e+04, 5.06970000e+01],
                [1.14059979e+04, 6.52443000e+01],
                [1.60796760e+04, 4.90767000e+01],
                [2.30768418e+04, 7.30260000e+00],
                [1.68930116e+04, 1.84641000e+01],
                [4.00759955e+04, 0.00000000e+00],
                [2.14871934e+04, 3.39712000e+01],
                [3.30378585e+04, 0.00000000e+00],
                [2.80421914e+04, 2.21788000e+01],
                [2.56113584e+04, 7.83940000e+00],
                [3.64775412e+04, 1.76920000e+00]]
            },
            {
                type: 'line',
                name: 'Regression Line',
                data: [[7055.8237, 27.68213614475922], [87830.3493, -16.96051684281962]],
                marker: {
                    enabled: false
                },
                states: {
                    hover: {
                        lineWidth: 0
                    }
                },
                enableMouseTracking: false
            }]
        });

    </script>

    <div id="family" class="textWord_about " data-link="fourth"
        style=" width: 35%; height: 450px; margin-left: 60%; margin-top: 30px ;position:absolute;   "></div>

    <div style="height:380px;width:35%;border:1px solid grey ;overflow:auto; margin-top: 479px; margin-left: 60%; text-align:center;position:relative;"
        class="textWord_about1 lead mapdescription" data-link="fourth">

        <p><b>Results & Description</b></p>

        <hr>
        <div text align="left">
            <p>
                Family structure is taken as the rate of households with children under the age of 18 in households
                where their parents are married over the total, where where are also in either single parent households
                or with unmarried partners. This represents the rate to which families exist as a traditional ‘nuclear
                family’ which conservatives consider necessary for a well society. The R-Value here is 0.724, a strong
                predictor of incident rate. As the rate of married homes increase, gun incident rate falls. This may be
                seen as an indicator of ‘social decline’, it is also correlated to a lesser extent (0.563) with income.
            </p>

        </div>
        <hr>
        <table style="width:100%">
            <tr style="background-color: #B0B0B0">
                <th>Line Slope</th>
                <th>Intercept</th>
                <th>P-Value</th>
                <th>Standard Error</th>
                <th>R-Value</th>
            </tr>
            <tr>
                <td>-66.66</td>
                <td>53.11</td>
                <td>1.05e-13</td>
                <td>7.3416</td>
                <td>0.723</td>
            </tr>
        </table>
    </div>
    </div>
    </div>

    <script type="text/javascript">
        Highcharts.chart('family', {
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'Family Structure Vs Gun Incidents'
            },
            subtitle: {
                text: 'Source: NHGIS, 2015'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'Rate of married families with children in Chicago`s communities'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Gun crime incident rate'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                borderWidth: 1
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 4,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: '{point.x} , {point.y} '
                    }
                }
            },
            series: [{
                name: 'Chicago Community',
                color: 'rgba(243, 83, 83, .5)',
                data: [[6.36383731e-01, 1.09108000e+01],
                [7.61978163e-01, 2.78000000e+00],
                [5.99262446e-01, 1.24197000e+01],
                [8.13748379e-01, 2.53200000e+00],
                [8.60904123e-01, 0.00000000e+00],
                [8.29766693e-01, 1.05960000e+00],
                [8.35694051e-01, 1.55960000e+00],
                [6.99471210e-01, 1.24240000e+00],
                [8.30449827e-01, 0.00000000e+00],
                [8.42569270e-01, 0.00000000e+00],
                [8.02450230e-01, 3.92950000e+00],
                [8.70506713e-01, 0.00000000e+00],
                [7.28706624e-01, 0.00000000e+00],
                [7.09239636e-01, 5.82040000e+00],
                [7.42936976e-01, 3.11890000e+00],
                [7.24850100e-01, 7.49630000e+00],
                [7.24506388e-01, 0.00000000e+00],
                [6.58660844e-01, 0.00000000e+00],
                [5.68910783e-01, 7.61970000e+00],
                [6.16443453e-01, 0.00000000e+00],
                [6.89408397e-01, 2.54690000e+00],
                [6.18152912e-01, 4.07630000e+00],
                [3.84236453e-01, 3.37339000e+01],
                [6.64325641e-01, 8.59610000e+00],
                [2.94552272e-01, 4.36486000e+01],
                [1.74613835e-01, 6.11077000e+01],
                [2.18048557e-01, 8.26566000e+01],
                [5.41277642e-01, 1.63991000e+01],
                [1.95053544e-01, 5.84762000e+01],
                [5.55169849e-01, 1.26122000e+01],
                [5.45956952e-01, 8.38710000e+00],
                [8.34899329e-01, 1.02448000e+01],
                [7.32502397e-01, 4.67500000e+00],
                [7.67309065e-01, 0.00000000e+00],
                [2.56073538e-01, 2.19322000e+01],
                [2.28388474e-01, 0.00000000e+00],
                [3.54037267e-01, 3.47705000e+01],
                [3.06647940e-01, 3.19212000e+01],
                [4.29894997e-01, 2.24202000e+01],
                [1.65181224e-01, 3.41384000e+01],
                [6.00369174e-01, 0.00000000e+00],
                [2.74851631e-01, 1.92433000e+01],
                [2.48677249e-01, 2.81310000e+01],
                [2.56265443e-01, 4.51205000e+01],
                [2.86684783e-01, 9.81830000e+00],
                [2.95841854e-01, 4.16693000e+01],
                [2.46031746e-01, 1.02880600e+02],
                [4.33045356e-01, 1.44801000e+01],
                [3.46291866e-01, 2.24119000e+01],
                [1.70491803e-01, 0.00000000e+00],
                [4.82758621e-01, 6.61850000e+00],
                [6.09351433e-01, 4.33990000e+00],
                [3.37743191e-01, 3.70982000e+01],
                [5.28925620e-02, 3.08546000e+01],
                [5.42959428e-01, 3.18268000e+01],
                [7.39696312e-01, 2.89740000e+00],
                [6.04713805e-01, 0.00000000e+00],
                [6.80056879e-01, 4.40830000e+00],
                [6.47709321e-01, 1.92159000e+01],
                [6.43130333e-01, 3.12720000e+00],
                [5.35060976e-01, 3.15478000e+01],
                [7.14285714e-01, 5.52210000e+00],
                [6.61109982e-01, 2.00531000e+01],
                [7.25401256e-01, 0.00000000e+00],
                [6.96729688e-01, 2.99800000e+00],
                [4.49135300e-01, 1.61789000e+01],
                [2.63218391e-01, 5.06970000e+01],
                [1.58921933e-01, 6.52443000e+01],
                [2.18875502e-01, 4.90767000e+01],
                [6.73765093e-01, 7.30260000e+00],
                [2.26806979e-01, 1.84641000e+01],
                [8.54616048e-01, 0.00000000e+00],
                [3.15343915e-01, 3.39712000e+01],
                [8.29966330e-01, 0.00000000e+00],
                [6.20037807e-01, 2.21788000e+01],
                [8.03209460e-01, 7.83940000e+00],
                [6.53182629e-01, 1.76920000e+00]]
            },
            {
                type: 'line',
                name: 'Regression Line',
                data: [[0.052892562, 49.59318069768812], [0.870506713, -4.9045787586600085]],
                marker: {
                    enabled: false
                },
                states: {
                    hover: {
                        lineWidth: 0
                    }
                },
                enableMouseTracking: false
            }]
        });

    </script>


    <div id="age" class="textWord_about " data-link="fifth"
        style=" width: 35%; height: 450px; margin-left: 60%; margin-top: 30px ;position:absolute;  "></div>

    <div style="height:380px;width:35%;border:1px solid grey ;overflow:auto; margin-top: 479px; margin-left: 60%; text-align:center;position:relative;"
        class="textWord_about1 lead mapdescription" data-link="fifth">

        <div text align="left">
            <p><b>Results & Description</b></p>

            <p>
                Older homes may indicate a long established neighbourhood, but also depending on maintenance may result
                in decline in the quality of the built environment. The slope of the regression line is greatly
                influenced by the few communities where properties are on average newest and gun crime is relatively
                low. Removing the communities where the average age is newer than 1970 the slope is much steeper but has
                a lower correlation coefficient (0.236).

            </p>

        </div>
        <hr>
        <table style="width:100%">
            <tr style="background-color: #B0B0B0">
                <th>Line Slope</th>
                <th>Intercept</th>
                <th>P-Value</th>
                <th>Standard Error</th>
                <th>R-Value</th>
            </tr>
            <tr>
                <td>-0.391</td>
                <td>779.490</td>
                <td>0.0310</td>
                <td>0.178</td>
                <td>0.246</td>
            </tr>
        </table>
    </div>
    </div>
    </div>

    <script type="text/javascript">
        Highcharts.chart('age', {
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'Age of Home vs Gun Incidents'
            },
            subtitle: {
                text: 'Source: NHGIS, 2015'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'Median year built in Chicago`s communities'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Gun crime incident rate'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                borderWidth: 1
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 4,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: '{point.x} , {point.y} '
                    }
                }
            },
            series: [{
                name: 'Chicago Community',
                color: 'rgba(243, 83, 83, .5)',
                data: [[1.94182500e+03, 1.09108000e+01],
                [1.94711990e+03, 2.78000000e+00],
                [1.94441210e+03, 1.24197000e+01],
                [1.94366050e+03, 2.53200000e+00],
                [1.94301970e+03, 0.00000000e+00],
                [1.95247240e+03, 1.05960000e+00],
                [1.96029330e+03, 1.55960000e+00],
                [1.98312900e+03, 1.24240000e+00],
                [1.95284930e+03, 0.00000000e+00],
                [1.95433660e+03, 0.00000000e+00],
                [1.94808950e+03, 3.92950000e+00],
                [1.95146760e+03, 0.00000000e+00],
                [1.95367010e+03, 0.00000000e+00],
                [1.93900000e+03, 5.82040000e+00],
                [1.94066730e+03, 3.11890000e+00],
                [1.93908910e+03, 7.49630000e+00],
                [1.95400780e+03, 0.00000000e+00],
                [1.95029100e+03, 0.00000000e+00],
                [1.94256620e+03, 7.61970000e+00],
                [1.93900000e+03, 0.00000000e+00],
                [1.93900000e+03, 2.54690000e+00],
                [1.94125310e+03, 4.07630000e+00],
                [1.93927820e+03, 3.37339000e+01],
                [1.95135140e+03, 8.59610000e+00],
                [1.93985250e+03, 4.36486000e+01],
                [1.93900000e+03, 6.11077000e+01],
                [1.93900000e+03, 8.26566000e+01],
                [1.98548520e+03, 1.63991000e+01],
                [1.93900000e+03, 5.84762000e+01],
                [1.93900000e+03, 1.26122000e+01],
                [1.93945930e+03, 8.38710000e+00],
                [1.98898580e+03, 1.02448000e+01],
                [2.00164600e+03, 4.67500000e+00],
                [1.96519470e+03, 0.00000000e+00],
                [1.96842800e+03, 2.19322000e+01],
                [1.99680020e+03, 0.00000000e+00],
                [1.94781450e+03, 3.47705000e+01],
                [1.96145750e+03, 3.19212000e+01],
                [1.96125720e+03, 2.24202000e+01],
                [1.94990560e+03, 3.41384000e+01],
                [1.94178060e+03, 0.00000000e+00],
                [1.95267580e+03, 1.92433000e+01],
                [1.94310780e+03, 2.81310000e+01],
                [1.94553940e+03, 4.51205000e+01],
                [1.94263730e+03, 9.81830000e+00],
                [1.94191590e+03, 4.16693000e+01],
                [1.94900000e+03, 1.02880600e+02],
                [1.95184110e+03, 1.44801000e+01],
                [1.94759260e+03, 2.24119000e+01],
                [1.94883300e+03, 0.00000000e+00],
                [1.94646130e+03, 6.61850000e+00],
                [1.94419150e+03, 4.33990000e+00],
                [1.95041550e+03, 3.70982000e+01],
                [1.94770480e+03, 3.08546000e+01],
                [1.95156270e+03, 3.18268000e+01],
                [1.95728030e+03, 2.89740000e+00],
                [1.95144590e+03, 0.00000000e+00],
                [1.93900000e+03, 4.40830000e+00],
                [1.93900000e+03, 1.92159000e+01],
                [1.94198940e+03, 3.12720000e+00],
                [1.94169710e+03, 3.15478000e+01],
                [1.95641950e+03, 5.52210000e+00],
                [1.94341830e+03, 2.00531000e+01],
                [1.95981950e+03, 0.00000000e+00],
                [1.95498610e+03, 2.99800000e+00],
                [1.95050500e+03, 1.61789000e+01],
                [1.93970790e+03, 5.06970000e+01],
                [1.94342360e+03, 6.52443000e+01],
                [1.94051370e+03, 4.90767000e+01],
                [1.95833300e+03, 7.30260000e+00],
                [1.94411510e+03, 1.84641000e+01],
                [1.94320630e+03, 0.00000000e+00],
                [1.95100170e+03, 3.39712000e+01],
                [1.95538850e+03, 0.00000000e+00],
                [1.95605690e+03, 2.21788000e+01],
                [1.97108200e+03, 7.83940000e+00],
                [1.95219440e+03, 1.76920000e+00]]
            },
            {
                type: 'line',
                name: 'Regression Line',
                data: [[1939.0, 21.613807457015582], [2001.646, -2.868169352504765]],
                marker: {
                    enabled: false
                },
                states: {
                    hover: {
                        lineWidth: 0
                    }
                },
                enableMouseTracking: false
            }]
        });

    </script>


    <div id="mental" class="textWord_about " data-link="sixth"
        style=" width: 35%; height: 450px; margin-left: 60%; margin-top: 30px ;position:absolute;   "></div>


    <div style="height:380px;width:35%;border:1px solid grey ;overflow:auto; margin-top: 479px; margin-left: 60%; text-align:center;position:relative;"
        class="textWord_about1 lead mapdescription" data-link="sixth">


        <p><b>Results & Description</b></p>
        <hr>
        <div text align="left">
            <p>
                Given the level of attention to mental health problems to gun violence in the US, the map demonstrates
                that mental health tends to be poorer where gun incidents occur more densely. This variable is defined
                as the rate of the population that have self reported to have had suffered poor mental health (widely
                defined) in at least 14 days of the last month.
                The slope is small but significant with an R value 0.648, a poor mental health rate is strongly an
                increase in gun violence.

            </p>

        </div>
        <hr>
        <table style="width:100%">
            <tr style="background-color: #B0B0B0">
                <th>Line Slope</th>
                <th>Intercept</th>
                <th>P-Value</th>
                <th>Standard Error</th>
                <th>R-Value</th>
            </tr>
            <tr>
                <td>4.349</td>
                <td>-38.77</td>
                <td>1.903e-10</td>
                <td>0.590</td>
                <td>0.648</td>
            </tr>
        </table>
    </div>
    </div>
    </div>

    <script type="text/javascript">
        Highcharts.chart('mental', {
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'Mental Health Vs Gun Incidents'
            },
            subtitle: {
                text: 'Source: Centre for Disease Control and Prevention, 2014'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'Mental health value in Chicago`s communities'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Gun crime incident rate'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                borderWidth: 1
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 4,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: '{point.x} , {point.y} '
                    }
                }
            },
            series: [{
                name: 'Chicago Communities',
                color: 'rgba(243, 83, 83, .5)',
                data: [[12.43629139, 10.9108],
                [11.04200884, 2.78],
                [10.57981619, 12.4197],
                [9.6727572, 2.532],
                [8.23606552, 0.],
                [7.85489361, 1.0596],
                [7.93330838, 1.5596],
                [7.8381902, 1.2424],
                [8.92016626, 0.],
                [9.35160306, 0.],
                [10.28751179, 3.9295],
                [8.02947914, 0.],
                [9.18715075, 0.],
                [11.97644639, 5.8204],
                [11.61884006, 3.1189],
                [11.64204164, 7.4963],
                [10.99742679, 0.],
                [12.162446, 0.],
                [13.8766684, 7.6197],
                [14.06954818, 0.],
                [12.65498192, 2.5469],
                [11.16160609, 4.0763],
                [15.76186993, 33.7339],
                [9.88871942, 8.5961],
                [16.12001238, 43.6486],
                [18.36815732, 61.1077],
                [17.54824233, 82.6566],
                [10.57048888, 16.3991],
                [18.45179049, 58.4762],
                [17.20449374, 12.6122],
                [14.00813833, 8.3871],
                [7.73654339, 10.2448],
                [8.26438055, 4.675],
                [12.45942797, 0.],
                [12.47638447, 21.9322],
                [16.12063197, 0.],
                [15.70844924, 34.7705],
                [14.49460988, 31.9212],
                [11.03193767, 22.4202],
                [18.15690023, 34.1384],
                [9.23826564, 0.],
                [15.28776508, 19.2433],
                [14.7838849, 28.131],
                [13.14021851, 45.1205],
                [11.81296024, 9.8183],
                [15.79463427, 41.6693],
                [14.9, 102.8806],
                [10.89961628, 14.4801],
                [13.9326296, 22.4119],
                [13.2934198, 0.],
                [14.81858495, 6.6185],
                [13.31062408, 4.3399],
                [15.57194024, 37.0982],
                [22.09185437, 30.8546],
                [11.85790367, 31.8268],
                [10.80482427, 2.8974],
                [12.58168446, 0.],
                [15.28222315, 4.4083],
                [13.00147323, 19.2159],
                [11.39939331, 3.1272],
                [17.03438718, 31.5478],
                [12.76925838, 5.5221],
                [15.93268913, 20.0531],
                [11.1780414, 0.],
                [12.9298486, 2.998],
                [15.95592867, 16.1789],
                [17.55070835, 50.697],
                [19.04942259, 65.2443],
                [15.6300227, 49.0767],
                [11.61569095, 7.3026],
                [14.82509283, 18.4641],
                [8.42655985, 0.],
                [12.12533122, 33.9712],
                [9.63217409, 0.],
                [11.34492548, 22.1788],
                [11.83410944, 7.8394],
                [9.95631712, 1.7692]]
            },
            {
                type: 'line',
                name: 'Regression Line',
                data: [[7.73654338, -3.0065650718597787], [22.09185437, 57.31277640872516]],
                marker: {
                    enabled: false
                },
                states: {
                    hover: {
                        lineWidth: 0
                    }
                },
                enableMouseTracking: false
            }]
        });

    </script>

    <div id="ocup" class="textWord_about " data-link="seventh"
        style=" width: 35%; height: 450px; margin-left: 60%; margin-top: 30px ;position:absolute;   "></div>

    <div style="height:380px;width:35%;border:1px solid grey ;overflow:auto; margin-top: 479px; margin-left: 60%; text-align:center;position:relative;"
        class="textWord_about1 lead mapdescription" data-link="seventh">

        <p><b>Results & Description</b></p>

        <hr>

        <div text align="left">
            <p>
                Occupation type of a neighbourhood informs about the terms of residency. An owner occupier can be
                thought of as an invested in the area with intention to stay long term. Effects of higher owner
                occupancy are likely to be a stable community with minimal turnover. Meanwhile rented accomodation is
                associated which short term tenancies and higher turnover, since cost of moving is lower. Rental
                occupation is often a result of lack of access to capital to purchase ones one house, we therefore see
                some correlation between this variable and per capita income. Alternatively rented occupation may be due
                to the prevalence of young single householders, and we see in some areas such as downtown, renter
                occupation is high whilst income is also high and gun incidents rate is low. The R value is 0.368 which
                indicates this variable has limited explanatory power.
            </p>
        </div>
        <hr>
        <table style="width:100%">
            <tr style="background-color: #B0B0B0">
                <th>Line Slope</th>
                <th>Intercept</th>
                <th>P-Value</th>
                <th>Standard Error</th>
                <th>R-Value</th>
            </tr>
            <tr>
                <td>40.699</td>
                <td>-4.415</td>
                <td>0.000996</td>
                <td>11.879</td>
                <td>0.368</td>
            </tr>
        </table>
    </div>
    </div>
    </div>

    <script type="text/javascript">
        Highcharts.chart('ocup', {
            chart: {
                type: 'scatter',
                zoomType: 'xy'
            },
            title: {
                text: 'Type Of Occupancy vs Gun Incidents'
            },
            subtitle: {
                text: 'Source: NHGIS, 2015'
            },
            xAxis: {
                title: {
                    enabled: true,
                    text: 'Rate of rental occupied in Chicago`s communities'
                },
                startOnTick: true,
                endOnTick: true,
                showLastLabel: true
            },
            yAxis: {
                title: {
                    text: 'Gun crime incident rate'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 70,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF',
                borderWidth: 1
            },
            plotOptions: {
                scatter: {
                    marker: {
                        radius: 4,
                        states: {
                            hover: {
                                enabled: true,
                                lineColor: 'rgb(100,100,100)'
                            }
                        }
                    },
                    states: {
                        hover: {
                            marker: {
                                enabled: false
                            }
                        }
                    },
                    tooltip: {
                        headerFormat: '<b>{series.name}</b><br>',
                        pointFormat: '{point.x} , {point.y} '
                    }
                }
            },
            series: [{
                name: 'Chicago Community',
                color: 'rgba(243, 83, 83, .5)',
                data: [[0.7513, 10.9108],
                [0.5339, 2.78],
                [0.6991, 12.4197],
                [0.6178, 2.532],
                [0.493, 0.],
                [0.6376, 1.0596],
                [0.5744, 1.5596],
                [0.593, 1.2424],
                [0.2107, 0.],
                [0.18, 0.],
                [0.3817, 3.9295],
                [0.1064, 0.],
                [0.4945, 0.],
                [0.6112, 5.8204],
                [0.4275, 3.1189],
                [0.5504, 7.4963],
                [0.2733, 0.],
                [0.4037, 0.],
                [0.5051, 7.6197],
                [0.5939, 0.],
                [0.6277, 2.5469],
                [0.6278, 4.0763],
                [0.6378, 33.7339],
                [0.6268, 8.5961],
                [0.6045, 43.6486],
                [0.7424, 61.1077],
                [0.7718, 82.6566],
                [0.6295, 16.3991],
                [0.7528, 58.4762],
                [0.6425, 12.6122],
                [0.7343, 8.3871],
                [0.588, 10.2448],
                [0.5176, 4.675],
                [0.6449, 0.],
                [0.818, 21.9322],
                [0.8002, 0.],
                [0.6557, 34.7705],
                [0.7481, 31.9212],
                [0.7036, 22.4202],
                [0.8425, 34.1384],
                [0.64, 0.],
                [0.7775, 19.2433],
                [0.774, 28.131],
                [0.6295, 45.1205],
                [0.3383, 9.8183],
                [0.6109, 41.6693],
                [0.5434, 102.8806],
                [0.2222, 14.4801],
                [0.441, 22.4119],
                [0.5591, 0.],
                [0.4223, 6.6185],
                [0.3289, 4.3399],
                [0.3747, 37.0982],
                [0.8949, 30.8546],
                [0.2908, 31.8268],
                [0.1917, 2.8974],
                [0.4429, 0.],
                [0.5383, 4.4083],
                [0.4419, 19.2159],
                [0.5518, 3.1272],
                [0.6147, 31.5478],
                [0.3085, 5.5221],
                [0.4442, 20.0531],
                [0.2926, 0.],
                [0.2777, 2.998],
                [0.5529, 16.1789],
                [0.5242, 50.697],
                [0.7254, 65.2443],
                [0.6715, 49.0767],
                [0.1539, 7.3026],
                [0.5628, 18.4641],
                [0.1688, 0.],
                [0.3135, 33.9712],
                [0.1295, 0.],
                [0.2929, 22.1788],
                [0.4996, 7.8394],
                [0.6251, 1.7692]]
            },
            {
                type: 'line',
                name: 'Regression Line',
                data: [[0.1064, 14.311045102128727], [0.8949, 46.62942778906661]],
                marker: {
                    enabled: false
                },
                states: {
                    hover: {
                        lineWidth: 0
                    }
                },
                enableMouseTracking: false
            }]
        });

    </script>
    </div>
    </div>
    </div>

    <!-- Gun Incidents-->

    <div id="inc" class="textWord_about " data-link="eigth"
        style=" width: 35%; height: 450px; margin-left: 60%; margin-top: 30px ;position:absolute; "></div>

    <div style="height:380px;width:35%;border:1px solid grey ;overflow:auto; margin-top: 479px; margin-left: 60%; text-align:center;position:relative;"
        class="textWord_about1 lead mapdescription" data-link="eigth">

        <p><b>Results & Description</b></p>
        <hr>
        <div text align="left">
            <p>According the frequency of the incident rate in Chicago’s communities, which is shown in the histogram
                chart, it seems that more than half of the communities (Chicago has been comprised of 77 communities)
                have witnessed less than 5 number of gun violence per 100 k persons, while the other communities have
                had relatively the higher rate of incidents. This issue demonstrates that the distribution of gun
                related crimes does not comply with a normal distribution between communities (it is a right skewed
                distribution), and high incident rate have concentrated in some certain communities.
            </p>
        </div>
    </div>
    </div>
    </div>

    <script type="text/javascript">
        var data = [[10.9108, 0.],
        [2.78, 1.],
        [12.4197, 2.],
        [2.532, 3.],
        [0., 4.],
        [1.0596, 5.],
        [1.5596, 6.],
        [1.2424, 7.],
        [0., 8.],
        [0., 9.],
        [3.9295, 10.],
        [0., 11.],
        [0., 12.],
        [5.8204, 13.],
        [3.1189, 14.],
        [7.4963, 15.],
        [0., 16.],
        [0., 17.],
        [7.6197, 18.],
        [0., 19.],
        [2.5469, 20.],
        [4.0763, 21.],
        [33.7339, 22.],
        [8.5961, 23.],
        [43.6486, 24.],
        [61.1077, 25.],
        [82.6566, 26.],
        [16.3991, 27.],
        [58.4762, 28.],
        [12.6122, 29.],
        [8.3871, 30.],
        [10.2448, 31.],
        [4.675, 32.],
        [0., 33.],
        [21.9322, 34.],
        [0., 35.],
        [34.7705, 36.],
        [31.9212, 37.],
        [22.4202, 38.],
        [34.1384, 39.],
        [0., 40.],
        [19.2433, 41.],
        [28.131, 42.],
        [45.1205, 43.],
        [9.8183, 44.],
        [41.6693, 45.],
        [102.8806, 46.],
        [14.4801, 47.],
        [22.4119, 48.],
        [0., 49.],
        [6.6185, 50.],
        [4.3399, 51.],
        [37.0982, 52.],
        [30.8546, 53.],
        [31.8268, 54.],
        [2.8974, 55.],
        [0., 56.],
        [4.4083, 57.],
        [19.2159, 58.],
        [3.1272, 59.],
        [31.5478, 60.],
        [5.5221, 61.],
        [20.0531, 62.],
        [0., 63.],
        [2.998, 64.],
        [16.1789, 65.],
        [50.697, 66.],
        [65.2443, 67.],
        [49.0767, 68.],
        [7.3026, 69.],
        [18.4641, 70.],
        [0., 71.],
        [33.9712, 72.],
        [0., 73.],
        [22.1788, 74.],
        [7.8394, 75.],
        [1.7692, 76.]];

        /**
         * Get histogram data out of xy data
         * @param   {Array} data  Array of tuples [x, y]
         * @param   {Number} step Resolution for the histogram
         * @returns {Array}       Histogram data
         */
        function histogram(data, step) {
            var histo = {},
                x,
                i,
                arr = [];

            // Group down
            for (i = 0; i < data.length; i++) {
                x = Math.floor(data[i][0] / step) * step;
                if (!histo[x]) {
                    histo[x] = 0;
                }
                histo[x]++;
            }

            // Make the histo group into an array
            for (x in histo) {
                if (histo.hasOwnProperty((x))) {
                    arr.push([parseFloat(x), histo[x]]);
                }
            }

            // Finally, sort the array
            arr.sort(function (a, b) {
                return a[0] - b[0];
            });

            return arr;
        }

        Highcharts.chart('inc', {
            chart: {
                type: 'column'
            },
            title: {
                text: 'Incident rate in communities'
            },
            xAxis: {
                gridLineWidth: 1
            },
            yAxis: [{
                title: {
                    text: 'Frequency'
                }
            }, {
                opposite: false,
                title: {
                    text: 'Y value'
                }
            }],
            series: [{
                name: 'Value',
                type: 'column',
                color: 'rgba(243, 83, 83, .5)',
                data: histogram(data, 5.14403),
                pointPadding: 0,
                groupPadding: 0,
                pointPlacement: 'between'
            }]
        });
    </script>

    <!-- Clustering-->
    <div class="textWord_about " data-link="ninth"
        style=" width: 35%; height: 450px;  margin-left: 60%; margin-top: 30px ;position:absolute; overflow:auto ">
        <div id="cclust0"></div>
        <div id="cclust1"></div>
        <div id="cclust2"></div>
        <div id="cclust3"></div>
    </div>

    <div style="height:380px;width:35%;border:1px solid grey ;overflow:auto; margin-top: 479px; margin-left: 60%; text-align:center;position:relative;"
        class="textWord_about1 lead mapdescription" data-link="ninth">
        <p><b>Results & Description</b></p>
        <hr>
        <div text align="left">
            <p>
                Our cluster analysis puts all communities in to one of 4 clusters, identified by the similarity of the
                variables above except for incident rate. We find 258 of the 409 incidents contained within one cluster.
                This means 64.06% of incidents occur within 25.32% of the population. Without including the incident
                rate within the cluster analysis we find the clusters experience very different proportions of the
                incidents, and similarity of characteristics finds the areas where there is much more gun violence. The
                interquartile range for standardised incident rate is firmly above zero in cluster 1, whereas in every
                other cluster it is below zero
            </p>
            <table style="width:100%">
                <tr style="background-color: #B0B0B0">
                    <th>Cluster ID</th>
                    <th>Communities in Cluster</th>
                    <th>Characterisation</th>
                    <th>Population</th>
                    <th>% of total Population</th>
                    <th>Incidents in 2015</th>
                    <th>% of Incidents</th>
                    <th>Incident Rate</th>
                    <br><br>
                </tr>
                <tr>
                    <td>0</td>
                    <td>6</td>
                    <td>Downtown</td>
                    <td>344522</td>
                    <td>12.78%</td>
                    <td>16</td>
                    <td>3.91%</td>
                    <td>4.64</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>25</td>
                    <td>Social Disorder?</td>
                    <td>682548</td>
                    <td>25.32%</td>
                    <td>262</td>
                    <td>64.06%</td>
                    <td>38.39</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>25</td>
                    <td>Comfortable</td>
                    <td>875937</td>
                    <td>32.50%</td>
                    <td>49</td>
                    <td>11.98%</td>
                    <td>5.59</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>77</td>
                    <td>Mixed</td>
                    <td>792591</td>
                    <td>32.50%</td>
                    <td>82</td>
                    <td>20.05%</td>
                    <td>10.34</td>
                </tr>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            var clust0 = new Highcharts.Chart({
                chart: {
                    type: 'boxplot',
                    renderTo: 'cclust0'
                },

                title: {
                    text: 'Cluster 0'
                },

                legend: {
                    enabled: false
                },

                xAxis: {
                    categories: ['Per Capita Income', 'Family Structure', 'Vacant rate', 'Rented rate', 'Dropout rate', 'Age of Housing', 'Poor Mental health rate', 'Incident rate']
                },

                yAxis: {
                    title: {
                        text: 'Standardised Values'
                    }
                },

                series: [{
                    name: 'Observations',
                    color: '#808080',

                    data: [
                        [1.129101432, 2.375284225, 2.732974947, 2.886363613, 3.887397066],
                        [-0.001951432, 0.733206757, 1.057413667, 1.289206879, 1.298384161],
                        [-0.708577226, -0.682773138, -0.35014784, 0.151087732, 0.278340769],
                        [-0.046270859, 0.273044224, 0.340408037, 0.498872125, 0.54727329],
                        [-1.534705414, -1.467625575, -1.443807371, -1.192501016, -0.931959032],
                        [0.12897258, 1.159399089, 2.553491655, 2.843168628, 3.874015919],
                        [-1.637533279, -1.603475511, -1.586825234, -1.494293065, -0.725461559],
                        [-0.76263651, -0.753047514, -0.664349301, -0.392261541, -0.029078319]],
                    tooltip: {
                        headerFormat: '<em>Cluster 0 {point.key}</em><br/>'
                    }
                }]
            });
        });
        $(function () {
            var clust1 = new Highcharts.Chart({
                chart: {
                    type: 'boxplot',
                    renderTo: 'cclust1'
                },

                title: {
                    text: 'Cluster 1'
                },

                legend: {
                    enabled: false
                },

                xAxis: {
                    categories: ['Per Capita Income', 'Family Structure', 'Vacant rate', 'Rented rate', 'Dropout rate', 'Age of Housing', 'Poor Mental health rate', 'Incident rate']
                },

                yAxis: {
                    title: {
                        text: 'Standardised Values'
                    }
                },
                series: [{
                    name: 'Observations',
                    fillColor: '#ffeecc',
                    color: '#808080',
                    data: [
                        [-1.221168325, -0.848848707, -0.630260862, -0.413435402, 0.675629896],
                        [-2.158979652, -1.429542664, -1.261599456, -1.085956539, -0.029408299],
                        [-0.387616789, 0.337725519, 1.248291692, 1.702160856, 3.183951771],
                        [-0.9973206, 0.193480665, 0.770051255, 1.302066252, 1.955017859],
                        [-0.873628737, -0.308797047, -0.099780156, 0.543797432, 1.339033788],
                        [-0.897080462, -0.691670315, -0.399042157, -0.066513966, 3.504961568],
                        [-0.576949743, 0.537470208, 0.902889347, 1.520245567, 2.982553173],
                        [-0.815375988, 0.25859156, 0.819547824, 1.538722521, 4.118162435]],
                    tooltip: {
                        headerFormat: '<em>Cluster 1 {point.key}</em><br/>'
                    }
                }]
            });
        });
        $(function () {
            var clust2 = new Highcharts.Chart({
                chart: {
                    type: 'boxplot',
                    renderTo: 'cclust2'
                },

                title: {
                    text: 'Cluster 2'
                },

                legend: {
                    enabled: false
                },

                xAxis: {
                    categories: ['Per Capita Income', 'Family Structure', 'Vacant rate', 'Rented rate', 'Dropout rate', 'Age of Housing', 'Poor Mental health rate', 'Incident rate']
                },

                yAxis: {
                    title: {
                        text: 'Standardised Values'
                    }
                },

                series: [{
                    name: 'Observations',
                    fillColor: 'rgb(255, 203, 168)',
                    color: '#808080',
                    data: [
                        [-0.308459829, -0.047628008, 0.327106339, 0.713349677, 2.018923408],
                        [-0.999822671, 0.345905015, 0.825857648, 1.201457708, 1.452139666],
                        [-1.261420974, -0.968738989, -0.777859435, -0.577082421, -0.063828507],
                        [-2.227373221, -1.674141274, -1.128865684, 0.040188208, 0.916448203],
                        [-1.389851848, -1.032092705, -0.694749166, -0.448789755, -0.031728145],
                        [-0.770099505, -0.484896911, 0.059690162, 0.270949368, 1.54627289],
                        [-1.543255383, -1.117745494, -0.722459675, -0.529927992, -0.225054007],
                        [-0.815375988, -0.815375988, -0.681130044, -0.441405145, 0.814753326]],
                    tooltip: {
                        headerFormat: '<em>Cluster 2 {point.key}</em><br/>'
                    }
                }]

            });
        });
        $(function () {
            var clust3 = new Highcharts.Chart({
                chart: {
                    type: 'boxplot',
                    renderTo: 'cclust3'

                },

                title: {
                    text: 'Cluster 3'
                },

                legend: {
                    enabled: false
                },

                xAxis: {
                    categories: ['Per Capita Income', 'Family Structure', 'Vacant rate', 'Rented rate', 'Dropout rate', 'Age of Housing', 'Poor Mental health rate', 'Incident rate']
                },

                yAxis: {
                    title: {
                        text: 'Standardised Values'
                    }

                },

                series: [{
                    name: 'Observations',
                    fillColor: 'rgba(243, 83, 83, .5)',
                    color: '#808080',
                    data: [
                        [-1.016789611, -0.693410526, -0.589599118, -0.298796232, 0.020110228],
                        [-0.695548125, 0.120094608, 0.447896726, 0.652290952, 0.996351297],
                        [-1.145479318, -0.606774797, -0.485177451, -0.028480442, 0.341967287],
                        [-1.318757378, -0.44780162, 0.127708123, 0.537725663, 1.103157355],
                        [-0.391431631, 0.436858558, 1.15626553, 1.479998668, 3.030612344],
                        [-0.897080462, -0.897080462, -0.669408854, -0.037162044, 1.097898282],
                        [-0.458688507, -0.117528934, 0.0569219, 0.641737739, 1.409614164],
                        [-0.815375988, -0.671541048, -0.537295105, -0.292775708, 0.800369832]],
                    tooltip: {
                        headerFormat: '<em>Cluster 3{point.key}</em><br/>'
                    }
                }]

            });
        })
    </script>

    <!-- END OF ANALYSIS PAGE -->

    <!-- Overview  PAGE -->

    <div class="read" id="methods">
        <h2 class=" page-header4 page-header text-center" ,"text-center"> Overview </h2>

        <p class="lead lead3">
            Gun violence is one of the main problems in the US, a country that sits at 11th place in the international
            rank of gun-related deaths. This violence occurs disproportionately in urban regions: in 2015 just 20 cities
            – covering nearly 9% of the total US population – accounted for almost 25% of gun-related deaths. Chicago,
            one of the most violent cities in the US, registered more shootings than New York City and Los Angeles
            combined.
            <br><br>

        <div id="container" style="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>

        <script type="text/javascript">
            // Create the chart
            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'The cities with highest share of people killed in gun incidents in the U.S.A., 2015'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    title: {
                        text: 'Percentage'
                    }

                },
                legend: {
                    enabled: false
                },
                plotOptions: {
                    series: {
                        borderWidth: 0,
                        dataLabels: {
                            enabled: true,
                            format: '{point.y:.1f}%'
                        }
                    }
                },

                tooltip: {
                    headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
                    pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b> of total<br/>'
                },

                series: [{
                    name: 'Brands',
                    colorByPoint: true,
                    data: [{
                        name: 'Chicago',
                        y: 3.33,
                        drilldown: 'Chicago',
                        color: 'rgba(243, 83, 83, .5)'
                    }, {
                        name: 'Houston',
                        y: 2.14,
                        drilldown: 'Houston',
                        color: '#808080'
                    }, {
                        name: 'Baltimore',
                        y: 2.02,
                        drilldown: 'Baltimore',
                        color: '#808080'
                    }, {
                        name: 'New York',
                        y: 2.01,
                        drilldown: 'New York',
                        color: '#808080'
                    }, {
                        name: 'Saint Louis',
                        y: 1.52,
                        drilldown: 'Saint Louis',
                        color: '#808080'
                    }, {
                        name: 'Philadelphia',
                        y: 1.05,
                        drilldown: null,
                        color: '#808080'
                    }]
                }],

            });
        </script>

        <h4 class=" page-header4 lead text-center" ,"text-center"> What are the determinant factors in the concentration
            of gun violence?
        </h4>

        <div class="arrow animated bounce">


            <input type="image"
                src="https://static1.squarespace.com/static/54bb8c5fe4b0226a90142315/5694c3bf4bf11844ad2ffbd4/5694c3ce1c121086a88d22aa/1452590059830/Untitled-1-04.jpg"
                name="saveForm" class="btTxt submit" width="80" height="80" <a href="#"
                onclick="smoothScroll(document.getElementById('theories'))"></a>
        </div>
    </div>

    <div id='theories'>
        <h3 class=" page-header4 page-header text-center" ,"text-center"> Theories Involving Gun Crime </h3>
    </div>

    <p class="lead lead3 text-center">
        So what are the main theories that relate to gun crime according to the literature ?
    </p>

    <div class="container">
        <img src="over.svg" class="img-fluid img-fluid1 " alt="Responsive image" align='middle' width="100%"
            height="auto">
    </div>

    <div class="arrow animated bounce">
        <input type="image"
            src="https://static1.squarespace.com/static/54bb8c5fe4b0226a90142315/5694c3bf4bf11844ad2ffbd4/5694c3ce1c121086a88d22aa/1452590059830/Untitled-1-04.jpg"
            name="saveForm" class="btTxt submit" width="80" height="80" <a href="#"
            onclick="smoothScroll(document.getElementById('variables'))"></a>
    </div>
    </div>

    <div class=variables id=variables>
        <h3 class=" page-header6 page-header text-center" ,"text-center"> The Chosen Variables </h3>
    </div>

    <p class="lead lead3 text-center">
        On the basis of the literature we have chosen the following variables for the analysis:
    </p>

    <div class="container">
        <img src="variab.svg" class="img-fluid img-fluid1 " alt="Responsive image">
    </div>

    <!-- END OF THE OVERVIEW PAGE -->

    <!-- THE Methodology Page -->

    <div class="read" id="read">
        <h2 class=" page-header4 page-header text-center" ,"text-center"> Methodology & Data </h2>

        <p class="lead lead3">
            The aim of this project is to analyse the relationship between gun crime and other factors and visualise our
            finding on the website. We utilise SQL database servers, analysis in Python and JavaScript programming
            within the HTML. Our data relates gun crime incidents in 2015 in Chicago. The following paragraphs briefly
            explain the methodology used in different steps of this research.
        </p>
        <h3 class=" page-header4 text-center" ,"text-center"> Gathering Of Data </h3>
        <p class="lead lead3">
            The first attribute data are the records of all gun incidents in Chicago in 2015, which are collected and
            maintained by the Gun Violence Archive. The geographical coordinates of these incidents are provided for use
            in vector representation as points.
            Three factors have been considered when gathering the data needed for this research. Firstly, they should be
            the data that has been released by the official relevantÂ organisations to ensure the data sources are
            reliable. Secondly, they must be related to the comparable years influencing the gun crime incidents that we
            are analysing, and finally their scale should be equivalent and relatable to the boundary files. 
        </p>

        <h3 class=" page-header4 text-center" ,"text-center"> Data Cleaning & The Database </h3>
        <p class="lead lead3">
            For creating a database, MySQL software is used, which allows the import of various tables into
            the available server (dev.spatialdatacapture.org). Also with MySQL scripts the tables can be cleaned,
            amended and joined, per Census Tracts and grouped for the larger Community Areas. Moreover, by data cleaning
            the data is ready for the analysis process.
        </p>
        <h3 class=" page-header4 text-center" ,"text-center"> Analysis </h3>
        <p class="lead lead3">

            Two methods of analysis conducted on the data related to the gun shooting crime in Chicago, namely
            regression and cluster analysis. 
            Firstly, different factors are considered to find any relationship between the gun shooting incident rate in
            Chicago's communities and the demographic and socioeconomic factors. For finding the said relationship, we
            perform simple linear regression. Next, we decide about the strength and significance of the regressions
            with looking at the r-value and P-value.
            To analyse if gun incidents were occurring at a higher rate in places of common characteristics, cluster
            analysis is used to further analyse the relationship between our variables and the incident rate. Incident
            rate is not used in the algorithm but analysed against the output.
            K-Means clustering algorithm is used to ensure all areas are assigned a cluster for comparison against gun
            incidents across the whole city.

        </p>

        <h3 class=" page-header4 text-center" ,"text-center"> Server Side Components/ API </h3>

        <p class="lead lead3">

            Once analysis is completed we need to set up a node.js program that would provide JSON files to return our
            desired data, through MySQL commands, for use in our website. Endpoints are created for boundary data as
            GeoJSONs, incident locations and characteristics, and our explanatory variables for varying scales.

        </p>

        <h3 class=" page-header4 text-center" ,"text-center"> Visualisation </h3>

        <p class="lead lead3">

            The findings of this research have been presented by creating a website that presents information through
            different formats, namely map, graphs and charts and text. 

        </p>
        <h3 class=" page-header4 text-center" ,"text-center"> The Map 
             </h3>
        <p class="lead lead3">

            Our map tool is supported by Google Maps API, which is one of the most popular interactive mapsÂ for the
            web. It allows for customizability of functions through JavaScript and so compatibility with our JSON files.
            Our visualization presents all incidents as markers, and colours areas according to observed values for
            visual inferences.
        </p>
        <h3 class=" page-header4 text-center" ,"text-center"> Graphs & Charts
             </h3>

        <p class="lead lead3">

            The graphs and charts related to data analysis and descriptive statistics have been utilised alongside the
            map. These charts and graphs are provided by Highcharts library which provides interactive charts
            and graphs for the websites. By changing the relevant variables in the javascript of APIs provided
            by Highcharts, various appropriate data visualization can be obtained.

        </p>

        <h3 class=" page-header4 text-center" ,"text-center"> Text
        </h3>

        <p class="lead lead3">

            The necessary texts for this website related to research objectives, analysis, explanations, methodology
            etc. has uploaded in certain html files which their style has improved with supporting css files. 

        </p>

        <h3 class=" page-header4 text-center" ,"text-center"> Conclusions
        </h3>

        <p class="lead lead3">

            After testing simple linear regressions between incident rate and different demographic and socioeconomic
            factors in Chicago's communities, it seems that there are quite high direct correlations between gun
            shooting crime in communities and housing vacant rate, rate of people with less than high school diploma,
            rate of rental occupied and mental health problems. Also, there are a negative correlation between gun
            shooting incidents and per capita income, rate of married families with children and median year
            of buildings. 

            Our cluster analysis puts all communities in to one of 4 clusters, identified by the similarity of
            variables. We find 258 of the 409 incidents contained within one cluster. This means 63.1% of incidents
            occur within 24.7% of the population. Without using the incident rate within the cluster analysis, we find
            the clusters experience very different proportions of the incidents, and similarity of characteristics finds
            the areas where there is much more gun violence.

        </p>

        <h3 class=" page-header4 text-center" ,"text-center"> Data Sources
        </h3>

        <p class="lead lead3">

            <b>1)<a href="data2.nhgis.org">NHGIS</a></b>
            <br>

            <br>Geographic level: Census Tract (by State--County)
            <br>Dataset: 2015 American Community Survey: 5-Year Data [2011-2015, Block Groups & Larger Areas]

            <br>Tables:

            <br>1. Family Type by Presence and Age of Own Children Under 18 Years


            <br>2. Educational Attainment for the Population 25 Years and Over


            <br>3. Per Capita Income in the Past 12 Months (in 2015 Inflation-Adjusted Dollars)


            <br>4. Occupancy Status


            <br>5. Tenure

            <br>6. Median Year Structure Built

            <br><br>

            <b> 2) <a
                    href="https://chronicdata.cdc.gov/500-Cities/500-Cities-Local-Data-for-Better-Health/6vp6-wxuq">Centre
                    for Disease Control and Prevention </a></b>
            <br>
            <br>Data resource: Behavioral Risk Factor Surveillance System (BRFSS): 2014.
            <br>Numerator: Respondents aged >18 years who report 14 or more days during the past 30 days during which
            their mental health was not good.
            <br>Denominator: Respondents aged >18 years who report or do not report the number of days during the past
            30 days during which their mental health was not good (excluding those who refused to answer, had a missing
            answer, or answered 'don't know/not sure').

            <br><br><b> 3)<a href="https://data.cityofchicago.org/Facilities-Geographic-Boundaries/"> Chicago Data
                    Portal</a> </b>
            <br><br> <a
                href="https://data.cityofchicago.org/Facilities-Geographic-Boundaries/Boundaries-Census-Tracts-2010/5jrd-6zik">
                Census Tracts (2010)</a>
            <br><a
                href="https://data.cityofchicago.org/Facilities-Geographic-Boundaries/Boundaries-Community-Areas-current-/cauq-8yn6">Chicago
                Community Areas</a>
            <br><br>
            <b>4) <a href="https://www.theguardian.com/world/2017/mar/20/mapping-gun-murders-micro-level-new-data-2015">Gun
                    Incidents</a></b>
            <br><br> Data of individual and census tract aggregates gun incidents for 2015 available from the Guardian,
            acquired from <a href="http://www.gunviolencearchive.org/">Gun Violence Archive.</a><br>
            <br><br>
            <b>5) <a href="https://developers.google.com/maps/">Map provided by Google Maps API</a></b>


        </p>

    </div>

    </div>

    <!-- END OF THE STORY PAGE -->

    <!-- THE AUTHORS PAGE -->

    <div class="aut" id="aut">
        <h2 class=" page-header5 page-header text-center" ,"text-center"> The Authors </h2>
    </div>

    <div class="container">
        <img src="team.png" class="img-fluid" alt="Responsive image">
    </div>


    <p class="lead2 lead">

        The "Chicago's Gun Violence" project was developed by the members above for the Spatial Data Capture, Storage &
        Analysis module as part of the MSc in Smart Cities & Urban Analytics at UCL, London. </p>

    <div class="container">

        <div class="btn">
            <button type="button" class=" btn1 btn-default btn-lg"
                onclick="smoothScroll(document.getElementById('map'))">See The Map</button>
            <button type="button" class="btn2 btn-default btn-lg"
                onclick="smoothScroll(document.getElementById('read'))">Read The Story</button>
        </div>

        <!-- END OF THE AUTHORS PAGE -->

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
</body>
</html>

<!-- Scrolling Function -->

<script>

    window.smoothScroll = function (target) {
        var scrollContainer = target;
        do { //find scroll container
            scrollContainer = scrollContainer.parentNode;
            if (!scrollContainer) return;
            scrollContainer.scrollTop += 1;
        } while (scrollContainer.scrollTop == 0);

        var targetY = 0;
        do { //find the top of target relatively to the container
            if (target == scrollContainer) break;
            targetY += target.offsetTop;
        } while (target = target.offsetParent);

        scroll = function (c, a, b, i) {
            i++; if (i > 30) return;
            c.scrollTop = a + (b - a) / 30 * i;
            setTimeout(function () { scroll(c, a, b, i); }, 20);
        }
        // start scrolling
        scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0);
    }
</script>

<!-- END of Scrolling Function -->

<!-- Navbar shrinking function -->
<script>
    $(window).scroll(function () {
        if ($(document).scrollTop() > 50) {
            $('nav').addClass('shrink');
        } else {
            $('nav').removeClass('shrink');
        }
    });
</script>
<!-- End of Navbar shrinking function -->

<!-- High Charts Functions -->
<script>
    Highcharts.chart('high', {
        chart: {
            type: 'column'
        },
        title: {
            text: 'Deaths Per 100,000 Due To Guns '
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'USA',
                'Germany',
                'UK',
                'Australia',
                'Canada',
                'France',
                'Sweden',

            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'No. Of Deaths'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:20px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:10">{series.name}: </td>' +
                '<td style="padding:2"><b>{point.y:.1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0

            }
        },
        series: [{
            name: 'Gun Deaths Per 100,000 People',
            data: [3.2, 0.19, 0.07, 0.14, 0.5, 0.06, 0.41]

        },]
    });
</script>

<!-- End of High Charts Functions -->

<!-- Functions for graph changing buttons  -->
<script type="text/javascript">
    $('.textWord_about').hide();

    $('.link').click(function () {
        $('.textWord_about').hide();
        $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
            width: '200px'
        }, 300);
    });
</script>

<!-- Functions for graph changing buttons  -->
<script type="text/javascript">
    $('.textWord_about1').hide();

    $('.link').click(function () {
        $('.textWord_about1').hide();
        $('.textWord_about1[data-link=' + $(this).data('link') + ']').fadeIn({
            width: '200px'
        }, 300);
    });
</script>