Drawing US map with D3

Hello. I am trying to complete the choropleth project. There is a guide about rendering map with d3 on d3indepth. But, the article is about using Geojson. After some researches, i have found how to use topojson with d3. I didn’t understood the informations i found but actually i have succed to render the map. There still are some things i don’t understand like why don’t i need to use a projection. And after the reduction of size, what is the difference between topojson and geojson? I hope someone can bring me some response.

Actually, my map look like that https://codepen.io/ydesamours/pen/porPrKG

GeoJSON contains all the information to draw a feature (like a county or state) as a list of longitude/latitude pairs. TopoJSON takes that information, optionally projecting and scaling it, an creates a topology in the arbitrary units of the projection. I believe it gets most of its data reduction by encoding the boundaries of features as lists of arcs which may be shared between features (like the common border of two states).

If you download and inspect the topoJSON file for this project, at the bottom you’ll see a bbox and transform properties from where the original geoJSON data was converted to topoJSON, projected onto a rectangle, and scaled and translated a bit. This particular data was projected onto an approximately 1000 by 600 rectangle with the Albers USA 50 state projection. When you draw the map, the topojson functions convert the data back to geoJSON features that you can draw iteratively.

The main differences are size and intended usage. TopoJSON can be projected in advance and is smaller, so you can use it in situations where data transfer speed or calculating the projection are issues. Use geoJSON when flexibility is more important as it can be projected in any way needed since it has the actual coordinates of the features. Additionally, many databases can store and operate on geoJSON data. For instance, MongoDB can index geoJSON and perform queries based on that geographic data.

1 Like

Thank you. This helps me a lot