Andrew-Reid/directionsBySeason.csv

## readme.md

      
    Raw
  

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

  
## directionsBySeason.csv

          
            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

## index.html
<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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
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
	<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>