tomgp · July 6, 2018 14:49
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <html>
 <head>
 <style>
 body{
  font-family:sans-serif;
 }
 </style>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
 </head>

 <body>
 <svg></svg>
 </body>
 <script>
 const rawData = [
  {year:2018, data:[15,7,35]}, 
  {year:2017, data:[10,20,30]}, 
  {year:2016, data:[20,20,30]},
  {year:2015, data:[5,40,3]},
  {year:2014, data:[25,12,9]},
 ];

 const colours = [ '#000000','#EB4125','#0031F5' ];

 const width=600, height=600;

 const stackSegments = radialStackLayout(rawData, Math.min(width,height)/2);

 const arc = d3.arc();

 d3.select('svg')
  .attr('width', width)
  .attr('height', height)
  .append('g')
    .attr('transform',`translate(${width/2},${height/2})`)
  .selectAll('path.segment')
    .data(stackSegments)
  .enter()
    .append('path')
    .attr('d', d=>arc(d))
    .attr('fill', d=>d.fill);

 /* the radialStackLayout function converts the data into a set of arc segment definitions */

 function radialStackLayout(data, radius){ 
  const angularScale = d3.scaleLinear()
    .range([0, 2*Math.PI])  
    .domain([0, data.length])

  const biggestStack = data.reduce(
    (maxValue, currentArray) => {
      return Math.max(d3.sum(currentArray.data), maxValue)
    },0);

  const stackScale = d3.scaleLinear()
    .range([0, radius])
    .domain([0, biggestStack]); 

  const layoutElements = [];

  data.forEach((d, i)=>{
    let stackHeight = 0;
    d.data.forEach((datum,j)=>{    
      layoutElements.push({
          data: { year: d.year, value: datum }, // retain the original data potentially useful for things like tooltips
          innerRadius: stackHeight,
          outerRadius: stackHeight + stackScale(datum),
          startAngle: angularScale(i),
          endAngle: angularScale(i+1),
          fill:colours[j]
        });
      stackHeight = stackHeight + stackScale(datum);
    })
  });

  return layoutElements;
 }

 d3.select(self.frameElement).style("height", height + "px");
 </script>
 </html>
	<html>
	<head>
	<style>
	body{
	font-family:sans-serif;
	}
	</style>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
	</head>

	<body>
	<svg></svg>
	</body>
	<script>
	const rawData = [
	{year:2018, data:[15,7,35]},
	{year:2017, data:[10,20,30]},
	{year:2016, data:[20,20,30]},
	{year:2015, data:[5,40,3]},
	{year:2014, data:[25,12,9]},
	];

	const colours = [ '#000000','#EB4125','#0031F5' ];

	const width=600, height=600;

	const stackSegments = radialStackLayout(rawData, Math.min(width,height)/2);

	const arc = d3.arc();

	d3.select('svg')
	.attr('width', width)
	.attr('height', height)
	.append('g')
	.attr('transform',`translate(${width/2},${height/2})`)
	.selectAll('path.segment')
	.data(stackSegments)
	.enter()
	.append('path')
	.attr('d', d=>arc(d))
	.attr('fill', d=>d.fill);

	/* the radialStackLayout function converts the data into a set of arc segment definitions */

	function radialStackLayout(data, radius){
	const angularScale = d3.scaleLinear()
	.range([0, 2*Math.PI])
	.domain([0, data.length])

	const biggestStack = data.reduce(
	(maxValue, currentArray) => {
	return Math.max(d3.sum(currentArray.data), maxValue)
	},0);

	const stackScale = d3.scaleLinear()
	.range([0, radius])
	.domain([0, biggestStack]);

	const layoutElements = [];

	data.forEach((d, i)=>{
	let stackHeight = 0;
	d.data.forEach((datum,j)=>{
	layoutElements.push({
	data: { year: d.year, value: datum }, // retain the original data potentially useful for things like tooltips
	innerRadius: stackHeight,
	outerRadius: stackHeight + stackScale(datum),
	startAngle: angularScale(i),
	endAngle: angularScale(i+1),
	fill:colours[j]
	});
	stackHeight = stackHeight + stackScale(datum);
	})
	});

	return layoutElements;
	}

	d3.select(self.frameElement).style("height", height + "px");
	</script>
	</html>