Monday, December 19, 2011

google style gauges using d3.js

I’ve been playing lately with SVG visualization using the excellent d3.js library. I've originally chosen d3.js because I needed to create highly customized visualizations and d3.js is a great tool for dealing with lower level visualization.

some of the visualizations included gauges. In many of my products I use google's gauges, but in this case I needed to support offline mode, and google's charts require an internet connection. so I decided to go ahead and rebuild it using d3.js.

below are links to the code and example

note: the transition effect of the "pointer" still needs love, feel free to fork or otherwise contribute.


  1. Hi Tomer, I wanted to thank you for sharing. At what point is the label for the min and max written? I can't seem to see that - or is it automatic from d3?

    1. under "if (major == this.config.min || major == this.config.max)"

  2. Thanks ... exactly what i was looking for .

    i have created widget for the same . and now dealing with resize of the same .
    but not able to get my chart object . can you please help me ?

    resize: function (width, height) {
    var self = this,
    o = self.options;

    o.chartJson.chart.width(width).height(height).render(); /// This one is working nice with barchart or linechart which are ready to use in d3.js

    thanks again for great codes .

  3. Hi Tomer,
    i got solution for re sizing , i have removed it and readded chart on same div with new height and width .
    Thanks again for your excellent work .