countySelector.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>
<script>
  document.write(bottomNav([['crmain.html', 'Home'], ['stateCrime.html', 'State Crime'], ['usMap.html', 'Country Map']]));
</script>
<div w3-include-html="footer.html"></div>

<xmp theme="united" style="display:none;">

  ## 2. County Crime.

</xmp>
<div class="container">
  <div class="container" id="vegaChart">
    <div class="secondVis" id="countyCrime">
    </div>
  </div>
</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>
<script>
  var opt = {
    mode: "vega-lite",
    actions: false
  };

  const countySpec = {
    "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
    "description": "Drag out a rectangular brush to highlight points.",
    "data": {
      "url": "data/combinedData2.json"
    },
    "layer": [{
      "selection": {
        "StateVar": {
          "type": "single",
          "fields": ["State"],
          "bind": {
            "input": "select", "options": ["Alaska", "Alabama", "Arkansas"]
          },
        }
      }
    },
        {
          "transform": [{"filter": {"selection": "StateVar"}}],
          "width": 400,
          "height": 400,
          "mark": "point",
          "encoding": {
            "x": {"field": "County_Population_Density", "type": "quantitative", "scale": {"type": "log"}},
            "y": {"field": "County_Crime_Rate", "type": "quantitative", "scale": {"type": "log"}},
            "color": {"field": "State", "type": "nominal"}
          }
        }
      ]
    };


  vega.embed("#countyCrime", countySpec, opt, function (error, result) {
    console.log(error);
    var tooltipOption = {
      showAllFields: false,
      fields: [
        {field: "State", title: "State"},
        {field: "County", title: "County"},
        {field: "County_Area", title: "County Geographical Area"},
        {field: "County_Population", title: "County Population"},
        {field: "County_Population_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>


<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>