Ben J. Christensen

Line Graphs Using d3.js

Simple examples of line graphs implemented using d3.js:

Simple Line Graph http://bl.ocks.org/2579599 https://gist.github.com/2579599

Line Graph with Dual-scaled Axes http://bl.ocks.org/2579619 https://gist.github.com/2579619

Line graph over time with multiple data points http://bl.ocks.org/2580640 https://gist.github.com/2580640

UPDATE: I added an interactive version with scrubbing and dynamic updating.

About these ads

Filed under: Code, User Interface

2 Responses

  1. [...] chart with d3? There are no ready APIs right? At least none that I could find. What I did find was http://benjchristensen.com/2012/05/02/line-graphs-using-d3-js/ (very useful!) and I hacked up a line chart taking cue from [...]

  2. Todd says:

    I found is example, specifically the Simple Line Graph, very useful for a project I am working on. In fact, I’m expanding it by adding an additional y-axis. It’s not pretty when it appears to the right of the already existing right y-axis so I’m aiming to have the 2nd right y-axis use the same line as your original right y-axis but have the tick marks and colored label on the inside on the line. Thanks for posting this!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Twitter Updates

View Ben Christensen's profile on LinkedIn
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: