I find myself wishing D3 had some of the things Raphael has and viceversa. Whenever I need to do visualization I use D3, and with drawing I use Raphael.

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.

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

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.

A video has been posted of the dashboard in a new blog post by my manager on the Netflix Tech Blog, so you can see it running: http://techblog.netflix.com/2011/12/making-netflix-api-more-resilient.html

The video itself is on Vimeo at http://vimeo.com/33359539

Yes, the circles move dynamically, though in our production environment with such large amounts of data the sizes move fairly gradually over the course of a day, so the movement doesn’t show very visibly in the short example video.

The circle size represents the volume of traffic, so by glancing at the dashboard one can easily see which circuits (code paths) are taking the most traffic.

The color of the circle represents the health on a 0-100% scale going from green through yellow to orange to red and the gradients in between.

This is calculated using the rolling 10-second window discussed in the blog post based on the various stats (Success, Latent, Timeout, Rejected, ShortCircuited, Failure).

The color gradient is linear while the size is size is exponential (since our range of low and high volume circuits is significant).

These are the definitions used for d3:

self.circuitBreakerCircleRadius = d3.scale.pow().exponent(0.5).domain([0, 400]).range(["5", maxRadiusForCircle]); // requests per second per host
self.circuitBreakerCircleYaxis = d3.scale.linear().domain([0, 400]).range(["30%", maxXaxisForCircle]);
self.circuitBreakerCircleXaxis = d3.scale.linear().domain([0, 400]).range(["30%", maxYaxisForCircle]);
self.circuitBreakerColorRange = d3.scale.linear().domain([10, 25, 40, 50]).range(["green", "#FFCC00", "#FF9900", "red"]);
self.circuitBreakerErrorPercentageColorRange = d3.scale.linear().domain([0, 10, 35, 50]).range(["grey", "black", "#FF9900", "red"]);

Hope this helps (and sorry about such a late reply).

Thanks a lot for following up on this and sharing the link to presentation.

Question about visualization on page 47 of the slide deck (http://www.slideshare.net/danieljacobson/techniques-for-scaling-the-netflix-api-qcon-sf):

Is it meant to show some kind of variance/standard deviation from some trailing average value so as to alert the viewer quickly about possible system health issues?

Thanks!
Dev

Thanks a lot for following up on this and sharing the link to presentation.

Question about visualization on page 47 of the slide deck (http://www.slideshare.net/danieljacobson/techniques-for-scaling-the-netflix-api-qcon-sf):

What is the formula used to compute size of the circles? Is it meant to show some kind of variance/standard deviation from some trailing average value so as to alert the viewer quickly about possible system health issues?

Also, do circles move?

Thanks!
Dev

That said, I do intend on eventually putting out some generic versions of what I’ve done, but unfortunately I’m fairly crushed for time right now so it’s on my list of things to do when time is calmer.

The short version of how it works is that I’m using HTML5 EventStream (http://dev.w3.org/html5/eventsource/) (natively supported in modern webkit browsers) to have a single streaming connection from the server and then the browser kicks off javascript events for each datapoint. Each of those is associated with a “widget” on the screen that has circles/sparklines/numbers that are all being updated asynchronously.

I have about 45 data points, each with a circle and sparkling and about 15 numbers, and the latency from backend servers to UI is sub-second. EventStream + d3.js is a great combo.

Hope this helps somewhat and good luck building your visualization … it’s fun stuff to build!

We are building something similar to “I was building a monitoring tool recently and used D3 to do visualizations with animated circles that grow/shrink in size and change colors”

Similar concept (real-time animation using circles/bubbles that grow/shrink based on some data) applied to a different problem.

Would love to see how you guys have done this.

Any chance to open source at least part of it?

Thanks!
Dev