|
var numberOfBars = 80; |
|
generateDonut(generateData()); |
|
|
|
function generateData(){ |
|
var data = []; |
|
for(var x = 0; x < numberOfBars; x ++){ |
|
data.push(Math.random()*400 - 120) |
|
} |
|
return data; |
|
} |
|
|
|
function generateDonut(data){ |
|
var divH = parseInt( d3.select("#chartArea").style("height") ); |
|
var divW = parseInt( d3.select("#chartArea").style("width") ); |
|
|
|
var margin = {top: 10, right: 10, bottom: 10, left: 10}; |
|
var w = divW - margin.left - margin.right; |
|
h = divH - margin.top - margin.bottom; |
|
smallestDim = h < w ? h : w; |
|
|
|
var outerRadius = smallestDim / 4.5, |
|
innerRadius = outerRadius / 1.3; |
|
|
|
var pie = d3.layout.pie() |
|
.value(function(d){ return 10; }) |
|
.padAngle(.010); |
|
|
|
var arc = d3.svg.arc() |
|
.padRadius(outerRadius) |
|
.innerRadius(innerRadius); |
|
|
|
var lines = []; |
|
var valueline = d3.svg.line() |
|
.interpolate("step-after") //step-after looks cool |
|
.x(function(d) { return d[0]; }) |
|
.y(function(d) { return d[1]; }); |
|
|
|
var svg = d3.select("#chartArea").append("svg") |
|
.attr("width", w) |
|
.attr("height", h) |
|
.append("g") |
|
.attr("transform", "translate(" + w / 2 + "," + (h) / 2 + ")"); |
|
|
|
svg.selectAll("path") |
|
.data(pie(data)) |
|
.enter().append("path") |
|
.each(function(d) { |
|
d.outerRadius = innerRadius + d.data |
|
//for the lines |
|
var alpha = (d.startAngle + d.endAngle)/2; |
|
var l = d.outerRadius > outerRadius ? d.outerRadius + 20 : d.outerRadius - 20 |
|
lines.push([alpha, l]) |
|
}) |
|
.attr("d", arc) |
|
.style('fill', 'none') |
|
//.style('stroke', 'orange') |
|
//.style('stroke-width', '1px'); |
|
|
|
|
|
drawTrace(lines); |
|
function refactor(lines){ |
|
lines = lines.slice().sort(function(a, b){ |
|
return a[0] - b[0]; |
|
}) |
|
|
|
for(i in lines){ |
|
var alpha = lines[i][0]; |
|
var l = lines[i][1]; |
|
var x = l * Math.sin(alpha) |
|
var y = l * Math.cos(alpha) |
|
lines[i] = [x,-y] |
|
} |
|
return lines |
|
} |
|
function drawTrace(lines){ |
|
lines = refactor(lines); |
|
svg.append("path") |
|
.attr("class", "line") |
|
.style("fill", "none") |
|
.style("stroke-width", "2.5px") |
|
.style("stroke", "black") |
|
.attr("d", valueline(lines)); |
|
} |
|
|
|
|
|
setInterval(function(){ |
|
var EASE = 'linear'; |
|
var DURATION = 1000; |
|
lines = []; //empty the array of lines |
|
|
|
svg.selectAll('path') |
|
.data(pie(generateData())) |
|
.transition() |
|
.duration(DURATION) |
|
.ease(EASE) |
|
.each(function (d) { |
|
d.outerRadius = innerRadius + d.data; |
|
var alpha = (d.startAngle + d.endAngle)/2; |
|
var l = d.outerRadius > outerRadius ? d.outerRadius + 20 : d.outerRadius - 20 |
|
lines.push([alpha, l]) |
|
}) |
|
.attr('d', arc) |
|
|
|
|
|
lines = refactor(lines); |
|
svg.selectAll(".line") |
|
.transition() |
|
.duration(DURATION) |
|
.ease(EASE) |
|
.attr("d", valueline(lines)); |
|
}, 1200) |
|
} |
|
|
|
|
|
|
