stateBar.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', 'Overview'], ['crmain.html', 'Overview'], ['stateCrime.html','State Crime Details']]));
</script>
<div w3-include-html="footer.html"></div>

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


### 2. State Level Crime Overview

Notes:

  - On the left side charts the *m* on y-axis units means **millis** - e.g. *200m* = "0.20" . An "interesting" nomenclature by Vega
  - Lines have tooltips with State/County Info


</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": [{
          "width": 1024,
          "height": 650,
          "mark": "bar",
          "encoding": {
            "x": {"field": "State", "type": "nominal" /*, "legend": false */},
            "y": {
              "field": "State_Crime_Rate",
              "type": "quantitative",
              "scale": {"type": "log"},
            },
            "color": {
              "field": "State_Crime_Rate",
             "type": "quantitative",
              "scale": {
                "nice": true,
                "zero": true,
                "range": [
                  "#99ccff",
                  "#830300"
                ]
              },
              "legend": true
            }
          },
          "config": {
            "legend": {"gradientStrokeColor" : "red"}
          }
        },
      ]
    };


  vega.embed("#countyCrime", countySpec, opt, function (error, result) {
    console.log(error);
    var tooltipOption = {
      showAllFields: false,
      fields: [
            {field: "State", title: "State"},
            {field: "State_Area", title: "State Geographical Area"},
            {field: "State_Population", title: "State Population"},
            {field: "State_Population_Density", title: "State Population Density"},
            {field: "State_Crime_Rate", title: "State Crime Rate"},
            {field: "State_Total_Crimes", title: "State Total Crimes"}
      ]
    };
    vegaTooltip.vegaLite(result.view, countySpec, tooltipOption);
  });

</script>
<script src="strapdown.js"></script>
<script>setTimeout(function(){document.getElementById('stateBarTab').className = 'active';},100);</script>