D3 Examples - Folium Employed Choropleth

Folium Employed Choropleth

A Leaflet.js map created with Folium and the default D3 threshold scale, with data bound between the Pandas DataFrame and the TopoJSON. See the Gist for the python code to generate the dataframe. The map was generated with the following Python code:

map_1 = folium.Map(location=[48, -102], zoom_start=3) map_1.geo_json(geo_path=county_geo, data_out='data1.json', data=df, columns=['GEO_ID', 'Employed_2011'], key_on='feature.id', fill_color='YlOrRd', fill_opacity=0.7, line_opacity=0.3, topojson='objects.us_counties_20m') map_1.create_map(path='map_1.html')

xxxxxxxxxx
 
<!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://d3js.org/topojson.v1.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>
​
        <div id="map" style="width: 960px; height: 500px"></div>
​
<script>
​
queue()
    .defer(d3.json, 'data1.json')
    .defer(d3.json, 'us_counties_20m_topo.json')
    .await(makeMap)
​
function makeMap(error, data_1,tjson_1) {
​
​
    topo_1 = topojson.feature(tjson_1, tjson_1.objects.us_counties_20m);
​
​
​
​
    function matchKey(datapoint, key_variable){
        return(parseFloat(key_variable[0][datapoint]));
    };
​
​
    var color = d3.scale.threshold()
              .domain([40.0, 10000.0, 30000.0, 70000.0, 100000.0])
              .range(['#FFFFB2', '#FED976', '#FEB24C', '#FD8D3C', '#FC4E2A', '#E31A1C']);
​
​
    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.3,
        color: 'black',
        fillOpacity: 0.7
    };
}
​
​
​
    gJson_layer_1 = L.geoJson(topo_1, {style: style_1}).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, 110000])
    .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('Employed_2011');
​
​
};
​
</script>
​
</body>
    