Circles, Great and Small

A few snippets of code for drawing points and lines on a map with Sphere / Plane intersections.

Circles of a Sphere are the curves that result when a sphere and plane intersect.

If the centerpoint of the sphere sits on the intersecting plane, the plane cuts the sphere into two hemispheres. These intersections are called Great Circles. All meridians are Great Circles, as they are the result of planes that pass through both poles of the planet, as well as the center of the Earth. The equator is also a Great Circle. Sections of Great Circles are always the shortest distance between two points on a sphere, and as a result, approximate aviation flight paths.

If an intersecting plane does not contain the centerpoint of the sphere, the intersection between a sphere and that plane is called a Small Circle. All latitudinal parallels except the equator are Small Circles.

Both Great and Small Circles are powerful visualization tools, serving to represent paths and points respectively.

The code below is written for a dataset parsed from the "Populated Places" dataset from the Natural Earth Data Project, using the steps detailed here. The particular dataset visualized, downloadable here, contains all of the cities that Natural Earth identifies as 'Megacities.' It looks like this:


Small Circles, which are defined by lat/long coordinates and an angular radius, can be constructed to represent the megacities.

//load in and parse the topoJSON file
d3.json("megacities.json", function(error, topology) {

//set up a scale, which will map the population values to a small angular radius.
  var sizeScale = d3.scale.linear().domain([1000,5000]).range([0,.5]);

//find any existing path entities of the class "point" in an svg entity called svg.
    //read the data and create a new path entity for each element in the array
    .data(topojson.object(topology, topology.objects.megacities).geometries)
    .datum(function(d) {
         //create a d3 geo circle with coordinates and size from the dataset
    //assign a class name
    .attr("class", "point")
    //draw the path
    .attr("d", path)

The Gingery Projection is used to produce this visualization. Gingery is an aesthetic-optimized projection, which unrolls the planet like the petals of a flower.

This same visualization looks like this in the Robinson Projection, a more general purpose projection that does a great job of not distorting region sizes.

Note that small circles are always distorted by projections, an effect especially visible in megacities near the edges and discontinuities of various projections.