1

So I started with a really small example that is working well. I used QGIS to draw a line and then converted it to topojson with mapshaper. Then I use D3.js to load and visualize it. This is the bigger but not working example:

jsfiddle.net/kwoxer/kpL1uyy2/2/

As you can see it not showing just one line, it is showing crazy lines as if the convert gone wrong. Already tested different browsers.

But as I said I already did a small line before with QGIS, converted it, and everything was fine. So is this an issue of the size of the line? Or by the converter?

Here a picture from QGIS how it should like in the browser: https://i.stack.imgur.com/LQRAJ.png

So what is a good way to create an (huge) own map and using it in D3.js?

Adam Pearce
  • 9,243
  • 2
  • 38
  • 35
kwoxer
  • 3,734
  • 4
  • 40
  • 70

1 Answers1

4

I looked at your Fiddle, and I think I see the problem. You are using d3's Equirectangular map projection, which expects lat-long coordinates with x values in the range [-180, 180] and y values in the range [-90, 90]. The actual x and y ranges of your dataset are [-991.4407052281722, 6787.6906928973385] and [-4789.571699454693, -155.32649155239142]. When d3 encounters coordinates outside the expected range, it wraps them -- this is why the lines look "crazy."

Based on your coordinate values, I'm guessing that you're using a projected coordinate system in your QGIS project. To display the data using d3, you can either export your shapes in lat-long coordinates (e.g. by selecting "WGS 84" as the CRS when saving a QGIS layer), or you can use d3 with projected data (see Drawing already projected geoJSON map in d3.js)

Community
  • 1
  • 1
Matthew Bloch
  • 56
  • 1
  • Well with the code in your links. It works great indeed. But just some words to the Save as. It is already WGS 84 what I saved. So the only way is using another projection or using the special code. Is that right? And thanks for the good info man! – kwoxer Jan 22 '15 at 22:49
  • I cannot get it to work properly. Could you create an example please? – kwoxer Jan 25 '15 at 11:57