Speedometer

_.md

[ Launch Inlet ]
Gist #4498456 [ 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 = -314;

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) / 2.28,
    innerRadius = outerRadius * 0.82944,
    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 pathGroup = chart_group.append("svg:g")
.attr("transform","translate("+[x,y]+")")
.attr("class","group");

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

var bb = path.node().getBBox();
var boxWidth = outerRadius ;
var boxHeight = outerRadius * 0.8;

var bb = pathGroup.node().getBBox();
var width = bb.width;
var height = bb.height;

var boxHeight = boxHeight;
var boxWidth  = boxWidth;

var currentSF = 1;

var maxWidth = ( boxWidth / width );

var maxHeight = (boxHeight / height);
var max = Math.min(maxWidth, maxHeight);

var scaling = (currentSF * max);

var old_transform = pathGroup.attr("transform")      


pathGroup.attr("transform",old_transform+"scale("+scaling+")")
console.log(pathGroup.attr("transform"),bb)
		
var bb = pathGroup.node().getBoundingClientRect();
//pathGroup.attr("transform","translate("+[x,y]+")scale(1)");
console.log(bb)
path.attr("transform","translate("+[-10,0]+")rotate("+(needleScale(40))+" "+(0)+" "+(outerRadius/9)+")");