Stripe Gross Volume with d3.js

February 14, 2013

Stripe Gross Volume with d3.js"

Over the past two weeks I’ve been working with a data-driven visualization library called D3.js. My primary goal was to get familiar with SVG, and to discover new ways to visually represent data in a useful way.

While I was building visualizations for Less Neglect I remembered reading that the Stripe graphs, while custom made by Stripe, were built on top of the Raphaël Javascript library because it makes working with SVG easier. So I figured I’d give it give it a spin with d3 because, you guessed it, it makes working with SVG easier.

The Data

Stripe has an internal API for fetching aggregate data for the purpose of building the charts you see on the dashboard. Please, before you read any more, hop on to their support forum and request that they make that API public. There is so much more awesome that can be built if we had access to that API. Specifically, I really want access to that API endpoint so that I can build a nice real-time dashboard inside of Pay Pad.

The backbone of D3 is its datasource. You can see tons of examples on the d3 page on GitHub. Mike Bostock has created a nifty tool that allows you to view d3 code snippets hosted in Gist’s, on the bl.ocks.org site. It has great support for supplying external data sources like .tsv files that are embedded directly into a gist. For my example, I’m just hard-coding a datasource.

Here’s an example dataset for the month of January:

var data = [
  {"end_time":"2013-01-01","value":25.00},
  {"end_time":"2013-01-02","value":0.00},
  {"end_time":"2013-01-03","value":25.00},
  {"end_time":"2013-01-04","value":159.00},
  ...
  {"end_time":"2013-01-31","value":0.00}
]

Here’s the working recreation of the Stripe Gross Volume area-chart:

Here’s the actual Stripe chart based on the same data:

Room for improvement

To make this better, we could add some Tipsy’s to the circle’s that would display the value of each circle as you hover over them. Another alternative to binding the tipsy to the circle’s is to draw a transparent bar-chart on top of the area-chart, then bind the tipsy to the rect’s created by the bar-chart. This lets you hover anywhere on the chart, not just on a circle, to reveal the underlying value.

Give d3 a spin

Kudos to Mike and everyone else that has contributed examples. It significantly reduced the learning curve and I was able to knock out some really interesting charts in no time at all.