Chapter 12. Know your Map

In this chapter we will cover:

• Projecting the US map

• Projecting the world map

• Building a choropleth map

Introduction

The ability to project and correlate data points to geographic regions is crucial in many types of visualizations. Geographic visualization is a complex topic with many competing standards emerging and maturing for today's web technology. D3 provides few different ways to visualize geographic and cartographic data. In this chapter we will introduce basic D3 cartographic visualization techniques and how to implement a fully-functional choropleth map (a special purpose colored map) in D3.

Projecting the US map

In this recipe we are going to start with projecting the US map using D3 geo API, while also getting familiar with a few different JSON data formats for describing geographic data. Let's first take a look at how geographic data are typically presented and consumed in JavaScript.

GeoJSON

The first standard JavaScript geographic data format we are going to touch upon is called GeoJSON. GeoJSON format differs from other GIS standards in that it was written and is maintained by an Internet working group of developers.

GeoJSON is a format for encoding a variety of geographic data structure. A GeoJSON object may represent geometry, a feature, or a collection of features. GeoJSON supports the following geometry types: Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection. Features in GeoJSON contain a geometry object and additional properties, and a feature collection represents a list of features.

Source: http://www.geojson.org/

GeoJSON...

Projecting the world map

What if our visualization project is not just about US, but rather concerns the whole world? No worries, D3 comes with various built-in projection modes that work well with the world map that we will explore in this recipe.

Getting ready

Open your local copy of the following file in your web browser hosted on your local HTTP server:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter12/world.html

How to do it...

In this recipe we will project the world map using various different D3 built-in projection modes. Here is the code sample:

<script type="text/javascript">
    var width = 300, height = 300,
        translate = [width / 2, height / 2];

    var projections = [ // <-A
        {name: 'azimuthalEqualArea', fn: 
          d3.geo.azimuthalEqualArea()
                .scale(50)
                .translate(translate)},
        {name: 'conicEquidistant', fn: d3.geo.conicEquidistant()
             .scale(35)
                .translate(translate)}...

Building a choropleth map

Choropleth map is a thematic map, in other words, a specially designed map not a general purpose one, which is designed to show measurement of statistical variable on the map using different color shades or patterns; or sometimes referred as geographic heat-map in simpler terms. We have already seen in the previous two recipes that geographic projection in D3 consists of a group of svg:path elements, therefore, they can be manipulated as any other svg elements including coloring. We will explore this feature in geo-projection and implement a Choropleth map in this recipe.

Getting ready

Open your local copy of the following file in your web browser hosted on your local HTTP server:

https://github.com/NickQiZhu/d3-cookbook/blob/master/src/chapter12/choropleth.html

How to do it...

In a choropleth map different geographic regions are colored according to their corresponding variables, in this case based on 2008 unemployment rate in US by county. Now, let's see how to do...