liveBook · Manning

GeoJSON

As explained in D3.js in Action, Third Edition

GeoJSON is a JSON-based format for encoding geographic features, geometries, and associated properties.

GeoJSON is a JSON-based format for encoding geographic features and their properties. It groups geometries such as points, lines, polygons, and multipolygons into features that mapping tools can read directly. section 3.1.3 section 13.1.1

A GeoJSON object contains these essential parts:

  • type identifies either a Feature or a FeatureCollection, with the latter grouping multiple features. section 13.1.1
  • properties stores descriptive metadata, such as a country name. section 13.1.1
  • geometry stores the geometry type and coordinates; coordinates use longitude and latitude pairs. section 13.1.1
  • Closed shapes repeat their starting coordinate at the end of the coordinates list. section 13.1.1

Draw a GeoJSON map with D3

Pass the GeoJSON features to an SVG selection, define a projection, create a geo path generator, and use that generator for each path's d attribute. A world map can use geoEqualEarth(), while translate() and scale() position and size it inside the SVG. section 13.2 section 13.2.1

{
  "type":"Feature",
  "geometry":{
    "type":"Polygon",
    "coordinates":[
      [
        [25,56],
        [23,55],
        [22,54],
        [26,54],
        [25,56]
      ]
    ]
  },
  "properties":{"name":"Country Name"},
  "id":"Country Code"
}

A compact polygon demonstrates the required type, geometry, coordinates, properties, and identifier fields. section 13.1.1

How D3.js in Action, Third Edition covers it

How deep it goes
Defines the core object structure and map-rendering workflow, but defers detailed geometry construction.
Examples
Uses a polygon example, a world-country dataset, and a Nobel laureate birthplace map.
What it assumes
Assumes basic JSON, JavaScript, D3, and SVG familiarity while explaining geographic coordinates from fundamentals.
What you can do after
Builds D3 maps by projecting GeoJSON features and appending generated SVG paths.
How it connects
Connects geographic features with JSON, TopoJSON, map projections, D3, SVG paths, longitude, and latitude.

Related concepts

This explainer was generated by Manning's knowledge graph from the text of D3.js in Action, Third Edition. The section links point to the parts of the book it draws on.