Choropleth with Vincent

Demonstration of binding Vincent graphs to individual GeoJSON data.

<!DOCTYPE html>
<head>
   <link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet-0.5/leaflet.css" />
   <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.5/leaflet.min.js"></script>
   <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
   <script src="https://d3js.org/queue.v1.min.js"></script>
   <script src="https://trifacta.github.com/vega/vega.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<style>

.legend {
    padding: 0px 0px;
    font: 10px sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}

.key path {
  display: none;
}

</style>
</head>
<body>

queue()
    .defer(d3.json, 'data.json')
    .defer(d3.json, 'us-states.json')
    .await(makeMap)

function makeMap(error, data_1,gjson_1) {

function matchKey(datapoint, key_variable){

return(parseFloat(key_variable[0][datapoint]));

};

function parse(spec, div) {

vg.parse.spec(spec, function(chart) { chart({el:div}).update(); });

};

var color = d3.scale.threshold()
              .domain([5, 6, 7, 8, 9, 10])
              .range(['#EDF8FB', '#BFD3E6', '#9EBCDA', '#8C96C6', '#8C6BB1', '#88419D', '#6E016B']);

var map = L.map('map').setView([48, -102], 3);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data (c) <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'
    }).addTo(map);

function style_1(feature) {
    return {
        fillColor: color(matchKey(feature.id, data_1)),
        weight: 1,
        opacity: 0.5,
        color: 'black',
        fillOpacity: 0.7
        };
    }

var test_layer;

function popup_bind(feature, layer) {
      layer.on('click', function() {
          var div = $('<div id="vis" style="width: 475px; height: 250px;"></div>')[0];
          layer.bindPopup(div);
          layer._popup.options.maxWidth = 960;
          layer.openPopup();
          parse('vis.json', '#vis')
      });
    };

gJson_layer_1 = L.geoJson(gjson_1, {style: style_1, onEachFeature: popup_bind}).addTo(map)

var legend = L.control({position: 'topright'});

legend.onAdd = function (map) {var div = L.DomUtil.create('div', 'legend'); return div};

legend.addTo(map);

var x = d3.scale.linear()
    .domain([0, 11])
    .range([0, 400]);

var xAxis = d3.svg.axis()
        .scale(x)
        .orient("top")
        .tickSize(1)
        .tickValues(color.domain())

var svg = d3.select(".legend.leaflet-control").append("svg")
        .attr("id", 'legend')
        .attr("width", 450)
        .attr("height", 40);

var g = svg.append("g")
        .attr("class", "key")
        .attr("transform", "translate(25,16)");

g.selectAll("rect")
        .data(color.range().map(function(d, i) {
          return {
            x0: i ? x(color.domain()[i - 1]) : x.range()[0],
            x1: i < color.domain().length ? x(color.domain()[i]) : x.range()[1],
            z: d
          };
        }))
      .enter().append("rect")
        .attr("height", 10)
        .attr("x", function(d) { return d.x0; })
        .attr("width", function(d) { return d.x1 - d.x0; })
        .style("fill", function(d) { return d.z; });

g.call(xAxis).append("text")
        .attr("class", "caption")
        .attr("y", 21)
        .text('Unemployment Rate (%)');

};

</script>

</body>

Modified http://cdn.leafletjs.com/leaflet-0.5/leaflet.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://d3js.org/queue.v1.min.js to a secure url

Modified http://trifacta.github.com/vega/vega.js to a secure url

Modified http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js to a secure url

https://cdn.leafletjs.com/leaflet-0.5/leaflet.js

https://d3js.org/d3.v3.min.js

https://d3js.org/queue.v1.min.js

https://trifacta.github.com/vega/vega.js

https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js