Gauge chart using D3

d3.js transformation gauge
Amey picture Amey · Feb 21, 2014 · Viewed 15.3k times · Source

I've been trying to build a gauge using d3 and ive managed to hack up something that meets the visual requirements http://bl.ocks.org/ameyms/9140907

This is however a very very hacky solution since ive positioned the needle by trial and error and the whole thing breaks if height and width are assigned percentage values. So how do I position it?

Also, how I can make the needle rotate?

Any ideas?

Answer

Amey picture Amey · Dec 5, 2014

For anyone coming here looking for answers, I have created a demo of gauge using D3 here

Related questions

Show data on mouseover of circle

I have a set of data that I am plotting in a scatter. When I mouseover one of the circles I would like it to popup with data (like x, y values, maybe more). Here is what I tried using: …

Read More
How can I remove or replace SVG content?

I have a piece of JavaScript code which creates (using D3.js) an svg element which contains a chart. I want to update the chart based on new data coming from a web service using AJAX, the problem is that …

Read More
Resize svg when window is resized in d3.js

I'm drawing a scatterplot with d3.js. With the help of this question : Get the size of the screen, current web page and browser window I'm using this answer : var w = window, d = document, e = d.documentElement, g = d.getElementsByTagName(…

Read More