d3 Topojson debugging transformations
NickName:cacti5 Ask DateTime:2017-05-30T22:01:20

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.

Copyright Notice:Content Author:「cacti5」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/44264409/d3-topojson-debugging-transformations

More about “d3 Topojson debugging transformations” related questions

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...

Show Detail

How to use topoJSON with D3

I'm aiming to use topoJSON in my current D3 project due to its benefits over geoJSON such as greatly reduced file size. However, I've been a bit confused over how to accomplish this. My current tho...

Show Detail

D3 and TopoJSON will not load in browser

I have been working with examples of D3 and TopoJSON from mbostocks github account The D3 and topoJSON work I have been doing was not appearing in the browwer or local nodejs http-server either. The

Show Detail

d3 topojson incorrect datatype in webpack/react

Hi I'm trying to render a map with D3 in a react/webpack project. I'm using react-d3-wrap so that I can put d3 code straight into the react project. Additionally, I'm pulling in the data via having

Show Detail

Draw a map with d3 and topojson

I try to draw a map thank to d3 and topojson. Then I draw each country one by one with this code : d3.json("datamaps-0.5.0/src/js/data/world.topo.json", function(error, map) { console.log(map)...

Show Detail

D3 TopoJSON rendering artifact

Before I go too far down the rabbit hole I noticed a rather bizarre rendering artifact in my TopoJSON that I am at a loss to explain. Rendered above is the official D3 distribution countries-110m.j...

Show Detail

Why is this TopoJSON rendered so small with D3? (Simple example)

I'm trying to do something really simple. I have a GeoJSON file of all the congressional districts of New York and I simply wanted be able to view it in my SVG element. I converted it to TopoJSON and

Show Detail

Find centroid of topoJSON path and use it to position a circle in D3

In my data I have values associated with countries. I have created scaled circles for each country and would now like to position them at the centre of each country using cx and cy. I have genera...

Show Detail

convert shp to topoJSON failing

GIS to Topojson: I'm using DIVA-gis.org for my data source. I've downloaded the data for Armenias administrative areas. This dowload produces a .shp file. I've tried to pass it directly to topoJSO...

Show Detail

Cannot install TopoJSON in Ubuntu Linux

When installing topojson (sudo npm install -g topojson) I get the following errors: /bin/sh: 1: node: not found gyp: Call to 'node -e "require('nan')"' returned exit status 127. while trying to load

Show Detail