Speedometer

_.md

[ Launch Inlet ]
Gist #4021959
Gist #4021889
Gist #4021856
Gist #4021514
Gist #4021405
Gist #4021391
Gist #4021353
Gist #3200444

config.json

{"description":"Speedometer","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.33170894116053423,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"hidepanel":false}

inlet.js

var needleControl = -95;

if(needleControl >= 100){
	needleControl = 100;
}
if(needleControl <= -100){
	needleControl = -100;
}
var needleScale = d3.scale.linear().domain([-100, 100]).range([-71,71]);

var width = 400;
var height = 400;
// Play with the values (Add new items or change the values)!!!!!
//
var data = [50,50,50]; 

//No need to change from here

var chart_group = d3.select("svg");

var outerRadius = Math.min(width, height) / 3,
    innerRadius = outerRadius * 0.768,
    color = ["#e24319","#aea420","#338d96"],
    donut = d3.layout.pie(),
    arc = d3.svg.arc()
            .innerRadius(innerRadius)
            .outerRadius(outerRadius)
            .startAngle(0)
            .endAngle(0)
            ;
var sum = d3.sum(data);
var scale = d3.scale.linear().domain([0, 100]).range([0,180]);
var sum = d3.sum(data);


var x = outerRadius+111;
var y = outerRadius+74;

var arcs = chart_group.selectAll("g.arc")
    .data(data)
  .enter()
    .append("svg:g")
    .attr("transform", "translate(" + ( x ) + "," + ( y )+ ")");

var sumRadiant = -90 * ( Math.PI / 180 );

arcs.append("svg:path")
    .attr("fill", function(d, i) { return color[i]; })
    .attr("d", function(d,i) {
      		var percentage_val = (d / sum) * 100;
      		var percentage_in_angle = scale(percentage_val);
      		var val_to_radiant = percentage_in_angle * (Math.PI / 180 )
		  
          arc
          .startAngle(sumRadiant)
          .endAngle(sumRadiant+val_to_radiant) 
        
          sumRadiant += val_to_radiant;
              
        return arc();
});


chart_group.append("svg:circle")
	.attr("r",outerRadius+10)
	.attr("cx",x)
	.attr("cy", y)
	.attr("fill","none")
	.attr("stroke","black")
	.attr("stroke-width",2);

chart_group.append("svg:circle")
	.attr("r",outerRadius/16)
	.attr("cx", x)
	.attr("cy", y + outerRadius/5)
	.attr("fill","black")
	.attr("stroke","black")
	.attr("stroke-width",2);



var path = chart_group.append('svg:path')
.attr("fill","black")
.attr("d","m0,0 l10,-100 l10,100 l-10-5 z")

var bb = path.node().getBBox();

path.attr("transform","translate("+[x-10,y+20]+")rotate("+(needleScale(needleControl))+" "+(10)+" "+(7)+")");