Tagged: D3

Force Diagram of WMATA Metro StationsWhat is the minimum information you need when planning a trip on the Metro system? If all you want to see is which stations are connected, the Force Diagram of WMATA Metro Stations is the Metro map for you.

This visualization was designed using the JavaScript library D3, which includes the Force Layout design. I was inspired to do a version for Washington, DC after seeing Muyueh Lee‘s visualization of the Taipei MRT system. You can click-and-drag stations to try to reposition them. The layout pays no attention to the geographic locations of the stations. The distribution starts off as a random mess, and then coalesces into positions based on simulating physical properties of the links between stations. This is an even-more-severe rendering than my isochronal Metro Distortion Map.

The code is relatively compact, and customizing it was a good way for me to learn D3. That’s the same tool I used to create the Voronoi Diagram of CaBi Stations and the interactive bar chart I used for Looking Back at 2013 CaBi Data.

A Bare-Minimum Metro Map

Want to look back at 2013 using Capital Bikeshare data? I’ve put together an interactive tool to examine the 2013 daily ridership statistics for Capital Bikeshare. The data looks at daily “bikeout” totals, that is, how many bikes were checked out each day. You can summarize the data into weeks, months, quarters, and days of the week. The weekly view ignores December 31, in order to avoid having a 53rd week with only a single day in it.

You can compare the difference between bikeouts from subscribers (those with memberships for a month or a year) and casual riders (those with memberships for 1 or 3 days). You can also look at bikeout stats for any of the 306 individuals stations.

The program lets you find the correlation between any two data sets. You can use a second data set to color the bars of the first data set. The correlation is automatically calculated. It ranges from 1, a perfect positive correlation, to -1, a perfect negative correlation. 0 means there is no correlation. » Continue Reading…

Looking Back at 2013 CaBi Data

I’ve been looking for ways to let users play with data on a web page. It was time to explore the D3 library for JavaScript. I’d previously used D3 to create a Voronoi Diagram of CaBi Stations, but that was written by modifying an existing piece of code. How hard would it be to create my own D3 program?

I had seen beautiful, interactive bar charts written in D3, and wanted to create my own. At d3js.org you’ll find many great examples.

Every D3 function is available as a method to the global “d3” object. JavaScript doesn’t actually have classes, so when I call something a method, it’s really an object property that happens to be a function. Most D3 methods return objects that themselves have methods available, and it’s typical to see these methods chained together. My beef with the D3 API Reference is that it doesn’t tell you what pseudo class a method returns, so it’s hard to learn without studying copious examples. » Continue Reading…

Voronoi Diagram of CaBi StationsI was introduced to Voronoi diagrams at today’s Data Visualization Hack Day, at Mobility Lab. Justin Grimes showed a Voronoi diagram of Capital Bikeshare stations he had overlaid on a map of the Washington, DC region: capital_bikeshare_voronoi_diagram.

The map plots each CaBi station. The boundaries are drawn at the half-way point between the closest two stations. When three or more cell boundaries meet, you are equidistant to them all. Inside the cell of a station, that station is the one that’s closest to you.

Justin showed me an interactive example of Voronoi Tesselation on GitHub. The interactive demo adds a new “seed” wherever your mouse is pointing. That point creates a Voronoi cell. » Continue Reading…