countyCrime.old.html

<div w3-include-html="header.html"></div>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<script>
    w3.includeHTML();
</script>

<script>
    function bottomNav(arr) {

        const out =
            `<div class="container">
        <div class="col-lg-2 text-left">
            <a href="${arr[0][0]}">
                <button type="button" class="btn btn-default btn-xs btn-default">
                    ${arr[0][1]}<span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                </button>
            </a>

        </div>
        <div class="col-lg-8 text-center">
            <a href="${arr[1][0]}">
                <button type="button" class="btn btn-default btn-xs btn-default">
                    ${arr[1][1]}<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                </button>
            </a>
        </div>

        <div class="col-lg-2 text-right">
            <a href="${arr[2][0]}">
                <button type="button" class="btn btn-default btn-xs btn-default">
                    ${arr[2][1]}<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                </button>
            </a>
        </div>
    </div>`;
        return out;
    }
</script>
<!-- Begin page content -->


<div class="container">

    <div class="page-header">
        <h1>County Crime Rates</h1>
    </div>

    <p class="lead">County Crime Rates


    <div class="container" id="vegaChart">

        <div class="secondVis" id="countyCrime">

        </div>
    </div>

    <script>
        document.write(bottomNav([['crmain.html', 'Home'], ['stateCrime.html', 'State Crime'], ['exploration.html', 'Exploration']]));
    </script>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.1.0/topojson.min.js"></script>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.3/vega-lite.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.31/vega.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.14/vega-embed.min.js"></script>
<link rel="stylesheet" type="text/css"
      href="https://cdnjs.cloudflare.com/ajax/libs/vega-tooltip/0.3.3/vega-tooltip.min.css"></link>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-tooltip/0.3.3/vega-tooltip.min.js"></script>

//    const countySpec = "countyCrime.vl.json";
<script>
    var opt = {
        mode: "vega-lite",
        actions: false
    };
    //      var opts = {"actions": false};

    //    const countySpec = "countyCrime.vl.json";
    const countySpec = {
        "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
        "description": "Drag out a rectangular brush to highlight points.",
        "repeat": {
            "row": ["county_area", "county_pop", "county_pop_density"],
            "column": ["county_crime_rate", "county_total_crimes"]
        },
        "spec": {
            "data": {
                "url": "data/combinedData.json"
            },
            "selection": {
                "brush": {
                    "type": "interval"
                }
            },
            "mark": "point",
            "encoding": {
                "x": {
                    "field": {"repeat": "row"},
                    "type": "quantitative"
                },
                "y": {
                    "field": {"repeat": "column"},
                    "type": "quantitative"
                }

            }
        }
    };

    //    vega.embed('#countyCrime', countySpec, opts);

    vega.embed("#countyCrime", countySpec, opt, function (error, result) {
        console.log(error);
        var tooltipOption = {
            showAllFields: false,
            fields: [
                {field: "county_area", title: "County Geographical Area"},
                {field: "county_pop", title: "County Population"},
                {field: "county_pop_density", title: "County Population Density"},
                {field: "county_crime_rate", title: "County Crime Rate"},
                {field: "county_total_crimes", title: "County Total Crimes"}
            ]
        };
        vegaTooltip.vegaLite(result.view, countySpec, tooltipOption);
    });

</script>

<div w3-include-html="footer.html"></div>