Search code examples
jsonpathd3.jsprojectiongeo

d3.geo: Path vs. Projection


Currently, I am trying to learn how to use the d3.js API for geospatial mapping, but I am having trouble understanding how each part of the visualization works. What is the difference between a path and a projection?

My current understanding is that the d3.geo.path is the coordinates I would use to create the shape I desire, and the projection is more along the lines of a layer I project onto my svg object. However, I am confused as to what it means to have a default projection (which in the case of d3.geo.path is albersUSA.

Furthering on this question, do I need my own json files for d3.json in order to create the shapes I so desire? So in the case of the United States map, would I need to find all the coordinates online and store them in a json file before I can create a proper path object?

Any help is appreciated. Thanks!


Solution

  • A projection takes world coordinates (for example something like 20 degrees north, 5 degrees south) and converts them to map coordinates (for example 200 pixels to the right, 10 pixels down). A path takes these map coordinates and connects them such that you get a line (or series of lines). The projection is a conversion function, whereas the path takes care of the actual drawing. The coordinates are given by data that you pass to these functions.

    There are examples on the D3 website for drawing specific "shapes", i.e. countries or world maps. You can use the JSON in these examples for your own purposes. If you want to show specific points or shapes that you can't find data for elsewhere, you'll have to provide your own JSON.