Search code examples
javascriptd3.jstopojson

d3 Topojson debugging transformations

Are there general d3/topojson debugging hints? I am relatively new to the format and have made a visualization through d3 for the US states. The JavaScript and d3 works for a topojson file I had on hand. However, when changing the file to something with more descriptions, no errors or issues were thrown, but I got the following result:

enter image description here

I do not want to post the entire json because it is quite large, but are there any debugging practices you would recommend when dealing with topojson visualization in d3? I am assuming the error is with the transformation, but I am unsure how to approach and remedy the issue.

var svg = d3.select("#map1");
var path = d3.geoPath();
svg.append("g")
   .attr("class", "states")
   .selectAll("path")
   .data(topojson.feature(x, x.objects.states).features)
   .enter()

Update: Not looking for anyone to explicitly debug my code. I need to understand what is going wrong for additional projects. But if this is helpful, here's a very small sample of the overall topojson:

{"type":"Topology",
 "arcs":[[[1071248,837478],[27,35],[64,83],[44,75],[38,57],[42,29],[32,-10],[38,-33],[35,-57],[32,-447],[-10,-33],[-28,6],[-216,188],[-85,81],[-13,26]],... ]
 "transform":{"scale":[0.00008503679331736181,0.00005379922226014208],
              "translate":[-179.148909,-14.548699000000001]},
 "objects":{"states":{"type":"GeometryCollection",
                      "geometries":[ {"arcs":[[[0]],[[1]],[[2]],[[3]],[[4]],[[5]],[[6,7,8,9,10]]],
                                      "type":"MultiPolygon",
                                      "properties":{"STATEFP":"01",
                                                    "STUSPS":"AL",
                                                    "NAME":"Alabama"}},...

Update2: This is the topojson that worked. 

{"type":"Topology",
 "bbox":[-56.77775821661018,12.469025989284091,942.7924311762474,596.9298966319916],
 "transform":{"scale":[0.009995801851947097,0.005844667153098606],
              "translate":[-56.77775821661018,12.469025989284091]},
 "objects":{"states":{"type":"GeometryCollection","geometries":[{"type":"Polygon","arcs":[[0,1,2,3,4]],"id":"05089"},....

They are both topojson format and can be validated through mapshaper.org, but are slightly different. Would anyone be able to explain the differences.

Solution

  • Apparently the transform properties were just off. The lines were being generated 1/1000 of the length they should have been for the size of my svg. Because the line has a certain required thickness, it just looks like some blobs; the map was correctly generating.

    I guess to answer my own question, just play around with topojson properties until it resembles something you want. If the JavaScript is not crashing, assume the map has loaded correctly (but maybe not to your standards)

    General checklist:

    • Makes sure file is in right topojson format (This can be confirmed and even converted on mapshaper.org )
    • Make sure topojson file is correctly loading. This can be tested with some console.log's
    • Make sure the data features are pointing to the right objects for the topojson. For me this was x.objects.states
    • If the map is loading successfully, but looks wrong, consider abnormalities in 'transform'