#Animated Art? I wanted to create the simplest form of the modified donut pie visualisation, but then I got carried away with animation and the traces...
Try changing the interpolation from cardinal-closed to step-after, it will be very appealing. And toying around with the delay timing and such.
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Animated Art</title> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="chartArea"> | |
| </div> | |
| <script src="main_donut.js"></script> | |
| </body> | |
| </html> |
| 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) | |
| } | |
| body{ | |
| background-color: rgba(235, 232, 193, 0.24902); | |
| } | |
| #chartArea { | |
| border: 2px dashed black; | |
| height: 1000px; | |
| width: 1000px; | |
| } |
