Example of creation and functionality of a d3.js wind rose style chart with animated update/transition (on click).
Last active
October 13, 2016 01:17
-
-
Save Andrew-Reid/a9b440b4ccb89dd2af96 to your computer and use it in GitHub Desktop.
Radial Bar Chart/Wind Rose/Compass Chart
This file contains hidden or 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
| direction | Spring | Summer | Fall | Winter | |
|---|---|---|---|---|---|
| North | 0.4 | 0.3 | 0.2 | 0.35 | |
| East | 0.2 | 0.2 | 0.3 | 0.24 | |
| South | 0.1 | 0.2 | 0.4 | 0.2 | |
| West | 0.25 | 0.2 | 0.2 | 0.3 |
This file contains hidden or 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
| <html> | |
| <head> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="chart"> </div> | |
| <script> | |
| var margin = {top: 50, right: 20, bottom: 50, left: 20}; | |
| var width = 600 - margin.left - margin.right; | |
| var height = 600 - margin.top - margin.bottom; | |
| var cx = width/2; | |
| var cy = height/2; | |
| var radius = Math.min(cx,cy); | |
| var dataSeries = ["Spring","Summer","Fall","Winter"]; | |
| var i = 0; | |
| var scale = d3.scale.linear() | |
| .range([0,radius]) | |
| .domain([0,0.5]) // Hard coded domain (input data range). | |
| //Arc for pie chart | |
| var arc = d3.svg.arc() | |
| .outerRadius(function(d) { return scale(d.data[dataSeries[i]]) }) | |
| .innerRadius(0) | |
| .startAngle(function(d) { return d.startAngle - Math.PI/4; }) | |
| .endAngle(function(d) { return d.endAngle - Math.PI/4; }); | |
| // Arc for text | |
| var textArc = d3.svg.arc() | |
| .outerRadius(function(d) { return scale(d) + 2; }) | |
| .innerRadius(function(d) { return scale(d) + 1; }) | |
| .startAngle(0) | |
| .endAngle(Math.PI * 2); | |
| // Piechart layout, all equal width wedges | |
| var pie = d3.layout.pie() | |
| .sort(null) | |
| .value(function(d) { return 1; }); | |
| var svg = d3.select("#chart").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + cx + "," + cy + ")"); | |
| d3.csv("directionsBySeason.csv", function(error, data) { | |
| var g = svg.selectAll(".arc") | |
| .data(pie(data)) | |
| .enter().append("g") | |
| .attr("class", "arc"); | |
| var wedge = g.append("path") | |
| .attr("d", arc) | |
| .style("fill","steelblue") | |
| .style("stroke","white") | |
| .on("click",cycle); | |
| //Cycle through the data | |
| function cycle() { | |
| i++; | |
| //reset counter if at limit | |
| if (i == 4) { i = 0; } | |
| //Show appropriate data | |
| pie.value(function(d) { console.log(d[dataSeries[i]]); return d[dataSeries[i]]; }) | |
| wedge.transition().duration(1000).attr("d",arc); | |
| } | |
| // Tick/Grid data | |
| var ticks = [0.5,0.3]; | |
| var tickLabels = ["50% of total","30% of total"]; | |
| //Add the circles for each tick | |
| var grid = svg.selectAll(".circle") | |
| .data(ticks) | |
| .enter().append("circle") | |
| .attr("r", function(d) { return scale(d); }) | |
| .attr("id", function(d,i) { return "tick" + i; }) | |
| .style("stroke-dasharray", ("3, 3")) | |
| .style("fill","none") | |
| .style("stroke","#333"); | |
| //Add the paths for the text | |
| svg.selectAll(".label") | |
| .data(ticks) | |
| .enter().append("path") | |
| .append("path") | |
| .attr("d",textArc) | |
| .attr("id",function(d,i) { return "tic" + i; } ) | |
| ; | |
| //And add the text | |
| svg.selectAll(".label") | |
| .data(ticks) | |
| .enter().append("text") | |
| .style("font-size",20) | |
| .style("font-weight",200) | |
| .style("stroke-width",0) | |
| .style("fill","#333") | |
| .append("textPath") | |
| .attr("xlink:href",function(d,i) { return "#tic" + i; } ) | |
| .text(function(d,i) { return tickLabels[i];} ) | |
| .attr("startOffset",function(d,i){return "16%";}); | |
| }); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment