Unemployment rate by bricedev

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

#map {
    width: 960px;
    height: 700px;
    cursor: default;
}

#svgContainer path{
  cursor: default;
}

</style>
<body>
<div id="map"></div>
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.9/mapbox.css' rel='stylesheet'/>

<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
  
L.mapbox.accessToken = 'pk.eyJ1IjoiYnJpY2VkZXYiLCJhIjoiRkZFQU9SVSJ9.YsRJ0JOGMybM6Zzh-wU9Wg';
var map = L.mapbox.map('map', 'mapbox.light',{ zoomControl: false }).setView([48.7, 2.5], 9);

map.dragging.disable();
map.touchZoom.disable();
map.doubleClickZoom.disable();
map.scrollWheelZoom.disable();
if (map.tap) map.tap.disable();

var svg = d3.select(map.getPanes().overlayPane).append("svg").attr("id","svgContainer"),
    g = svg.append("g").attr("class", "leaflet-zoom-hide");

d3.json("data.json", function(collection) {

  var color = d3.scale.threshold()
      .domain([0, 100, 500, 1000, 2500,5000,80000])
      .range(["#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"]);

  var transform = d3.geo.transform({point: projectPoint}),
      path = d3.geo.path().projection(transform);

  var feature = g.selectAll("path")
      .data(collection.features)
      .enter().append("path")
      .style('fill', function(d,i) { return color(d.properties.chom25_49); })
      .style('opacity',0.45)
      .style('stroke-width',".35px")
      .style("stroke",'#fff')
      .on('mouseover',function(d,i) {
        d3.select(this)
        .style('stroke-width',"1.5px")
        .style('stroke',"black")
      })
      .on('mouseout',function(d,i) {
        d3.select(this)
        .style('stroke-width',".35px")
        .style('stroke',"#fff")
        .style('opacity',0.45)
      });

  reset();

  function reset() {
    var bounds = path.bounds(collection),
        topLeft = bounds[0],
        bottomRight = bounds[1];

    svg.attr("width", bottomRight[0] - topLeft[0])
       .attr("height", bottomRight[1] - topLeft[1])
       .style("left", topLeft[0] + "px")
       .style("top", topLeft[1] + "px");

    g.attr("transform", "translate(" + -topLeft[0] + "," + -topLeft[1] + ")");

    feature.attr("d", path);
  }

  function projectPoint(x, y) {
    var point = map.latLngToLayerPoint(new L.LatLng(y, x));
    this.stream.point(point.x, point.y);
  }

});

d3.select(self.frameElement).style("height", 700 + "px");

</script>