[ Launch Inlet ]
Gist #4021959
Gist #4021889
Gist #4021856
Gist #4021514
Gist #4021405
Gist #4021391
Gist #4021353
Gist #3200444
-
-
Save roundrobin/4498456 to your computer and use it in GitHub Desktop.
Speedometer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{"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} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)+")"); | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment