Old school D3 from simpler times

All examples By author By category About

Andrew-Reid

Full window Github gist

Radial Bar Chart/Wind Rose/Compass Chart

Example of creation and functionality of a d3.js wind rose style chart with animated update/transition (on click).

<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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js