D3 Geo Path
FREE     Duration: 19:03
 

Takeaways:

  • D3 includes a set of Path Data Generator helper classes for generating SVG Path instructions
  • GeoJSON is a geospatial data interchange format based on the JavaScript Object Notation
  • d3.geo.path() is the D3 Geo Path Data Generator helper class for generating SVG Path instructions from GeoJSON data
  • If you pass a GeoJSON Geometry or GeoJSON Feature Object, d3.geo.path() will generate the SVG Path Mini-Language instructions for you
  • You can then pass this SVG Path instructions to the "d" attribute of the SVG path in order to have the SVG Path display on the screen
  • The D3 Geo Path Data Generator, d3.geo.path(), converts the Spherical Coordinates (longitude and latitude) to Cartesian Coordinates (x and y in pixels)
  • The d3.geo.path() path generator functions allows you to select which Map Projection you want to use for the translation from Geo Coordinates to Cartesian Coordinates

Transcript:

D3 Geo Path

D3 Path Data Generators Revisited


D3 includes a set of Path Data Generator helper classes for generating SVG Path instructions.

// D3 Path Data Generators
d3.svg.line
d3.svg.line.radial
d3.svg.area
d3.svg.area.radial
d3.svg.arc
d3.svg.symbol
d3.svg.chord
d3.svg.diagonal
d3.svg.diagonal.radial
d3.geo.path

D3 helps with things as simple as a line and as complicated as a arcs, chords and diagonals.


For now we will only look at the d3.svg.line generator

D3 Path Data Generator
d3.svg.line                // ** HIGHLIGHT GREEN **
d3.svg.line.radial
d3.svg.area
d3.svg.area.radial
d3.svg.arc
d3.svg.symbol
d3.svg.chord
d3.svg.diagonal
d3.svg.diagonal.radial

This is simple enough for us to review quickly.

This function takes in the data and generates the necessary SVG Path commands.

Because it is a line function, it takes in a series of x and y coordinates.


In order to convert our data to the SVG Path Commands, we need to tell the line Path Data Generator how to access the x and y coordinates from our data.

d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("linear");

We do this by providing an accessor function to return the x, y coordinates from our data.

These accessor functions will take in the data array that is passed to D3 and extract the set of x,y coordinates.

It will then do a linear interpolation between each point.

The result is a string of SVG Path Mini-Language instructions.

Let's take a look at an example in the JavaScript Console


This web page has the D3 library imported from the d3js.org website.


We have opened the Chrome Developer Tools and are in the Console section.


We start by defining a sample data set of x and y coordinate points.

var lineData = [ { "x":  05, "y":  30 },{ "x":  75, "y":  30 },
                 { "x":  75, "y":  90 },{ "x": 150, "y":  90 },
                 { "x": 150, "y": 150 },{ "x": 190, "y": 150 }];

This is an array of JSON objects where each object has the keys "x" and "y".


Next, we define the D3 Line Path Data Generator Function and the two accessor functions.

var linePathGenerator = d3.svg.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .interpolate("linear");

This will take in the data set and using anonymous functions, get the X and Y coordinates.

It will then tell the D3 Path Data Generator Function to do a linear interpolation.


We can test to see what SVG Path Mini-Language Instructions are generated when we pass in the lineData data set to the linePathGenerator function.

linePathGenerator(lineData);

The result is a set of SVG Path Mini-Language Instructions.

Next, let's plot these instructions in an SVG Container.


We define the svgContainer first

var svgContainer = d3.select("body")
  .append("svg")
    .attr("width", "400")
    .attr("height", "400");


Then we append a path without the d attribute in order to set everything up.

var svgPath = svgContainer
  .append("path")
    .attr("stroke", "blue")
    .attr("stroke-width", "4px")
    .attr("fill", "none");

BROWSER - Click into the SVG element in the section.

You can see the SVG Path element in the elements section.

Next we define the d attribute.


Now that we have the path ready, let's define the d attribute using the linePathGenerator function and the lineData data set.

svgPath
    .attr("d", linePathGenerator(lineData));

BROWSER - Click on the path element

You can see the path that was drawn on the screen.

You can also see the SVG Path Mini-Language Instructions as part of the d attribute of the Path in the Chrome Developer Tools Elements Section.

In doing this, we were able to take the array of data objects and generate SVG Path instructions without having do the actual encoding of instructions in the Mini-Language.

This is very useful and very helpful.

Next, let's talk about D3 Geo path and how we can use it just like the D3 SVG Line Path Data Generator.



D3 Geo Path


This is the D3 Geo Path Data Generator.

d3.geo.path()

If we pass a GeoJSON Geometry or GeoJSON Feature Object, it will generate the SVG Path Mini-Language Instructions for us.

We can then pass these instructions to the "d" attribute of an SVG Path in order to have the SVG Path display on the screen.


What the D3 Geo Path Data Generator is helping to do is to convert the placement of objects in longitude and latitude to the placement of objects in x and y pixels in the SVG Viewport.

d3.geo.path()
// changes
// Spherical Coordinates (longitude & latitude)
// to
// Cartesian Coordinates (x and y in pixels)

It does this through the SVG Path Mini-Language.

So all of the GeoJSON Objects that we have covered previously that were made up of longitude and latitude points will be able to be converted into x and y pixel points in the SVG Viewport.

Exactly how this happens, will be discussed in a later video.

For now, know that this is done through Map Projections.

Which are transformations of latitudes and longitudes of locations to locations on a map.

When spherical coordinates are projected onto the x and y coordinate space, some parts of the sphere will be skewed.

There are different projections that are made to preserve various properties including shape, area, distance between two points, shortest routes, direction and others.

For now, let's focus on the d3.geo.path() function as a function that takes in a GeoJSON Object and generates SVG Path Mini-Language Instructions for us.


These are all of the different GeoJSON Feature and Geometry Objects that D3 Geo Path can take in to convert to SVG Path Instructions:

  • GeoJSON Point Geometry Object
  • GeoJSON MultiPoint Geometry Object
  • GeoJSON LineString Geometry Object
  • GeoJSON MultiLineString Geometry Object
  • GeoJSON Polygon Geometry Object
  • GeoJSON MultiPolygon Geometry Object
  • GeoJSON Feature Object
  • GeoJSON Feature Collection Object
  • GeoJSON Geometry Collection Object

Let's quickly go through each one in the JavaScript console using the GeoJSONLInt examples.


This web page has the D3 library imported from the d3js.org website.


We have opened the Chrome Developer Tools and are in the Console section.


We start by defining the D3 Geo Path Data Generator Function.

// GeoJSON Path Data Generator
var geoPath = d3.geo.path();

We will use this function for all of the examples.


Let's go to the GeoJSONLint service and get the GeoJSON Point Geometry Object

BROWSER - Go the GeoJSONLint tab and press the GeoJSON Point Geometry Object

BROWSER - Copy the Variable.


Now that we have the variable, let's define it in the JavaScrip Console.

// GeoJSON Point
var geoPoint = {
        "type": "Point",
        "coordinates": [
            -105.01621,
            39.57422
        ]
    };


Next, let's run this GeoJSON Point Geometry object through the GeoJSON Path Data Generator.

// GeoJSON Point Example Path Data
geoPath(geoPoint);

You can see that this generated SVG Path Mini-Language instructions.

For now, we don't graph it because we are more interested in checking to make sure that it generates the instructions.

Later in this video, we will place it on a map.


Next, let's go to the GeoJSONLint service and get the GeoJSON MultiPoint Geometry Object

BROWSER - Go the GeoJSONLint tab and press the GeoJSON MultiPoint Geometry Object

BROWSER - Copy the Variable.


Now that we have the variable, let's define it in the JavaScript Console.

// GeoJSON MultiPoint Geometry Object
var geoMultiPoint = {
        "type": "MultiPoint",
        "coordinates": [
            [
                -105.01621,
                39.57422
            ],
            [
                -80.6665134,
                35.0539943
            ]
        ]
    };


Then we run the GeoJSON MultiPoint Geometry object through the GeoJSON Path Data Generator

// GeoJSON MultiPoint Example Path Data
geoPath(geoMultiPoint);

You can see that this generated SVG Path Mini-Language instructions.

Later in this video, we will place it on a map.


Next, let's go to the GeoJSONLint service and get the GeoJSON LineString Geometry Object.

BROWSER - Go the GeoJSONLint tab and press the GeoJSON LineString Object

BROWSER - Copy the Variable.


Now that we have the variable, let's define it in the JavaScript Console.

// GeoJSON LineString Geometry Object
var geoLineString = {
        "type": "LineString",
        "coordinates": [
            [ -101.744384765625,   39.32155002466662  ],
            [ -101.5521240234375,  39.330048552942415 ],
            [ -101.40380859375,    39.330048552942415 ],
            [ -101.33239746093749, 39.364032338047984 ],
            [ -101.041259765625,   39.36827914916011  ],
            [ -100.975341796875,   39.30454987014581  ],
            [ -100.9149169921875,  39.24501680713314  ],
            [ -100.843505859375,   39.16414104768742  ],
            [ -100.8050537109375,  39.104488809440475 ],
            [ -100.491943359375,   39.10022600175347  ],
            [ -100.43701171875,    39.095962936305476 ],
            [ -100.338134765625,   39.095962936305476 ],
            [ -100.1953125,        39.027718840211605 ],
            [ -100.008544921875,   39.01064750994083  ],
            [ -99.86572265625,     39.00211029922512  ],
            [ -99.6844482421875,   38.97222194853654  ],
            [ -99.51416015625,     38.929502416386605 ],
            [ -99.38232421875,     38.92095542046727  ],
            [ -99.3218994140625,   38.89530825492018  ],
            [ -99.1131591796875,   38.86965182408357  ],
            [ -99.0802001953125,   38.85682013474361  ],
            [ -98.82202148437499,  38.85682013474361  ],
            [ -98.44848632812499,  38.84826438869913  ],
            [ -98.20678710937499,  38.84826438869913  ],
            [ -98.02001953125,     38.8782049970615   ],
            [ -97.635498046875,    38.87392853923629  ]
        ]
    };


Then we run the GeoJSON LineString Geometry object through the GeoJSON Path Data Generator

// GeoJSON LineString Example Path Data
geoPath(geoLineString);

You can see that this generated SVG Path Mini-Language instructions.

Later in this video, we will place it on a map.

Notice that as we are using more longitude and latitude coordinate points, that the SVG Path Mini-Language Instructions are getting more and more complicated.


Next, let's go to the GeoJSONLint service and get the GeoJSON MultiString Geometry Object

BROWSER - Go the GeoJSONLint tab and press the GeoJSON MultiString Geometry Object

BROWSER - Copy the Variable.


Now that we have the variable, let's define it in the JavaScript Console.

// GeoJSON MultiString Geometry Object
var geoMultiString = {
        "type": "MultiLineString",
        "coordinates": [
            [
                [ -105.0214433670044,  39.57805759162015 ],
                [ -105.02150774002075, 39.57780951131517 ],
                [ -105.02157211303711, 39.57749527498758 ],
                [ -105.02157211303711, 39.57716449836683 ],
                [ -105.02157211303711, 39.57703218727656 ],
                [ -105.02152919769287, 39.57678410330158 ]
            ],
            [
                [ -105.01989841461182, 39.574997872470774 ],
                [ -105.01959800720215, 39.57489863607502  ],
                [ -105.01906156539916, 39.57478286010041  ]
            ],
            [
                [ -105.01717329025269, 39.5744024519653   ],
                [ -105.01698017120361, 39.574385912433804 ],
                [ -105.0166368484497,  39.574385912433804 ],
                [ -105.01650810241699, 39.5744024519653   ],
                [ -105.0159502029419,  39.574270135602866 ]
            ],
            [
                [ -105.0142765045166, 39.57397242286402  ],
                [ -105.01412630081175, 39.57403858136094 ],
                [ -105.0138258934021, 39.57417089816531  ],
                [ -105.01331090927124, 39.57445207053608 ]
            ]
        ]
    };


Then we run the GeoJSON MultiString Geometry object through the GeoJSON Path Data Generator

// GeoJSON MultiString Example Path Data
geoPath(geoMultiString);

You can see that this generated SVG Path Mini-Language instructions.

Later in this video, we will place it on a map.


Next, let's go to the GeoJSONLint service and get the GeoJSON Polygon Geometry Object.

BROWSER - Go the GeoJSONLint tab and press the GeoJSON Polygon Geometry Object

BROWSER - Copy the Variable.


Now that we have the variable, let's define it in the JavaScript Console.

// GeoJSON Polygon Geometry Object
var geoPolygon = {
        "type": "Polygon",
        "coordinates": [
            [
                [ -84.32281494140625, 34.9895035675793   ],
                [ -84.29122924804688, 35.21981940793435  ],
                [ -84.24041748046875, 35.25459097465022  ],
                [ -84.22531127929688, 35.266925688950074 ],
                [ -84.20745849609375, 35.26580442886754  ],
                [ -84.19921875,       35.24674063355999  ],
                [ -84.16213989257812, 35.24113278166642  ],
                [ -84.12368774414062, 35.24898366572645  ],
                [ -84.09072875976562, 35.24898366572645  ],
                [ -84.08798217773438, 35.264683153268116 ],
                [ -84.04266357421875, 35.27701633139884  ],
                [ -84.03030395507812, 35.291589484566124 ],
                [ -84.0234375,        35.306160014550784 ],
                [ -84.03305053710936, 35.32745068492882  ],
                [ -84.03579711914062, 35.34313496028189  ],
                [ -84.03579711914062, 35.348735749472546 ],
                [ -84.01657104492188, 35.35545618392078  ],
                [ -84.01107788085938, 35.37337460834958  ],
                [ -84.00970458984374, 35.39128905521763  ],
                [ -84.01931762695312, 35.41479572901859  ],
                [ -84.00283813476562, 35.429344044107154 ],
                [ -83.93692016601562, 35.47409160773029  ],
                [ -83.91220092773438, 35.47632833265728  ],
                [ -83.88885498046875, 35.504282143299655 ],
                [ -83.88473510742186, 35.516578738902936 ],
                [ -83.8751220703125,  35.52104976129943  ],
                [ -83.85314941406249, 35.52104976129943  ],
                [ -83.82843017578125, 35.52104976129943  ],
                [ -83.8092041015625,  35.53446133418443  ],
                [ -83.80233764648438, 35.54116627999813  ],
                [ -83.76800537109374, 35.56239491058853  ],
                [ -83.7432861328125,  35.56239491058853  ],
                [ -83.71994018554688, 35.56239491058853  ],
                [ -83.67050170898438, 35.569097520776054 ],
                [ -83.6334228515625,  35.570214567965984 ],
                [ -83.61007690429688, 35.576916524038616 ],
                [ -83.59634399414061, 35.574682600980914 ],
                [ -83.5894775390625,  35.55904339525896  ],
                [ -83.55239868164062, 35.56574628576276  ],
                [ -83.49746704101562, 35.563512051219696 ],
                [ -83.47000122070312, 35.586968406786475 ],
                [ -83.4466552734375,  35.60818490437746  ],
                [ -83.37936401367188, 35.63609277863135  ],
                [ -83.35739135742188, 35.65618041632016  ],
                [ -83.32305908203124, 35.66622234103479  ],
                [ -83.3148193359375,  35.65394870599763  ],
                [ -83.29971313476561, 35.660643649881614 ],
                [ -83.28598022460938, 35.67180064238771  ],
                [ -83.26126098632811, 35.6907639509368   ],
                [ -83.25714111328125, 35.69968630125201  ],
                [ -83.25576782226562, 35.715298012125295 ],
                [ -83.23516845703125, 35.72310272092263  ],
                [ -83.19808959960936, 35.72756221127198  ],
                [ -83.16238403320312, 35.753199435570316 ],
                [ -83.15826416015625, 35.76322914549896  ],
                [ -83.10333251953125, 35.76991491635478  ],
                [ -83.08685302734375, 35.7843988251953   ],
                [ -83.0511474609375,  35.787740890986576 ],
                [ -83.01681518554688, 35.78328477203738  ],
                [ -83.001708984375,   35.77882840327371  ],
                [ -82.96737670898438, 35.793310688351724 ],
                [ -82.94540405273438, 35.820040281161    ],
                [ -82.9193115234375,  35.85121343450061  ],
                [ -82.9083251953125,  35.86902116501695  ],
                [ -82.90557861328125, 35.87792352995116  ],
                [ -82.91244506835938, 35.92353244718235  ],
                [ -82.88360595703125, 35.94688293218141  ],
                [ -82.85614013671875, 35.951329861522666 ],
                [ -82.8424072265625,  35.94243575255426  ],
                [ -82.825927734375,   35.92464453144099  ],
                [ -82.80670166015625, 35.927980690382704 ],
                [ -82.80532836914062, 35.94243575255426  ],
                [ -82.77923583984375, 35.97356075349624  ],
                [ -82.78060913085938, 35.99245209055831  ],
                [ -82.76138305664062, 36.00356252895066  ],
                [ -82.69546508789062, 36.04465753921525  ],
                [ -82.64465332031249, 36.060201412392914 ],
                [ -82.61306762695312, 36.060201412392914 ],
                [ -82.60620117187499, 36.033552893400376 ],
                [ -82.60620117187499, 35.991340960635405 ],
                [ -82.60620117187499, 35.97911749857497  ],
                [ -82.5787353515625,  35.96133453736691  ],
                [ -82.5677490234375,  35.951329861522666 ],
                [ -82.53067016601562, 35.97244935753683  ],
                [ -82.46475219726562, 36.006895355244666 ],
                [ -82.41668701171875, 36.070192281208456 ],
                [ -82.37960815429686, 36.10126686921446  ],
                [ -82.35488891601562, 36.117908916563685 ],
                [ -82.34115600585936, 36.113471382052175 ],
                [ -82.29583740234375, 36.13343831245866  ],
                [ -82.26287841796874, 36.13565654678543  ],
                [ -82.23403930664062, 36.13565654678543  ],
                [ -82.2216796875,     36.154509006695    ],
                [ -82.20382690429688, 36.15561783381855  ],
                [ -82.19009399414062, 36.144528857027744 ],
                [ -82.15438842773438, 36.15007354140755  ],
                [ -82.14065551757812, 36.134547437460064 ],
                [ -82.1337890625,     36.116799556445024 ],
                [ -82.12142944335938, 36.10570509327921  ],
                [ -82.08984375,       36.10792411128649  ],
                [ -82.05276489257811, 36.12678323326429  ],
                [ -82.03628540039062, 36.12900165569652  ],
                [ -81.91268920898438, 36.29409768373033  ],
                [ -81.89071655273438, 36.30959215409138  ],
                [ -81.86325073242188, 36.33504067209607  ],
                [ -81.83029174804688, 36.34499652561904  ],
                [ -81.80145263671875, 36.35605709240176  ],
                [ -81.77947998046874, 36.34610265300638  ],
                [ -81.76162719726562, 36.33835943134047  ],
                [ -81.73690795898438, 36.33835943134047  ],
                [ -81.71905517578125, 36.33835943134047  ],
                [ -81.70669555664062, 36.33504067209607  ],
                [ -81.70669555664062, 36.342784223707234 ],
                [ -81.72317504882812, 36.357163062654365 ],
                [ -81.73278808593749, 36.379279167407965 ],
                [ -81.73690795898438, 36.40028364332352  ],
                [ -81.73690795898438, 36.41354670392876  ],
                [ -81.72454833984374, 36.423492513472326 ],
                [ -81.71768188476562, 36.445589751779174 ],
                [ -81.69845581054688, 36.47541104282962  ],
                [ -81.69845581054688, 36.51073994146672  ],
                [ -81.705322265625,   36.53060536411363  ],
                [ -81.69158935546875, 36.55929085774001  ],
                [ -81.68060302734375, 36.56480607840351  ],
                [ -81.68197631835938, 36.58686302344181  ],
                [ -81.04202270507812, 36.56370306576917  ],
                [ -80.74264526367186, 36.561496993252575 ],
                [ -79.89120483398438, 36.54053616262899  ],
                [ -78.68408203124999, 36.53943280355122  ],
                [ -77.88345336914062, 36.54053616262899  ],
                [ -76.91665649414062, 36.54163950596125  ],
                [ -76.91665649414062, 36.55046568575947  ],
                [ -76.31103515625,    36.551568887374    ],
                [ -75.79605102539062, 36.54936246839778  ],
                [ -75.6298828125,     36.07574221562703  ],
                [ -75.4925537109375,  35.82226734114509  ],
                [ -75.3936767578125,  35.639441068973916 ],
                [ -75.41015624999999, 35.43829554739668  ],
                [ -75.43212890625,    35.263561862152095 ],
                [ -75.487060546875,   35.18727767598896  ],
                [ -75.5914306640625,  35.17380831799959  ],
                [ -75.9210205078125,  35.04798673426734  ],
                [ -76.17919921875,    34.867904962568744 ],
                [ -76.41540527343749, 34.62868797377061  ],
                [ -76.4593505859375,  34.57442951865274  ],
                [ -76.53076171875,    34.53371242139567  ],
                [ -76.5911865234375,  34.551811369170494 ],
                [ -76.651611328125,   34.615126683462194 ],
                [ -76.761474609375,   34.63320791137959  ],
                [ -77.069091796875,   34.59704151614417  ],
                [ -77.376708984375,   34.45674800347809  ],
                [ -77.5909423828125,  34.3207552752374   ],
                [ -77.8326416015625,  33.97980872872457  ],
                [ -77.9150390625,     33.80197351806589  ],
                [ -77.9754638671875,  33.73804486328907  ],
                [ -78.11279296875,    33.8521697014074   ],
                [ -78.2830810546875,  33.8521697014074   ],
                [ -78.4808349609375,  33.815666308702774 ],
                [ -79.6728515625,     34.8047829195724   ],
                [ -80.782470703125,   34.836349990763864 ],
                [ -80.782470703125,   34.91746688928252  ],
                [ -80.9307861328125,  35.092945313732635 ],
                [ -81.0516357421875,  35.02999636902566  ],
                [ -81.0516357421875,  35.05248370662468  ],
                [ -81.0516357421875,  35.137879119634185 ],
                [ -82.3150634765625,  35.19625600786368  ],
                [ -82.3590087890625,  35.19625600786368  ],
                [ -82.40295410156249, 35.22318504970181  ],
                [ -82.4688720703125,  35.16931803601131  ],
                [ -82.6885986328125,  35.1154153142536   ],
                [ -82.781982421875,   35.06147690849717  ],
                [ -83.1060791015625,  35.003003395276714 ],
                [ -83.616943359375,   34.99850370014629  ],
                [ -84.05639648437499, 34.985003130171066 ],
                [ -84.22119140625,    34.985003130171066 ],
                [ -84.32281494140625, 34.9895035675793   ]
            ],
            [
                [ -75.69030761718749, 35.74205383068037  ],
                [ -75.5914306640625,  35.74205383068037  ],
                [ -75.5419921875,     35.585851593232356 ],
                [ -75.56396484375,    35.32633026307483  ],
                [ -75.69030761718749, 35.285984736065735 ],
                [ -75.970458984375,   35.16482750605027  ],
                [ -76.2066650390625,  34.994003757575776 ],
                [ -76.300048828125,   35.02999636902566  ],
                [ -76.409912109375,   35.07946034047981  ],
                [ -76.5252685546875,  35.10642805736423  ],
                [ -76.4208984375,     35.25907654252574  ],
                [ -76.3385009765625,  35.294952147406576 ],
                [ -76.0858154296875,  35.29943548054543  ],
                [ -75.948486328125,   35.44277092585766  ],
                [ -75.8660888671875,  35.53669637839501  ],
                [ -75.772705078125,   35.567980458012094 ],
                [ -75.706787109375,   35.634976650677295 ],
                [ -75.706787109375,   35.74205383068037  ],
                [ -75.69030761718749, 35.74205383068037  ]
            ]
        ]
    };


Then we run the GeoJSON Polygon Geometry Object through the GeoJSON Path Data Generator

// GeoJSON Polygon Example Path Data
geoPath(geoPolygon);

You can see that this generated SVG Path Mini-Language instructions.

Later in this video, we will place it on a map.


Next, let's go to the GeoJSONLint service and get the GeoJSON MultiPolygon Geometry Object

BROWSER - Go the GeoJSONLint tab and press the GeoJSON MultiPolygon Geometry Object

BROWSER - Copy the Variable.


Now that we have the variable, let's define it in the JavaScript Console.

// GeoJSON MultiPolygon Geometry Object
var geoMultiPolygon = {
        "type": "MultiPolygon",
        "coordinates": [
            [
                [
                    [ -84.32281494140625, 34.9895035675793   ],
                    [ -84.29122924804688, 35.21981940793435  ],
                    [ -84.24041748046875, 35.25459097465022  ],
                    [ -84.22531127929688, 35.266925688950074 ],
                    [ -84.20745849609375, 35.26580442886754  ],
                    [ -84.19921875,       35.24674063355999  ],
                    [ -84.16213989257812, 35.24113278166642  ],
                    [ -84.12368774414062, 35.24898366572645  ],
                    [ -84.09072875976562, 35.24898366572645  ],
                    [ -84.08798217773438, 35.264683153268116 ],
                    [ -84.04266357421875, 35.27701633139884  ],
                    [ -84.03030395507812, 35.291589484566124 ],
                    [ -84.0234375,        35.306160014550784 ],
                    [ -84.03305053710936, 35.32745068492882  ],
                    [ -84.03579711914062, 35.34313496028189  ],
                    [ -84.03579711914062, 35.348735749472546 ],
                    [ -84.01657104492188, 35.35545618392078  ],
                    [ -84.01107788085938, 35.37337460834958  ],
                    [ -84.00970458984374, 35.39128905521763  ],
                    [ -84.01931762695312, 35.41479572901859  ],
                    [ -84.00283813476562, 35.429344044107154 ],
                    [ -83.93692016601562, 35.47409160773029  ],
                    [ -83.91220092773438, 35.47632833265728  ],
                    [ -83.88885498046875, 35.504282143299655 ],
                    [ -83.88473510742186, 35.516578738902936 ],
                    [ -83.8751220703125,  35.52104976129943  ],
                    [ -83.85314941406249, 35.52104976129943  ],
                    [ -83.82843017578125, 35.52104976129943  ],
                    [ -83.8092041015625,  35.53446133418443  ],
                    [ -83.80233764648438, 35.54116627999813  ],
                    [ -83.76800537109374, 35.56239491058853  ],
                    [ -83.7432861328125,  35.56239491058853  ],
                    [ -83.71994018554688, 35.56239491058853  ],
                    [ -83.67050170898438, 35.569097520776054 ],
                    [ -83.6334228515625,  35.570214567965984 ],
                    [ -83.61007690429688, 35.576916524038616 ],
                    [ -83.59634399414061, 35.574682600980914 ],
                    [ -83.5894775390625,  35.55904339525896  ],
                    [ -83.55239868164062, 35.56574628576276  ],
                    [ -83.49746704101562, 35.563512051219696 ],
                    [ -83.47000122070312, 35.586968406786475 ],
                    [ -83.4466552734375,  35.60818490437746  ],
                    [ -83.37936401367188, 35.63609277863135  ],
                    [ -83.35739135742188, 35.65618041632016  ],
                    [ -83.32305908203124, 35.66622234103479  ],
                    [ -83.3148193359375,  35.65394870599763  ],
                    [ -83.29971313476561, 35.660643649881614 ],
                    [ -83.28598022460938, 35.67180064238771  ],
                    [ -83.26126098632811, 35.6907639509368   ],
                    [ -83.25714111328125, 35.69968630125201  ],
                    [ -83.25576782226562, 35.715298012125295 ],
                    [ -83.23516845703125, 35.72310272092263  ],
                    [ -83.19808959960936, 35.72756221127198  ],
                    [ -83.16238403320312, 35.753199435570316 ],
                    [ -83.15826416015625, 35.76322914549896  ],
                    [ -83.10333251953125, 35.76991491635478  ],
                    [ -83.08685302734375, 35.7843988251953   ],
                    [ -83.0511474609375,  35.787740890986576 ],
                    [ -83.01681518554688, 35.78328477203738  ],
                    [ -83.001708984375,   35.77882840327371  ],
                    [ -82.96737670898438, 35.793310688351724 ],
                    [ -82.94540405273438, 35.820040281161    ],
                    [ -82.9193115234375,  35.85121343450061  ],
                    [ -82.9083251953125,  35.86902116501695  ],
                    [ -82.90557861328125, 35.87792352995116  ],
                    [ -82.91244506835938, 35.92353244718235  ],
                    [ -82.88360595703125, 35.94688293218141  ],
                    [ -82.85614013671875, 35.951329861522666 ],
                    [ -82.8424072265625,  35.94243575255426  ],
                    [ -82.825927734375,   35.92464453144099  ],
                    [ -82.80670166015625, 35.927980690382704 ],
                    [ -82.80532836914062, 35.94243575255426  ],
                    [ -82.77923583984375, 35.97356075349624  ],
                    [ -82.78060913085938, 35.99245209055831  ],
                    [ -82.76138305664062, 36.00356252895066  ],
                    [ -82.69546508789062, 36.04465753921525  ],
                    [ -82.64465332031249, 36.060201412392914 ],
                    [ -82.61306762695312, 36.060201412392914 ],
                    [ -82.60620117187499, 36.033552893400376 ],
                    [ -82.60620117187499, 35.991340960635405 ],
                    [ -82.60620117187499, 35.97911749857497  ],
                    [ -82.5787353515625,  35.96133453736691  ],
                    [ -82.5677490234375,  35.951329861522666 ],
                    [ -82.53067016601562, 35.97244935753683  ],
                    [ -82.46475219726562, 36.006895355244666 ],
                    [ -82.41668701171875, 36.070192281208456 ],
                    [ -82.37960815429686, 36.10126686921446  ],
                    [ -82.35488891601562, 36.117908916563685 ],
                    [ -82.34115600585936, 36.113471382052175 ],
                    [ -82.29583740234375, 36.13343831245866  ],
                    [ -82.26287841796874, 36.13565654678543  ],
                    [ -82.23403930664062, 36.13565654678543  ],
                    [ -82.2216796875,     36.154509006695    ],
                    [ -82.20382690429688, 36.15561783381855  ],
                    [ -82.19009399414062, 36.144528857027744 ],
                    [ -82.15438842773438, 36.15007354140755  ],
                    [ -82.14065551757812, 36.134547437460064 ],
                    [ -82.1337890625,     36.116799556445024 ],
                    [ -82.12142944335938, 36.10570509327921  ],
                    [ -82.08984375,       36.10792411128649  ],
                    [ -82.05276489257811, 36.12678323326429  ],
                    [ -82.03628540039062, 36.12900165569652  ],
                    [ -81.91268920898438, 36.29409768373033  ],
                    [ -81.89071655273438, 36.30959215409138  ],
                    [ -81.86325073242188, 36.33504067209607  ],
                    [ -81.83029174804688, 36.34499652561904  ],
                    [ -81.80145263671875, 36.35605709240176  ],
                    [ -81.77947998046874, 36.34610265300638  ],
                    [ -81.76162719726562, 36.33835943134047  ],
                    [ -81.73690795898438, 36.33835943134047  ],
                    [ -81.71905517578125, 36.33835943134047  ],
                    [ -81.70669555664062, 36.33504067209607  ],
                    [ -81.70669555664062, 36.342784223707234 ],
                    [ -81.72317504882812, 36.357163062654365 ],
                    [ -81.73278808593749, 36.379279167407965 ],
                    [ -81.73690795898438, 36.40028364332352  ],
                    [ -81.73690795898438, 36.41354670392876  ],
                    [ -81.72454833984374, 36.423492513472326 ],
                    [ -81.71768188476562, 36.445589751779174 ],
                    [ -81.69845581054688, 36.47541104282962  ],
                    [ -81.69845581054688, 36.51073994146672  ],
                    [ -81.705322265625,   36.53060536411363  ],
                    [ -81.69158935546875, 36.55929085774001  ],
                    [ -81.68060302734375, 36.56480607840351  ],
                    [ -81.68197631835938, 36.58686302344181  ],
                    [ -81.04202270507812, 36.56370306576917  ],
                    [ -80.74264526367186, 36.561496993252575 ],
                    [ -79.89120483398438, 36.54053616262899  ],
                    [ -78.68408203124999, 36.53943280355122  ],
                    [ -77.88345336914062, 36.54053616262899  ],
                    [ -76.91665649414062, 36.54163950596125  ],
                    [ -76.91665649414062, 36.55046568575947  ],
                    [ -76.31103515625,    36.551568887374    ],
                    [ -75.79605102539062, 36.54936246839778  ],
                    [ -75.6298828125,     36.07574221562703  ],
                    [ -75.4925537109375,  35.82226734114509  ],
                    [ -75.3936767578125,  35.639441068973916 ],
                    [ -75.41015624999999, 35.43829554739668  ],
                    [ -75.43212890625,    35.263561862152095 ],
                    [ -75.487060546875,   35.18727767598896  ],
                    [ -75.5914306640625,  35.17380831799959  ],
                    [ -75.9210205078125,  35.04798673426734  ],
                    [ -76.17919921875,    34.867904962568744 ],
                    [ -76.41540527343749, 34.62868797377061  ],
                    [ -76.4593505859375,  34.57442951865274  ],
                    [ -76.53076171875,    34.53371242139567  ],
                    [ -76.5911865234375,  34.551811369170494 ],
                    [ -76.651611328125,   34.615126683462194 ],
                    [ -76.761474609375,   34.63320791137959  ],
                    [ -77.069091796875,   34.59704151614417  ],
                    [ -77.376708984375,   34.45674800347809  ],
                    [ -77.5909423828125,  34.3207552752374   ],
                    [ -77.8326416015625,  33.97980872872457  ],
                    [ -77.9150390625,     33.80197351806589  ],
                    [ -77.9754638671875,  33.73804486328907  ],
                    [ -78.11279296875,    33.8521697014074   ],
                    [ -78.2830810546875,  33.8521697014074   ],
                    [ -78.4808349609375,  33.815666308702774 ],
                    [ -79.6728515625,     34.8047829195724   ],
                    [ -80.782470703125,   34.836349990763864 ],
                    [ -80.782470703125,   34.91746688928252  ],
                    [ -80.9307861328125,  35.092945313732635 ],
                    [ -81.0516357421875,  35.02999636902566  ],
                    [ -81.0516357421875,  35.05248370662468  ],
                    [ -81.0516357421875,  35.137879119634185 ],
                    [ -82.3150634765625,  35.19625600786368  ],
                    [ -82.3590087890625,  35.19625600786368  ],
                    [ -82.40295410156249, 35.22318504970181  ],
                    [ -82.4688720703125,  35.16931803601131  ],
                    [ -82.6885986328125,  35.1154153142536   ],
                    [ -82.781982421875,   35.06147690849717  ],
                    [ -83.1060791015625,  35.003003395276714 ],
                    [ -83.616943359375,   34.99850370014629  ],
                    [ -84.05639648437499, 34.985003130171066 ],
                    [ -84.22119140625,    34.985003130171066 ],
                    [ -84.32281494140625, 34.9895035675793   ]
                ],
                [
                    [ -75.69030761718749, 35.74205383068037  ],
                    [ -75.5914306640625,  35.74205383068037  ],
                    [ -75.5419921875,     35.585851593232356 ],
                    [ -75.56396484375,    35.32633026307483  ],
                    [ -75.69030761718749, 35.285984736065735 ],
                    [ -75.970458984375,   35.16482750605027  ],
                    [ -76.2066650390625,  34.994003757575776 ],
                    [ -76.300048828125,   35.02999636902566  ],
                    [ -76.409912109375,   35.07946034047981  ],
                    [ -76.5252685546875,  35.10642805736423  ],
                    [ -76.4208984375,     35.25907654252574  ],
                    [ -76.3385009765625,  35.294952147406576 ],
                    [ -76.0858154296875,  35.29943548054543  ],
                    [ -75.948486328125,   35.44277092585766  ],
                    [ -75.8660888671875,  35.53669637839501  ],
                    [ -75.772705078125,   35.567980458012094 ],
                    [ -75.706787109375,   35.634976650677295 ],
                    [ -75.706787109375,   35.74205383068037  ],
                    [ -75.69030761718749, 35.74205383068037  ]
                ]
            ],
            [
                [
                    [ -109.0283203125,  36.98500309285596 ],
                    [ -109.0283203125,  40.97989806962013 ],
                    [ -102.06298828125, 40.97989806962013 ],
                    [ -102.06298828125, 37.00255267215955 ],
                    [ -109.0283203125,  36.98500309285596 ]
                ]
            ]
        ]
    };


Then we run the GeoJSON MultiPolygon Geometry Object through the GeoJSON Path Data Generator.

// GeoJSON MultiPolygon Example Path Data
geoPath(geoMultiPolygon);

You can see that this generated SVG Path Mini-language instructions.

Later in this video, we will place it on a map.


Next, let's go to the GeoJSONLint service and get the GeoJSON Feature Object

BROWSER - Go the GeoJSONLint tab and press the GeoJSON Feature Object

BROWSER - Copy the Variable.


Now that we have the variable, let's define it in the JavaSCript Console.

// GeoJSON Feature Object
var geoFeature = {
        "type": "Feature",
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [ -80.72487831115721, 35.26545403190955  ],
                    [ -80.72135925292969, 35.26727607954368  ],
                    [ -80.71517944335938, 35.26769654625573  ],
                    [ -80.7125186920166,  35.27035945142482  ],
                    [ -80.70857048034668, 35.268257165144064 ],
                    [ -80.70479393005371, 35.268397319259996 ],
                    [ -80.70324897766113, 35.26503355355979  ],
                    [ -80.71088790893555, 35.2553619492954   ],
                    [ -80.71681022644043, 35.2553619492954   ],
                    [ -80.7150936126709,  35.26054831539319  ],
                    [ -80.71869850158691, 35.26026797976481  ],
                    [ -80.72032928466797, 35.26061839914875  ],
                    [ -80.72264671325684, 35.26033806376283  ],
                    [ -80.72487831115721, 35.26545403190955  ]
                ]
            ]
        },
        "properties": {
            "name": "Plaza Road Park"
        }
    };


Then we run the GeoJSON Feature Object through the GeoJSON Path Data Generator.

// GeoJSON Feature Example Path Data
geoPath(geoFeature);

You can see that this generated SVG Path Mini-Language instructions.

Even though it wasn't a geometry, it still worked correctly.

Later in this video, we will place it on a map.


Next, let's go to the GeoJSONLint service and get the GeoJSON Feature Collection Object

BROWSER - Go the GeoJSONLint tab and press the GeoJSON Feature Collection Geometry Object

BROWSER - Copy the Variable.


Now that we have the variable, let's define it in the JavaScript Console.

// GeoJSON MultiFeatureCollection Object
var geoFeatureCollection = {
        "type": "FeatureCollection",
        "features": [
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        -80.87088507656375,
                        35.21515162500578
                    ]
                },
                "properties": {
                    "name": "ABBOTT NEIGHBORHOOD PARK",
                    "address": "1300  SPRUCE ST"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        -80.83775386582222,
                        35.24980190252168
                    ]
                },
                "properties": {
                    "name": "DOUBLE OAKS CENTER",
                    "address": "1326 WOODWARD AV"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        -80.83827000459532,
                        35.25674709224663
                    ]
                },
                "properties": {
                    "name": "DOUBLE OAKS NEIGHBORHOOD PARK",
                    "address": "2605  DOUBLE OAKS RD"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        -80.83697759172735,
                        35.25751734669229
                    ]
                },
                "properties": {
                    "name": "DOUBLE OAKS POOL",
                    "address": "1200 NEWLAND RD"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        -80.81647652154736,
                        35.40148708491418
                    ]
                },
                "properties": {
                    "name": "DAVID B. WAYMER FLYING REGIONAL PARK",
                    "address": "15401 HOLBROOKS RD"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Point",
                    "coordinates": [
                        -80.83556459443902,
                        35.39917224760999
                    ]
                },
                "properties": {
                    "name": "DAVID B. WAYMER COMMUNITY PARK",
                    "address": "302 HOLBROOKS RD"
                }
            },
            {
                "type": "Feature",
                "geometry": {
                    "type": "Polygon",
                    "coordinates": [
                        [
                            [ -80.72487831115721, 35.26545403190955  ],
                            [ -80.72135925292969, 35.26727607954368  ],
                            [ -80.71517944335938, 35.26769654625573  ],
                            [ -80.7125186920166,  35.27035945142482  ],
                            [ -80.70857048034668, 35.268257165144064 ],
                            [ -80.70479393005371, 35.268397319259996 ],
                            [ -80.70324897766113, 35.26503355355979  ],
                            [ -80.71088790893555, 35.2553619492954   ],
                            [ -80.71681022644043, 35.2553619492954   ],
                            [ -80.7150936126709,  35.26054831539319  ],
                            [ -80.71869850158691, 35.26026797976481  ],
                            [ -80.72032928466797, 35.26061839914875  ],
                            [ -80.72264671325684, 35.26033806376283  ],
                            [ -80.72487831115721, 35.26545403190955  ]
                        ]
                    ]
                },
                "properties": {
                    "name": "Plaza Road Park"
                }
            }
        ]
    };


Then we run the GeoJSON Feature Collection Object through the GeoJSON Path Data Generator.

// GeoJSON Feature Collection Example Path Data
geoPath(geoFeatureCollection);

You can see that this generated SVG Path Mini-Language instructions as well.

If you remember from the last video, this was several points in addition to a polygon.

Later in this video, we will place it on a map.


Lastly, let's go to the GeoJSONLint service and get the GeoJSON Geometry Collection Object

BROWSER - Go the GeoJSONLint tab and press the GeoJSON Geometry Collection Object

BROWSER - Copy the Variable.


Now that we have the variable, let's define it in the JavaSCript Console.

// GeoJSON Geometry Collection Object
var geoGeometryCollection = {
        "type": "GeometryCollection",
        "geometries": [
            {
                "type": "Point",
                "coordinates": [ -80.66080570220947, 35.04939206472683 ]
            },
            {
                "type": "Polygon",
                "coordinates": [
                    [
                        [ -80.66458225250244, 35.04496519190309  ], 
                        [ -80.66344499588013, 35.04603679820616  ],
                        [ -80.66258668899536, 35.045580049697556 ],
                        [ -80.66387414932251, 35.044280059194946 ],
                        [ -80.66458225250244, 35.04496519190309  ]
                    ]
                ]
            },
            {
                "type": "LineString",
                "coordinates": [
                    [ -80.66237211227417, 35.05950973022538  ],
                    [ -80.66269397735596, 35.0592638296087   ],
                    [ -80.66284418106079, 35.05893010615862  ],
                    [ -80.66308021545409, 35.05833291342246  ],
                    [ -80.66359519958496, 35.057753281001425 ],
                    [ -80.66387414932251, 35.05740198662245  ],
                    [ -80.66441059112549, 35.05703312589789  ],
                    [ -80.66486120223999, 35.056787217822475 ],
                    [ -80.66541910171509, 35.05650617911516  ],
                    [ -80.66563367843628, 35.05631296444281  ],
                    [ -80.66601991653441, 35.055891403570705 ],
                    [ -80.66619157791138, 35.05545227534804  ],
                    [ -80.66619157791138, 35.05517123204622  ],
                    [ -80.66625595092773, 35.05489018777713  ],
                    [ -80.6662130355835,  35.054222703761525 ],
                    [ -80.6662130355835,  35.05392409072499  ],
                    [ -80.66595554351807, 35.05290528508858  ],
                    [ -80.66569805145262, 35.052044560077285 ],
                    [ -80.66550493240356, 35.0514824490509   ],
                    [ -80.665762424469,   35.05048117920187  ],
                    [ -80.66617012023926, 35.04972582715769  ],
                    [ -80.66651344299316, 35.049286665781096 ],
                    [ -80.66692113876343, 35.0485313026898   ],
                    [ -80.66700696945189, 35.048215102112344 ],
                    [ -80.66707134246826, 35.04777593261294  ],
                    [ -80.66704988479614, 35.04738946150025  ],
                    [ -80.66696405410767, 35.04698542156371  ],
                    [ -80.66681385040283, 35.046353007216055 ],
                    [ -80.66659927368164, 35.04596652937105  ],
                    [ -80.66640615463257, 35.04561518428889  ],
                    [ -80.6659984588623,  35.045193568195565 ],
                    [ -80.66552639007568, 35.044877354697526 ],
                    [ -80.6649899482727,  35.04454357245502  ],
                    [ -80.66449642181396, 35.04417465365292  ],
                    [ -80.66385269165039, 35.04387600387859  ],
                    [ -80.66303730010986, 35.043717894732545 ]
                ]
            }
        ]
    };


Then we run the GeoJSON Geometry Collection object through the GeoJSON Path Data Generator.

// GeoJSON Geometry Collection Example Path Data
geoPath(geoGeometryCollection);

You can see that this generated SVG Path Mini-Language instructions.

Later in this video, we will place it on a map.


Through all of the pasting in of these variables, you will have noticed that some of the data sets can be very big and very cumbersome.


I pasted them in by hand to drive the point home that we were using the GeoJSONLint default examples.


99% of the time, you will want to do an AJAX call to another file in order to load the correct data.


This will keep your code clean and will separate your data from your visualization code.


Now that we have defined all of the variables, let's go ahead and put them on a map of the United States.



Map of USA using D3 Geo Path


Map of USA using D3 Geo path
=> USA GeoJSON Object

If we want to create a map of the USA using the D3 Geo Path function, it means that we will have to find and use a USA GeoJSON Object.


Google Search
=> site:github.com geojson country map of usa


Result => https://github.com/johan/world.geo.json

In order to find a GeoJSON Country Map of the USA, we use Google.

We specify in the search box that we want to limit our search to the website github.com.

This is so that the GeoJSON code is easily available.

The result is Johan Sundstrom's repository of GeoJSON Maps of the world.

We are using these maps for education purposes.

If you are going to use them in Production environments, it is worth looking into what licenses they have and making sure you are on the right side of the law.

We will take a look at this resource of maps in the screen recording section of this video.


In order to construct the Map of the USA using D3 Geo Path, we have to define some variables.

// Variables
var width = 400,
    height = 400,
    geoPath = d3.geo.path();

The height and width are for the SVG Container.

The geoPath variable is for the D3 Geo Path Data Generator Function.


Using the GitHub resource above, we will navigate the folders until we find the GeoJSON Object for the Map of the USA.

// GeoJSON Feature Collection Variable
var usaFeatureCollection = {
    // GeoJSON Feature Collection Object
};

We will copy this and then define the variable usaFeatureCollection with it.

As you will see in the video, the GeoJSON Map of the USA is a GeoJSON Feature Collection Object.

We define this object as a variable as we will pass this to the geoPath function.


Then we will define the Zoom function event listener and zoom behavior.

// Define Zoom Function Event Listener
function zoomFunction() { 
    d3.selectAll("path")
        .attr("transform", 
              "translate(" + d3.event.translate
                           + ") scale ("
                           + d3.event.scale + ")");
}

// Define Zoom Behavior
var zoom = d3.behavior.zoom()
    .scaleExtent([0.2, 10])
    .on("zoom", zoomFunction);

We will attached the zoom behavior to the SVG Container.

Note that since we are using an SVG path, we are going to use the SVG Transform Translate and SVG Transform Scale to do the zooming.


Then we construct the SVG Container.

// SVG Container
var svgContainer = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("border", "2px solid steelblue")
    .call(zoom);

This will hold the map of the USA and all of the GeoJSONLint GeoJSON Objects we created earlier.


Lastly, we will create the USA Map SVG Path.

// Create USA Map SVG Path
var usaSVG = svgContainer
  .append("path")
    .attr("d", geoPath(usaFeatureCollection));


GeoJSON Variables:

  • geoPoint
  • geoLineString
  • geoMultiString
  • geoPolygon
  • geoMultiPolygon
  • geoFeature
  • geoFeatureCollection
  • geoGeometryCollection

For each of these variables, we will add a path to the map and zoom in and out to find it and view it.

Then we will remove the path from the map.

This is will give us a better understanding of how the longitude and latitude coordinates are being mapped to the SVG X and Y Coordinate space.


Alright, let's create the map and place the GeoJSON Objects on it.


First, let's do the Google search.

BROWSER - in google search => site:github.com geojson country map of usa


We click on the top link.

BROWSER - Click on the top link.


Then we click on the countries folder.

BROWSER - Click on the countries folder


Then we scroll down the page until we find USA dot geo dot json.

BROWSER - Scroll down the page until you find USA dot geo dot json.


We click into the file

BROWSER - Click into the file


Since GitHub now shows GeoJSON maps, we want to visit the raw file.

BROWSER - Click into the raw file.


Alright, this GeoJSON Feature Collection Object will be the GeoJSON variable we will be using.

BROWSER - HIGHLIGHT IT.


Next, we go to a web page that has the D3 library imported from the d3js.org website.


We have opened the Chrome Developer Tools and are in the Console section.


Note that we are in the same browser session as we were using earlier, so all of the variables we defined before are still defined.


First, we define the variables for the SVG Container and D3 Geo Path Data Generator Function.

// Variables
var width = 400,
    height = 400,
    geoPath = d3.geo.path();


Then, we define the SVG GeoJSON FeatureCollection Object for the USA.

// SVG GeoJSON FeatureCollection Object
var usaFeatureCollection = {"type":"FeatureCollection","features":[
{"type":"Feature","id":"USA","properties":{"name":"United States of America"},"geometry":{"type":"MultiPolygon","coordinates":[[[[-155.54211,19.08348],[-155.68817,18.91619],[-155.93665,19.05939],[-155.90806,19.33888],[-156.07347,19.70294],[-156.02368,19.81422],[-155.85008,19.97729],[-155.91907,20.17395],[-155.86108,20.26721],[-155.78505,20.2487],[-155.40214,20.07975],[-155.22452,19.99302],[-155.06226,19.8591],[-154.80741,19.50871],[-154.83147,19.45328],[-155.22217,19.23972],[-155.54211,19.08348]]],[[[-156.07926,20.64397],[-156.41445,20.57241],[-156.58673,20.783],[-156.70167,20.8643],[-156.71055,20.92676],[-156.61258,21.01249],[-156.25711,20.91745],[-155.99566,20.76404],[-156.07926,20.64397]]],[[[-156.75824,21.17684],[-156.78933,21.06873],[-157.32521,21.09777],[-157.25027,21.21958],[-156.75824,21.17684]]],[[[-157.65283,21.32217],[-157.70703,21.26442],[-157.7786,21.27729],[-158.12667,21.31244],[-158.2538,21.53919],[-158.29265,21.57912],[-158.0252,21.71696],[-157.94161,21.65272],[-157.65283,21.32217]]],[[[-159.34512,21.982],[-159.46372,21.88299],[-159.80051,22.06533],[-159.74877,22.1382],[-159.5962,22.23618],[-159.36569,22.21494],[-159.34512,21.982]]],[[[-94.81758,49.38905],[-94.64,48.84],[-94.32914,48.67074],[-93.63087,48.60926],[-92.61,48.45],[-91.64,48.14],[-90.83,48.27],[-89.6,48.01],[-89.272917,48.019808],[-88.378114,48.302918],[-87.439793,47.94],[-86.461991,47.553338],[-85.652363,47.220219],[-84.87608,46.900083],[-84.779238,46.637102],[-84.543749,46.538684],[-84.6049,46.4396],[-84.3367,46.40877],[-84.14212,46.512226],[-84.091851,46.275419],[-83.890765,46.116927],[-83.616131,46.116927],[-83.469551,45.994686],[-83.592851,45.816894],[-82.550925,45.347517],[-82.337763,44.44],[-82.137642,43.571088],[-82.43,42.98],[-82.9,42.43],[-83.12,42.08],[-83.142,41.975681],[-83.02981,41.832796],[-82.690089,41.675105],[-82.439278,41.675105],[-81.277747,42.209026],[-80.247448,42.3662],[-78.939362,42.863611],[-78.92,42.965],[-79.01,43.27],[-79.171674,43.466339],[-78.72028,43.625089],[-77.737885,43.629056],[-76.820034,43.628784],[-76.5,44.018459],[-76.375,44.09631],[-75.31821,44.81645],[-74.867,45.00048],[-73.34783,45.00738],[-71.50506,45.0082],[-71.405,45.255],[-71.08482,45.30524],[-70.66,45.46],[-70.305,45.915],[-69.99997,46.69307],[-69.237216,47.447781],[-68.905,47.185],[-68.23444,47.35486],[-67.79046,47.06636],[-67.79134,45.70281],[-67.13741,45.13753],[-66.96466,44.8097],[-68.03252,44.3252],[-69.06,43.98],[-70.11617,43.68405],[-70.645476,43.090238],[-70.81489,42.8653],[-70.825,42.335],[-70.495,41.805],[-70.08,41.78],[-70.185,42.145],[-69.88497,41.92283],[-69.96503,41.63717],[-70.64,41.475],[-71.12039,41.49445],[-71.86,41.32],[-72.295,41.27],[-72.87643,41.22065],[-73.71,40.931102],[-72.24126,41.11948],[-71.945,40.93],[-73.345,40.63],[-73.982,40.628],[-73.952325,40.75075],[-74.25671,40.47351],[-73.96244,40.42763],[-74.17838,39.70926],[-74.90604,38.93954],[-74.98041,39.1964],[-75.20002,39.24845],[-75.52805,39.4985],[-75.32,38.96],[-75.071835,38.782032],[-75.05673,38.40412],[-75.37747,38.01551],[-75.94023,37.21689],[-76.03127,37.2566],[-75.72205,37.93705],[-76.23287,38.319215],[-76.35,39.15],[-76.542725,38.717615],[-76.32933,38.08326],[-76.989998,38.239992],[-76.30162,37.917945],[-76.25874,36.9664],[-75.9718,36.89726],[-75.86804,36.55125],[-75.72749,35.55074],[-76.36318,34.80854],[-77.397635,34.51201],[-78.05496,33.92547],[-78.55435,33.86133],[-79.06067,33.49395],[-79.20357,33.15839],[-80.301325,32.509355],[-80.86498,32.0333],[-81.33629,31.44049],[-81.49042,30.72999],[-81.31371,30.03552],[-80.98,29.18],[-80.535585,28.47213],[-80.53,28.04],[-80.056539,26.88],[-80.088015,26.205765],[-80.13156,25.816775],[-80.38103,25.20616],[-80.68,25.08],[-81.17213,25.20126],[-81.33,25.64],[-81.71,25.87],[-82.24,26.73],[-82.70515,27.49504],[-82.85526,27.88624],[-82.65,28.55],[-82.93,29.1],[-83.70959,29.93656],[-84.1,30.09],[-85.10882,29.63615],[-85.28784,29.68612],[-85.7731,30.15261],[-86.4,30.4],[-87.53036,30.27433],[-88.41782,30.3849],[-89.18049,30.31598],[-89.593831,30.159994],[-89.413735,29.89419],[-89.43,29.48864],[-89.21767,29.29108],[-89.40823,29.15961],[-89.77928,29.30714],[-90.15463,29.11743],[-90.880225,29.148535],[-91.626785,29.677],[-92.49906,29.5523],[-93.22637,29.78375],[-93.84842,29.71363],[-94.69,29.48],[-95.60026,28.73863],[-96.59404,28.30748],[-97.14,27.83],[-97.37,27.38],[-97.38,26.69],[-97.33,26.21],[-97.14,25.87],[-97.53,25.84],[-98.24,26.06],[-99.02,26.37],[-99.3,26.84],[-99.52,27.54],[-100.11,28.11],[-100.45584,28.69612],[-100.9576,29.38071],[-101.6624,29.7793],[-102.48,29.76],[-103.11,28.97],[-103.94,29.27],[-104.45697,29.57196],[-104.70575,30.12173],[-105.03737,30.64402],[-105.63159,31.08383],[-106.1429,31.39995],[-106.50759,31.75452],[-108.24,31.754854],[-108.24194,31.34222],[-109.035,31.34194],[-111.02361,31.33472],[-113.30498,32.03914],[-114.815,32.52528],[-114.72139,32.72083],[-115.99135,32.61239],[-117.12776,32.53534],[-117.295938,33.046225],[-117.944,33.621236],[-118.410602,33.740909],[-118.519895,34.027782],[-119.081,34.078],[-119.438841,34.348477],[-120.36778,34.44711],[-120.62286,34.60855],[-120.74433,35.15686],[-121.71457,36.16153],[-122.54747,37.55176],[-122.51201,37.78339],[-122.95319,38.11371],[-123.7272,38.95166],[-123.86517,39.76699],[-124.39807,40.3132],[-124.17886,41.14202],[-124.2137,41.99964],[-124.53284,42.76599],[-124.14214,43.70838],[-124.020535,44.615895],[-123.89893,45.52341],[-124.079635,46.86475],[-124.39567,47.72017],[-124.68721,48.184433],[-124.566101,48.379715],[-123.12,48.04],[-122.58736,47.096],[-122.34,47.36],[-122.5,48.18],[-122.84,49],[-120,49],[-117.03121,49],[-116.04818,49],[-113,49],[-110.05,49],[-107.05,49],[-104.04826,48.99986],[-100.65,49],[-97.22872,49.0007],[-95.15907,49],[-95.15609,49.38425],[-94.81758,49.38905]]],[[[-153.006314,57.115842],[-154.00509,56.734677],[-154.516403,56.992749],[-154.670993,57.461196],[-153.76278,57.816575],[-153.228729,57.968968],[-152.564791,57.901427],[-152.141147,57.591059],[-153.006314,57.115842]]],[[[-165.579164,59.909987],[-166.19277,59.754441],[-166.848337,59.941406],[-167.455277,60.213069],[-166.467792,60.38417],[-165.67443,60.293607],[-165.579164,59.909987]]],[[[-171.731657,63.782515],[-171.114434,63.592191],[-170.491112,63.694975],[-169.682505,63.431116],[-168.689439,63.297506],[-168.771941,63.188598],[-169.52944,62.976931],[-170.290556,63.194438],[-170.671386,63.375822],[-171.553063,63.317789],[-171.791111,63.405846],[-171.731657,63.782515]]],[[[-155.06779,71.147776],[-154.344165,70.696409],[-153.900006,70.889989],[-152.210006,70.829992],[-152.270002,70.600006],[-150.739992,70.430017],[-149.720003,70.53001],[-147.613362,70.214035],[-145.68999,70.12001],[-144.920011,69.989992],[-143.589446,70.152514],[-142.07251,69.851938],[-140.985988,69.711998],[-140.985988,69.711998],[-140.992499,66.000029],[-140.99777,60.306397],[-140.012998,60.276838],[-139.039,60.000007],[-138.34089,59.56211],[-137.4525,58.905],[-136.47972,59.46389],[-135.47583,59.78778],[-134.945,59.27056],[-134.27111,58.86111],[-133.355549,58.410285],[-132.73042,57.69289],[-131.70781,56.55212],[-130.00778,55.91583],[-129.979994,55.284998],[-130.53611,54.802753],[-131.085818,55.178906],[-131.967211,55.497776],[-132.250011,56.369996],[-133.539181,57.178887],[-134.078063,58.123068],[-135.038211,58.187715],[-136.628062,58.212209],[-137.800006,58.499995],[-139.867787,59.537762],[-140.825274,59.727517],[-142.574444,60.084447],[-143.958881,59.99918],[-145.925557,60.45861],[-147.114374,60.884656],[-148.224306,60.672989],[-148.018066,59.978329],[-148.570823,59.914173],[-149.727858,59.705658],[-150.608243,59.368211],[-151.716393,59.155821],[-151.859433,59.744984],[-151.409719,60.725803],[-150.346941,61.033588],[-150.621111,61.284425],[-151.895839,60.727198],[-152.57833,60.061657],[-154.019172,59.350279],[-153.287511,58.864728],[-154.232492,58.146374],[-155.307491,57.727795],[-156.308335,57.422774],[-156.556097,56.979985],[-158.117217,56.463608],[-158.433321,55.994154],[-159.603327,55.566686],[-160.28972,55.643581],[-161.223048,55.364735],[-162.237766,55.024187],[-163.069447,54.689737],[-164.785569,54.404173],[-164.942226,54.572225],[-163.84834,55.039431],[-162.870001,55.348043],[-161.804175,55.894986],[-160.563605,56.008055],[-160.07056,56.418055],[-158.684443,57.016675],[-158.461097,57.216921],[-157.72277,57.570001],[-157.550274,58.328326],[-157.041675,58.918885],[-158.194731,58.615802],[-158.517218,58.787781],[-159.058606,58.424186],[-159.711667,58.93139],[-159.981289,58.572549],[-160.355271,59.071123],[-161.355003,58.670838],[-161.968894,58.671665],[-162.054987,59.266925],[-161.874171,59.633621],[-162.518059,59.989724],[-163.818341,59.798056],[-164.662218,60.267484],[-165.346388,60.507496],[-165.350832,61.073895],[-166.121379,61.500019],[-165.734452,62.074997],[-164.919179,62.633076],[-164.562508,63.146378],[-163.753332,63.219449],[-163.067224,63.059459],[-162.260555,63.541936],[-161.53445,63.455817],[-160.772507,63.766108],[-160.958335,64.222799],[-161.518068,64.402788],[-160.777778,64.788604],[-161.391926,64.777235],[-162.45305,64.559445],[-162.757786,64.338605],[-163.546394,64.55916],[-164.96083,64.446945],[-166.425288,64.686672],[-166.845004,65.088896],[-168.11056,65.669997],[-166.705271,66.088318],[-164.47471,66.57666],[-163.652512,66.57666],[-163.788602,66.077207],[-161.677774,66.11612],[-162.489715,66.735565],[-163.719717,67.116395],[-164.430991,67.616338],[-165.390287,68.042772],[-166.764441,68.358877],[-166.204707,68.883031],[-164.430811,68.915535],[-163.168614,69.371115],[-162.930566,69.858062],[-161.908897,70.33333],[-160.934797,70.44769],[-159.039176,70.891642],[-158.119723,70.824721],[-156.580825,71.357764],[-155.06779,71.147776]]]]}}]};


Next, we define the zoom function event listener and the zoom behavior.

// Define Zoom Function Event Listener
function zoomFunction() { 
    d3.selectAll("path")
        .attr("transform", 
              "translate(" + d3.event.translate
                           + ") scale ("
                           + d3.event.scale + ")");
}

// Define Zoom Behavior
var zoom = d3.behavior.zoom()
    .scaleExtent([0.2, 10])
    .on("zoom", zoomFunction);


Next, we define the SVG Viewport and call the zoom behavior on it.

// SVG Viewport
var svgContainer = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("border", "2px solid steelblue")
    .call(zoom);


Next, we create the SVG Path USA Map.

// Create USA Map SVG Path
var usaSVG = svgContainer
  .append("path")
    .attr("d", geoPath(usaFeatureCollection));

And there we go, we now have half of the United States showing up on the map.


Let's zoom out to see the full path.

BROWSER - zoom out

We zoom and pan the map until we can see the full map of the United States.

Which is fantastic - we were able to use a FeaturesCollection GeoJSON Object to create a map of the United States in a straight forward manner.


Next, let's open the Elements Section of the Chrome Developer tools.


We are now going to add one by one the GeoJSON Geometry and Feature Objects to the map.


Then we will zoom in and out to make sure that the GeoJSON Path Data Generator is really generating paths that are inside of the United States.


First, we create the geoPoint.

// Create GeoJSON geoPoint SVG Path
var pointPath = svgContainer
  .append("path")
    .attr("d", geoPath(geoPoint))
    .style("stroke", "#FF00FF");

Before we zoom, notice that the circle is on the east coast of the US.

Then when we start zooming, that it moves to where it really belongs.

This is because when we create this dot, we are creating it simply and are not paying attention to the fact that the map has already been scaled and transformed.

Were we doing this in production, we would have to take into account any zooming and scaling that had already been done when creating this path.


Now, let's delete it from the Chrome Developer Tools Elements Section.

BROWSER - delete the point.


Next, we create the geoMultiPoint.

// Create GeoJSON geoMultiPoint SVG Path
var multiPointPath = svgContainer
  .append("path")
    .attr("d", geoPath(geoMultiPoint))
    .style("stroke", "#FF00FF");

Again, the circles are drawn on the screen without taking into account what zoom and scale we are currently working with.

BROWSER - ZOOM IN

If we zoom in, you can see the two points on the map.

Note - that our code has created one path for the two points.

In a later video, we will cover the pros and cons behind making one path for multiple objects versus multiple paths for multiple objects.


Now, let's delete it from the Chrome Developer Tools Elements Section.

BROWSER - delete the path.


Next, we create the geoLineString.

// Create GeoJSON geoLineString SVG Path
var lineStringPath = svgContainer
  .append("path")
    .attr("d", geoPath(geoLineString))
    .style("stroke", "#FF00FF");

As we zoom in and pan, you can see the line drawn on the map.

D3 Geo Path was able to do the line interpolation for us given the set of longitude and latitude coordinates using the SVG Path Mini-Language.


Now, let's delete it and zoom back out to see the full country map.

BROWSER - Delete the path.


Next, we create the geoMultiString.

// Create GeoJSON geoMultiString SVG Path
var multiStringPath = svgContainer
  .append("path")
    .attr("d", geoPath(geoMultiString))
    .style("stroke", "#FF00FF");

If you recall this data set from the previous video, the lines were very small and were located at the local neighborhood level.

In this case, we are not able to zoom in close enough nor is the SVG Path able to draw the lines with enough accuracy.

We can just see the pink spots on the map when we zoom in to the limit.


Let's delete this and move on to the next example.

BROWSER - Delete the path.


Next, we create the geoPolygon

// Create GeoJSON geoPolygon SVG Path
var polygonPath = svgContainer
  .append("path")
    .attr("d", geoPath(geoPolygon))
    .style("stroke", "#FF00FF");

This is the polygon path that has an interior polygon path inside of it.

When we zoom in we can see the two polygons.

The exterior polygon and the polygon that creates a hole in the bigger polygon.


Now, let's delete it and zoom back out to see the full country map.

BROWSER - Delete the path.


Next, we create the geoMultiPolygon

// Create GeoJSON geoMultiPolygon SVG Path
var multiPolygonPath = svgContainer
  .append("path")
    .attr("d", geoPath(geoMultiPolygon))
    .style("stroke", "#FF00FF");

This is the polygon path that has the two polygons around different states of the United States.

Notice that the polygons look slightly lopsided to what you may be used to when looking at pictures of the United States.

This distortion is being caused by the projection and the GeoJSON Data we fed into the D3 Geo Path Function.


Now, let's delete it and zoom back out to see the full country map.

BROWSER - Delete the path.

That was the last geometry.


Next, we create the geoFeature

// Create GeoJSON geoFeature SVG Path
var geoFeaturePath = svgContainer
  .append("path")
    .attr("d", geoPath(geoFeature))
    .style("stroke", "#FF00FF");

This is the feature from the last video that was a public park.

If we zoom in as far as we can given the setup of our zoom scale extent, we can see the tiny blob of pink.

This is our park.


Now, let's delete it and zoom back out to see the full country map.

BROWSER - Delete the path.


Next, we create the geoFeatureCollection.

// Create GeoJSON geoFeatureCollection SVG Path
var geoFeatureCollectionPath = svgContainer
  .append("path")
    .attr("d", geoPath(geoFeatureCollection))
    .style("stroke", "#FF00FF");

Again, we have to zoom in and pan the map to make sure that the SVG transform and SVG scale are picked up.

When we zoom in, we can see multiple features.


Next, let's delete it and zoom back out to see the full country map.

BROWSER - Delete the path.


Lastly, we create the geoGeometryCollection

// Create GeoJSON geoGeometryCollection SVG Path
var geoGeometryCollectionPath = svgContainer
  .append("path")
    .attr("d", geoPath(geoGeometryCollection))
    .style("stroke", "#FF00FF");

Again, we have to zoom in and pan the map to make sure that the SVG transform and SVG scale are picked up.

When we zoom in, we can see multiple geometries.


Now, let's delete it and zoom back out to see the full country map.

BROWSER - Delete the path.


And with, we have shown an in-depth coverage of all of the different GeoJSON geometries and Features that we can place on a map using the D3 Geo Path Data Generator Function.


The D3 Geo Path Data Generator Function takes in a GeoJSON object and translates it to SVG Path Mini-Language Instructions.


We have now seen how GeoJSON objects work and how we can use them with D3 to build maps.

<< Back To D3 Screencast and Written Tutorials Index