2

I made a map with qgis. Unfortunately when I want to render the map with d3 map renderer, it shows weird structures. The map is in "1:116'622'714" scale. Could this be a problem?

The website should display this:

enter image description here

But when I use the Ginzburg VIII, it looks like this:

enter image description here

Same with the Winkel Tripel

enter image description here

3
  • Why is map scale too big? Is worldwide extent (or even more)?
    – aldo_tapia
    Commented Nov 7, 2017 at 10:32
  • I used a map as a layout to draw those rectangles. But I forgot the actual scale of the map, when I imported the picture. Commented Nov 7, 2017 at 11:22
  • That's the problem... The output isn't georeferenced
    – aldo_tapia
    Commented Nov 7, 2017 at 11:58

1 Answer 1

1

D3 geoProjections take unprojected data points on a three dimensional globe and project them on to a two dimensional plane. Your data is already 2 dimensional (I believe you or someone else had a question on stack overflow regarding this dataset where the projection was discussed, regardless, the pattern shown in your images is indiciative of a projected dataset being projected by d3).

To solve this, you are better off using a geoTransform if you want to apply some sort of transform on the coordinates. But if you only want to scale and translate your data, then a d3.geoIdentity is ideal:

 var projection = d3.geoIdentity()
  .reflectY(true)
  .fitSize([width,height],data);

The suggested code uses reflectY because generally projected data's origin is somewhere down in the bottom left corner of the projection, while svg coordinates have an origin in the top left corner. Y values increase as one moves up the y axis in the typical projected coordinates space, while Y values increase as one moves down the y axis in SVG coordinate space. Therefore, you features may be updside down if you don't reflect on the y.

Second, I've used fitSize to automatically set the translate and scale values of the projection. This method takes an array holding the width and height of a bounding box in svg coordinate space and it also takes a geojson object (not an array - if you have an array, put it in a geojson feature collection). If you want to specify margins, rather than have the feature abut the edge of the specified dimensions, you can use fitExtent.

Now all you have to do is set your geoPath()'s projection to this and you should be able to display the data.

Here's the API documentation on d3.geoIdentity and projection.fitSize.

Alternatively, you can convert/unproject your data so that is "projected" in wgs84, or more accurately, so that it contains longitude/latitude pairs. Then run it through a d3 geoProjection, but if you already have projected data, why unproject it so that you can re-project it when you can use it as is?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.