0

I am trying to read a .json file into an HTML file using d3.

When I use one .json file -- for the entire US -- the map shows up fine. However, when I tried switching out the US file for a state of Wisconsin .json file it shows up like this...

enter image description here

Anyone know what the issue could be?

Here's the code:

    <script>
        var margin = {top: 20, left: 20, bottom: 20, right: 20}
          height = 600-margin.top - margin.bottom,
          width = 960 - margin.left - margin.right;

        var svg2 = d3.select("#map2").append("svg")
           .attr("height", height)
           .attr("width", width)
           .append("g")
              .attr("transform", "translate(" + margin.left + "," + 
               margin.right + ")");

        d3.queue()
            .defer(d3.json, "wiscCountiesGeneralized.json")
            .await(ready);

        var projection2 = d3.geoAlbers()
            .translate([width/2, height/1.5])
            .scale(75)

        var path2 = d3.geoPath()
           .projection(projection2)

        function ready (error, data) {
           console.log(data)
           var counties = topojson.feature(data, 
           data.objects.counties).features
           console.log(counties)

         svg2.selectAll(".counties")
            .data(counties)
            .enter().append("path")
            .attr("class", "counties")
            .attr("d", path2)

  }
</script>
Gerardo Furtado
  • 100,839
  • 9
  • 121
  • 171
Casey
  • 21
  • 4
  • 1
    Is it possible to share your topojson file? – Andrew Reid Oct 04 '17 at 19:05
  • I was able to figure it out. The issue was not with the code, but with the topojson file. The shapefile I converted from was already in a projected coordinate system. I went back into arc, projected the shapefile into a geographic coordinate system and then converted to json. As soon as I used this new version, the map drew perfectly. Although it is a bit tilted because I'm using a conic projection. I'm working on figuring out how to rotate it, but when I try .rotate() the map disappears. If you have any advice, let me know :) – Casey Oct 06 '17 at 17:51
  • For a conical projection, rotate on the x ('rotate([-longitude,0])' you rotate the globe under you, hence the negative x value), center on the y, see https://stackoverflow.com/questions/39958471/d3-js-map-how-to-rotate-it/41133970#41133970 for visuals and an explanation – Andrew Reid Oct 06 '17 at 20:20

0 Answers0