D3 Map Projections
  Duration: 18:40
This Lesson is for subscribers

D3-map-projections_280x158
Unlock this lesson NOW!
  • Get expert advice on D3 Map Projections
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!

Takeaways:

  • d3.geo.path() is the D3 Geo Path Data Generator helper class for generating SVG Path instructions from GeoJSON data
  • D3 Geo Path does a mathematical transform between geographic coordinates and plane coordinates
  • The type of function that does a mathematical transformation between spherical coordinates to Cartesian coordinates is called a map projection
  • Map projections are commonly classified by how they preserve various properties on a map (be it preserve direction, shape, actual area, distance between two points or the shortest route between two points, or others)
  • The default d3.geo.path() map projection is the d3.geo.albersUSA map projection
  • There are 13 basic standard projections that D3 comes with out of the box: d3.geo.albers, d3.geo.albersUsa, d3.geo.azimuthalEqualArea, d3.geo.azimuthalEquidistant, d3.geo.conicConformal, d3.geo.conicEqualArea, d3.geo.conicEquidistant, d3.geo.equirectangular, d3.geo.gnomonic, d3.geo.mercator, d3.geo.orthographic, d3.geo.stereographic, and d3.geo.transverseMercator
  • In order to change the default setting of the albersUSA projection, you can specify the projection you want by passing it to the d3.geo.path instruction d3.geo.path().projection([projection]);
  • Once the projection has been passed or set, the d3.geo.path() D3 functionality will use it to generate the SVG Path instructions from GeoJSON data you give to it

This Transcript is for subscribers.

D3-map-projections_280x158
Unlock this D3 Tutorial NOW!
  • Get expert advice on D3 Map Projections
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!
<< Back To D3 Screencast and Written Tutorials Index