Linked Questions

Popular Questions

I'm following along Mike Bostock's choropleth tutorial.

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
      <script type = "text/javascript" src="https://d3js.org/d3-array.v1.min.js"></script>
      <script type = "text/javascript" src="https://d3js.org/d3-geo.v1.min.js"></script>
      <script src="https://unpkg.com/[email protected]"></script>

      </script>
      <style>
         body { font-family: Arial; }
      </style>
   </head>
   <body>
      <svg></svg>
       <script>

         us = d3.json("https://unpkg.com/[email protected]/us/10m.json")

         const width = 960;
         const height = 600;
         const path = d3.geoPath();

         const svg = d3.select("svg")
            .attr("width",width)
            .attr("height",height)
            .style("width", "100%")
            .style("height", "auto");

         //svg-command
         svg.append("g")
         .selectAll("path")
         .data(topojson.feature(us, us.objects.counties).features)
         .enter().append("path")
         .attr("fill", d => color(data.get(d.id)))
         .attr("d", path)
         .append("title")
         .text(d => format(data.get(d.id)));

         format = d3.format("")     
      </script>             

</html>

I'm getting the error Uncaught TypeError: Cannot read property 'counties' of undefined at check.html:32 (anonymous) @ check.html:32

My understanding is that the svg-command adds a group element as a child to the svg element. It selects the path variable and binds the counties which are features in the topojson file. The topojson.feature() command converts the data to GEOJson.

All the counties get selected in the enter() command since there is no "g" in the html block. Then, the following commands give each of them a color and a name.

Is topojson.feature still in use?

Related Questions