1

I am trying to project a d3 map of the US. For some reason, it looks like this:

enter image description here

I used mapshaper.org to create a topojson. I took a look at this link:

d3 toposjon map troubleshooting … why does it look like all zig zags and shards?

but it wasn't very helpful. Here is my code:

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Test</title>
</head>
<body>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script type="text/javascript">
            var width = 960,
                height = 500;

            var projection = d3.geo.albersUsa()
                .scale(1000)
                .translate([width / 2, height / 2]);

            var path = d3.geo.path()
                .projection(projection);

            var svg = d3.select("body").append("svg")
                .attr("width", width)
                .attr("height", height);

            d3.json("states.json", function(error, us) {

              svg.insert("path", ".graticule")
                  .datum(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b && !(a.id / 1000 ^ b.id / 1000); }))
                  .attr("class", "county-boundary")
                  .attr("d", path);

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

            d3.select(self.frameElement).style("height", height + "px");                
    </script>
</body>

Could you help me out?

Thanks!

Community
  • 1
  • 1
user3700215
  • 185
  • 2
  • 10
  • 2
    Set `fill: none; stroke: black` for `path` elements in your CSS. – Lars Kotthoff May 02 '15 at 02:58
  • @LarsKotthoff, this fixed it somewhat. However, I'm no longer getting the outline of the country: http://i.imgur.com/SHlq4t8.png Do you have any idea what? Thank you for your help! – user3700215 May 02 '15 at 03:27
  • 1
    These may be in the data as a separate object -- `us.objects.country`? – Lars Kotthoff May 02 '15 at 05:11
  • 1
    Maybe as Lars said, or you have something special in the CSS on the boundarys what could also be possible. Did you take an existing example, than please show your code. – kwoxer May 02 '15 at 19:58
  • Thanks all! I added the following code: `svg.insert("path", ".graticule") .datum(topojson.feature(us, us.objects.land)) .attr("class", "land") .attr("d", path);` and it added the country boundry. – user3700215 May 03 '15 at 01:31

0 Answers0