D3 Gauge

by vitormosousa

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<div id='myDial' class='dial'></div>

CSS

.valtext{
    
    font-size:1.5em
}

.dial{
    height: 150px;
    width: 200px
}

JavaScript

// TODO:
//    Include the margin in width & height
//    Position the max value label
//    Position the title


var width = 200,
    height = 150,
    min = 0,
    max = 100,
    val = 45,
    tgt = 'svg_donut',
    title = 'Over Speed'

buildDial(0, 100, 10, 'myDial', 'rag')
buildDial(0, 100, 10, 'myDial2', 'rag')


function buildDial(min, max, val, tgt, color, title){

    if (color === 'rag'){

        var colourScale = d3.scale.linear()
        .domain([min, max])
        .range([d3.rgb("#f1C418"), d3.rgb("#E60000")]);    

    } else {

	     function colourScale(){return '#81A0FF'} 
    
    }
    
    var margin = {top: 20, right: 10, bottom: 20, left: 10};
    
	var vis = d3.select("#"+tgt).append("svg:svg");

    var myScale = d3.scale.linear().domain([min, max]).range([0, Math.PI]);

    var backarc = d3.svg.arc()
        .innerRadius(60)
        .outerRadius(100)
        .startAngle(myScale(val))
        .endAngle(myScale(max))

    var valarc = d3.svg.arc()
        .innerRadius(60)
        .outerRadius(100)
        .startAngle(myScale(min))
        .endAngle(myScale(val))

    vis.append("path")
        .attr("d", backarc)
        .attr("transform", "translate(" + width/2 + "," + (height - 20) +") rotate(-90)")
    	
        .attr('fill','#d9d9d9');

    vis.append("path")
        .attr("d", valarc)
        .attr("transform", "translate(" + width/2 + "," + (height - 20) +") rotate(-90)")
    	.attr('fill', function(){return colourScale(val)});

    vis.append("text")
        .text(val)
    	.attr("text-anchor", "middle")
        .attr('class', 'valtext')
        .attr("transform", "translate(" + (width / 2)  +','+ (height - 20) + ")")
    	.attr('font-size','1.5em')
    
    vis.append("text")
        .text(min)
    	.attr("text-anchor", "middle")
        .attr('class', 'mintext')
        .attr("transform", "translate(" + 20  +','+ height + ")")
    	.attr('font-size','0.9em')

  
    
}