Ben J. Christensen

Dynamic Stacked Bar Chart Using d3.js

A prototype of a stacked bar chart that can dynamically add/remove bars and update the data for each bar implemented using d3.js.

It  represents data freshness (time since update) per bar using an opacity decay so a bar fades away if it doesn’t receive fresh data.

The examples I found elsewhere represent static data, so my model of implementation is different in that I don’t use data binding or d3.layout.stack() because I couldn’t figure out how to make those work with dynamic data (if someone can show me a better way, I’ll gladly accept the guidance). Thus, my implementation directly adds/removes the bars and determines the bar widths and x-position itself.

The use case I intend to apply this prototype for is to visualize a stream of realtime data.

Functionality not implemented in this prototype include things such as hover and click actions to show details of the data a bar represents.

Here are links to the code and working example:

http://bl.ocks.org/1488375
https://gist.github.com/1488375

About these ads

Filed under: Code, User Interface

3 Responses

  1. Ben,

    Another interesting demo and use case. I’m taking a serious look at d3 for my next set of charts. Up until now I’ve used raphael and g.raphael with a bunch of custom code and charts to get what I needed (since the default impl. is rather basic — the developer of raphael/g.raphael got hired by Sencha, you might have noticed Sencha 4 has a pretty nice charting library now :).

    I had built a pie chart that allowed you to double click on a slice to drill down into more detail. While in “drill down” mode you could navigate through the drill down data for the other original slices (really wish I could share a picture of it, or the code). I also extended the “bubble” chart so the circles would vary in color based on some condition using the Roy G Biv (red, orange, yellow, green…) colors. There would be some condition that I’d check to dynamically adjust what the colors represented as data was updated (it was live/real-time chart). So initially it might have been something like: 0 – 4 = red, 5 – 10 = orange, etc. but could change as new data arrived (again, a picture or video would do it more justice).

    anyways, thanks for another interesting post.

    • Ben Christensen says:

      Craig, glad it was of interest to you. It was an interesting one to figure out. The concrete implementation will be more involved and I look forward to it coming together. I may be able to share that final outcome via the Netflix Tech Blog. If that happens I’ll post back here.

      It sounds like you’ve got some interesting use cases, if you can ever share I’d like to see those examples.

      Ben

      • That would be great if you can share. I wish I could share my code. My work environment would require that I a) get approval for releasing the code, b) get someone to review the code for any proprietary information, c) print it out, d) type it in at home.

        Needless to say, that process really puts a damper on sharing most of the code I work on, but if I ever have something I can share, I’ll certainly do so and post a comment on here.

        I’m also looking to do a post on JavaScriptMVC now that I’ve developed several applications with it which may be of interest to you (and your readers) since it’s JavaScript, although not related to charting/svg.

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 )

Google+ photo

You are commenting using your Google+ 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: