Seattle Software Developers


Pugetworks Blog Archive!

Seattle Car2Go Visualization with D3

If you want to see an awesome map, click on this!

One of the interesting frontiers in web mapping is the use of the JavaScript library d3.js and how it will integrate with existing JavaScript mapping frameworks or replace them.

The author of d3.js is Mike Bostock and the visualization library grew out of another Bostock project called Protoviz after he discovered that users weren't able to easily integrate it.

In the past year there have been a number of inspiring geo visualizations that make d3.js a natural choice for web mapping projects.  You can see a really good set of examples here.

Car2Go in the Northwest

One recent map visualization that got our attention was Matt Sack’s awesome timeslider of car2go movement in Portland.  This visualization shows the car share activity over a three-day period. For those that don't know, car2go is a car share program with some perks that play off drivers' natural animosity to city driving.  Basically you can leave the car almost anywhere after a one-way trip and avoid getting tickets.

The number of car2go users seems to have exploded in Portland and Seattle and we're not the only people asking the very basic questions -- who is using these cars and where are they going?

Matt Sacks visualization begins to answer these questions while also leaving room for more improvement. Excited by the possibilities we decided to port his Portland visualization over for the Seattle area.

Here's what we learned


Matt Sack’s car2go visualization uses a pure JavaScript stack, though some pieces like the web server can be swapped out since you just need to serve static files. Some of these technologies are new to us and part of the fun of porting this system was to learn about them.

Grunt :

This JavaScript tool is used to replace the manual work you often do when writing CSS or JavaScript -- linting, compilation, minification, concatenation. It's used in this project to compile the Sass files and concatenate our individual .js files into the site.js. Grunt can be installed with node package manager

Nodejs :

In this project node can be used to serve the static files and run cron jobs. We only use it here as an environment to run bash-like worker scripts that will suck down the JSON from car2go's REST api and write it to a file. There's an upload.js script that will dump the output JSON cars file into an Amazon S3 bucket using the aws-sdk for node.

Collector.js :

Written by Matt Sacks, this small library is a mapreduce framework.

MapBox.js :

MapBox.js is a mapping framework that wraps Leaflet and interacts with MapBox hosting. It would usually provide the standard mapping tools for panning, zooming and requesting more tiles on user interaction. You'll quickly notice that this type of interactivity is not available in the app. In this project, mapbox.js is really only used in a couple ways

      1. Matt Sacks seems to have used TileMill to create a custom tileset as a backdrop to his Portland map. He then hosts those tiles on MapBoox hosting. So it's used here to request those tiles as a layer to give us geographic context
      2. Once we get the lat/long points of the cars we need to find where these points are on the map ( it's in a different projection ). We use mapbox.js to get this pixel location so d3.js can properly draw it.

D3.js :

The meat of the visualization is in d3.js. It is responsible for rendering the points and the timeslider. It is also creates the eventful interface between these components so we get an animation.

Ways To Improve

We thought of many interesting ways to alter this app.  Maybe in future posts we will try them out.  But for now you will have to enjoy our start of a brainstorming session.

  1. Create an interface between the mapping framework events ( pan, zoom, select point ) and d3.js animation. This will make the map more interactive so users can get a better sense of what's going on in certain areas. Most users will want to click on a point and see some kind of information
  2. Select cars and time-slide them individually
  3. Track individual cars.  Strangely this is more possible than you might imagine since we realize that the ID’s associated with the cars actually matches the license plates. This is also a security flaw in car2go's API since they discourage people from tracking individual cars