Introduction: Talk about how GeoViz is a map plus data. This can be displayed with interaction effects using D3 Base Layer: How to go from shapefile to GeoJSON + Projections Custom Map Slicing Choropleth: Dot Density: Florida Roads: Points of Interest Flow Map: Bubble Map

Geovisualizations are one of my favorite modes of data visualization. You've probably seen geovisualizations used to convey information on weather, traffic, and population size. At their core, they are a combination of two types of data, the spatial data that renders the map, and the information the designer wants to convey to the audience. I like to create geovisualizations using D3.js, a library that supports in browser rendering and user interaction.

Geographic Information Studies (GIS) is a widely studied field and as a result, spatial data is increasingly available to the public. There are multiple geographic data formats. Universities and local governments will often host spatial data in a zipped package called a shapefile. D3 cannot render a map from a shapefile but there are free tools available that can shape the displayed map and convert the data into a supported format.

Shapefiles and GeoJSON

The first thing I do after finding shapefile is to render it on mapshaper. After uploading the entire zipfile, the website will project the boundary information. Now the data can be exported to the D3 friendly GeoJSON format. The resulting file will often be too large to be supported by web browsers so I first use mapshaper's simplify function which makes the file smaller but the lines less precise. At this point D3 can use the GeoJSON data to project the preview shown in mapshaper.

Sometimes I have trouble finding the exact spatial data I am looking for. Once I wanted to create a projection of Manhattan. NYC OpenData freely distributes the Neighborhood Tabulation Areas. The file shows the boundaries for Manhattan, but also includes the other boroughs of New York. The GeoJSON file retains metadata, like the associated borough code for each path in the file. I used to the open source Python library GeoPandas to select the relevent paths. GeoPandas opens the GeoJSON file as a pandas dataframe. I created a Manhattan GeoJSON file by exporting a dataframe that only contains rows with a Manhattan borough code.

For this post I am using the free country level data provided by DIVA-GIS. Spatial data is often separated into a few components then compressed into a zip file.

Projecting GeoJSON with D3

Whenever I create something with D3 I start with an existing visualization. After gutting and rewriting my own code a few times I wrote a map projection template. My goal was to make it as concise and straightforward as possible but it will still confuse newcomers to the library. I am going to explain the use of a projection since it plays a large role in the world of cartography.

The Earth has been drawn on countless flat surfaces thanks to map projections. Projections make it possible to translate the coordinates of a 3D object to a 2D surface although there will be distortion. There are a handful of projections each with their strengths and weaknesses. The template I created uses the commonly seen Mercator projection. Now that the base layer is in place, its time to add data and interactive effects.

Choropleths

Choropleths are a type of geovisualization that use color to convey numerical values. Darker color mean a higher value and lighter colors depict lower values. Choropleths are often used to show census data.

The Application

This was a lot of work to look at a map of Switzerland but it's only the foundation. The key power behind D3 is interactivity and binding data to elements. Depending on the data I can color in regions of the map, mark the locations of major cities, and react to user mouse activity. Its very manual but allows for some truly compelling visualizations.

The Art of Not Taking Notes

I joined a Call of Cthullu campaign as if I don't spend enough time role playing already. One aspect of the game I appreciate is how its based on real locations; after a quick stint in Peru and a time skip my party ends up in New York. I wanted a visual way to keep track of our progres and decided to go with marking the locations we've visited on a D3 map.

Making The Map

The first step was to find an appropriate GeoJSON of Manhattan. NYC OpenData has a lot of publicly available GIS files including the Neighborhood Tabulation Areas This draws the visualization I want but also every other borough in New York. To subset the spatial file I used GeoPandas. The library lets me import the spatial file as a dataframe. After a quick peek at the metadata I selected only the rows that contain Manhattan's borough code and exported the selection to a JSON file.

Now that the map is up, I need to create markings on the map to show where the team has visited. Evidently the Cthullu handbook has the intersections for each place of interest and my patient Keeper Andriy passed it along to me. Call of Cthullu is in the 1920's so some of the street names have changed. Still, when I pass the information into Google Maps it takes it like a champ and gives me the coordinate information back. I apply the projection function to the coordinates and plot the output on top of the map of Manhattan.

I jotted a few key facts

The map needed some additional information to explain the relevance of the marked points. I added a mouseover effect that displays a tooltip with the name of the location, the game provided address, and quick description of what we did there. Adding points to the map gives the story a feeling of progression.

GitHub Repo

Choropleths and Cenus Data

One of the most common forms of geographic data is census information. It can show how different parts of a region think, feel, and behave about a myriad of topics. A powerful way to convey this information is with a Choropleth. This visualization colors in sections of a map based on the data provided. I got my hands on census data from India to settle a very important question. Who's eating rice and who's eating roti?

The census had a section about the per capita rice and wheat consumption in every state of India. I extracted the data to a CSV file and found an accompanying GeoJSON file. Its important that the number of entries in both files are the same so D3 knows where to color. With some simple arithmatic and color scales I created a map thats more green when a state eats rice and more saffron when roti is the carb of choice. Mousing over a state shows the original information.

What else?

These examples are so random which shows