|  | <!DOCTYPE html> | 
        
          |  | <meta charset="utf-8"> | 
        
          |  | <style> | 
        
          |  |  | 
        
          |  | .counties { | 
        
          |  | fill: none; | 
        
          |  | } | 
        
          |  |  | 
        
          |  | .states { | 
        
          |  | fill: none; | 
        
          |  | stroke: #fff; | 
        
          |  | stroke-linejoin: round; | 
        
          |  | } | 
        
          |  |  | 
        
          |  | </style> | 
        
          |  | <svg width="960" height="600"></svg> | 
        
          |  | <script src="https://d3js.org/d3.v4.min.js"></script> | 
        
          |  | <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | 
        
          |  | <script src="https://d3js.org/topojson.v2.min.js"></script> | 
        
          |  | <script> | 
        
          |  |  | 
        
          |  | var svg = d3.select("svg"), | 
        
          |  | width = +svg.attr("width"), | 
        
          |  | height = +svg.attr("height"); | 
        
          |  |  | 
        
          |  | var unemployment = d3.map(); | 
        
          |  |  | 
        
          |  | var path = d3.geoPath(); | 
        
          |  |  | 
        
          |  | var x = d3.scaleLinear() | 
        
          |  | .domain([1, 10]) | 
        
          |  | .rangeRound([600, 860]); | 
        
          |  |  | 
        
          |  | var color = d3.scaleThreshold() | 
        
          |  | .domain(d3.range(2, 10)) | 
        
          |  | .range(d3.schemeBlues[9]); | 
        
          |  |  | 
        
          |  | var g = svg.append("g") | 
        
          |  | .attr("class", "key") | 
        
          |  | .attr("transform", "translate(0,40)"); | 
        
          |  |  | 
        
          |  | g.selectAll("rect") | 
        
          |  | .data(color.range().map(function(d) { | 
        
          |  | d = color.invertExtent(d); | 
        
          |  | if (d[0] == null) d[0] = x.domain()[0]; | 
        
          |  | if (d[1] == null) d[1] = x.domain()[1]; | 
        
          |  | return d; | 
        
          |  | })) | 
        
          |  | .enter().append("rect") | 
        
          |  | .attr("height", 8) | 
        
          |  | .attr("x", function(d) { return x(d[0]); }) | 
        
          |  | .attr("width", function(d) { return x(d[1]) - x(d[0]); }) | 
        
          |  | .attr("fill", function(d) { return color(d[0]); }); | 
        
          |  |  | 
        
          |  | g.append("text") | 
        
          |  | .attr("class", "caption") | 
        
          |  | .attr("x", x.range()[0]) | 
        
          |  | .attr("y", -6) | 
        
          |  | .attr("fill", "#000") | 
        
          |  | .attr("text-anchor", "start") | 
        
          |  | .attr("font-weight", "bold") | 
        
          |  | .text("Unemployment rate"); | 
        
          |  |  | 
        
          |  | g.call(d3.axisBottom(x) | 
        
          |  | .tickSize(13) | 
        
          |  | .tickFormat(function(x, i) { return i ? x : x + "%"; }) | 
        
          |  | .tickValues(color.domain())) | 
        
          |  | .select(".domain") | 
        
          |  | .remove(); | 
        
          |  |  | 
        
          |  | d3.queue() | 
        
          |  | .defer(d3.json, "https://d3js.org/us-10m.v1.json") | 
        
          |  | .defer(d3.tsv, "unemployment.tsv", function(d) { unemployment.set(d.id, +d.rate); }) | 
        
          |  | .await(ready); | 
        
          |  |  | 
        
          |  | function ready(error, us) { | 
        
          |  | if (error) throw error; | 
        
          |  |  | 
        
          |  | svg.append("g") | 
        
          |  | .attr("class", "counties") | 
        
          |  | .selectAll("path") | 
        
          |  | .data(topojson.feature(us, us.objects.counties).features) | 
        
          |  | .enter().append("path") | 
        
          |  | .attr("fill", function(d) { return color(d.rate = unemployment.get(d.id)); }) | 
        
          |  | .attr("d", path) | 
        
          |  | .append("title") | 
        
          |  | .text(function(d) { return d.rate + "%"; }); | 
        
          |  |  | 
        
          |  | svg.append("path") | 
        
          |  | .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; })) | 
        
          |  | .attr("class", "states") | 
        
          |  | .attr("d", path); | 
        
          |  | } | 
        
          |  |  | 
        
          |  | </script> | 
  
You probably don't have the us.json file (see index.html line 53). This format works on bl.ocks.org but it won't work for you on your local machine unless you have the same file hierarchy.