CODEWITHSUNDEEP
javascriptd3.jstopojson
Enk
Enk

Reputation: 99

D3 with Topojson only renders parts of the map

I'm trying to create a choropleth map of USA and color it according to some data. So, I get data (just json files):

d3.queue()
.defer(d3.json, 'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json')
.defer(d3.json, 'https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json')
.await(ready);

Then in my ready function I do this 

function ready(error, us, education) {
  if (error) throw error;

  svg.append("g").selectAll( "path" )
  .data(topojson.feature(us, us.objects.counties).features)
  .enter()
  .append( "path" )
  .attr("class", "county")
  .attr( "fill", "red" )
  .attr( "d", path )

(My path variable is defined on top of the file const path = d3.geoPath();)

And I get my map, but there are some kind of holes in it, like some counties just don't render. I haven't implemented the coloring yet, so it should all just be red, but has big black fragments (which also don't react to mouseover). You can see it on my CodePen: http://codepen.io/enk/pen/dNBOoj

Please, tell me where is my mistake.

Upvotes: 1

Views: 173

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38161

Your issue is in your mesh:

   svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);

You need to specify a fill of none for it in your css:

.states {
  fill:none;
}

or in the code that appends it:

   svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr('fill','none')
      .attr("d", path);

Updated pen.

Upvotes: 2

Related Questions