tomshanley · July 31, 2017 21:30
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/d3-spiral-heatmap.js b/d3-spiral-heatmap.js
 // A spiral heatmap
 // The following options are available
 // radius: radius of the overall plot, not including any labels. Default 250
 // holeRadiusProportion: the proportion (0 to 1) of the radius (see above) that is left as a hole. Default 0.
 // arcsPerCoil: a 'coil' is one revolution of the spiral.  This sets how many arcs (or arcs) you want per coil. Typically this would
 //                  be set according to the periodicity of the data. For example, 12 for months per year, 24 for hours per day, etc
 // coilPadding: the proportion (0 to 1) of the coil width that is used for padding between coils. Useful for making the spiral very noticeable
 // arcLabel: the field name to use for the labels around the circumference
 // coilLabel: the field name to use for the labels at the beginning of each coil

 function spiralHeatmap () {
  // constants
  const radians = 0.0174532925

  // All options that are accessible to caller
  // Default values
  var radius = 250
  var holeRadiusProportion = 0.3 // proportion of radius
  var arcsPerCoil = 12 // assuming months per year
  var coilPadding = 0 // no padding
  var arcLabel = '' // no labels
  var coilLabel = '' // no labels
  var startAngle = 0;

  function chart (selection) {
    selection.each(function (data) {
      const arcAngle = 360 / arcsPerCoil
      const labelRadius = radius + 20

      var arcLabelsArray = []

      for (var i = 0; i < arcsPerCoil; i++) {
        arcLabelsArray.push(i)
      }

      // Create/update the x/y coordinates for the vertices and control points for the paths
      // Stores the x/y coordinates on the data
      updatePathData(data)

      let thisSelection = d3
        .select(this)
        .append('g')
        .attr('class', 'spiral-heatmap')

      var arcLabelsG = thisSelection
        .selectAll('.arc-label')
        .data(arcLabelsArray)
        .enter()
        .append('g')
        .attr('class', 'arc-label')

      arcLabelsG
        .append('text')
        .text(function (d) {
          return data[d][arcLabel]
        })
        .attr('x', function (d, i) {
          let labelAngle = i * arcAngle + arcAngle / 2
          return x(labelAngle, labelRadius)
        })
        .attr('y', function (d, i) {
          let labelAngle = i * arcAngle + arcAngle / 2
          return y(labelAngle, labelRadius)
        })
        .style('text-anchor', function (d, i) {
          return i < arcLabelsArray.length / 2 ? 'start' : 'end'
        })

      arcLabelsG
        .append('line')
        .attr('x2', function (d, i) {
          let lineAngle = i * arcAngle
          let lineRadius = chartRadius + 10
          return x(lineAngle, lineRadius)
        })
        .attr('y2', function (d, i) {
          let lineAngle = i * arcAngle
          let lineRadius = chartRadius + 10
          return y(lineAngle, lineRadius)
        })

      var arcs = thisSelection
        .selectAll('.arc')
        .data(data)
        .enter()
        .append('g')
        .attr('class', 'arc')

      arcs.append('path').attr('d', function (d) {
        // start at vertice 1
        let start = 'M ' + d.x1 + ' ' + d.y1
        // inner curve to vertice 2
        let side1 =
          ' Q ' +
          d.controlPoint1x +
          ' ' +
          d.controlPoint1y +
          ' ' +
          d.x2 +
          ' ' +
          d.y2
        // straight line to vertice 3
        let side2 = 'L ' + d.x3 + ' ' + d.y3
        // outer curve vertice 4
        let side3 =
          ' Q ' +
          d.controlPoint2x +
          ' ' +
          d.controlPoint2y +
          ' ' +
          d.x4 +
          ' ' +
          d.y4
        // combine into string, with closure (Z) to vertice 1
        return start + ' ' + side1 + ' ' + side2 + ' ' + side3 + ' Z'
      })

      // create coil labels on the first arc of each coil
      coilLabels = arcs
        .filter(function (d) {
          return d.arcNumber == 0
        })
        .raise()

      coilLabels
        .append('path')
        .attr('id', function (d) {
          return 'path-' + d[coilLabel]
        })
        .attr('d', function (d) {
          // start at vertice 1
          let start = 'M ' + d.x1 + ' ' + d.y1
          // inner curve to vertice 2
          let side1 =
            ' Q ' +
            d.controlPoint1x +
            ' ' +
            d.controlPoint1y +
            ' ' +
            d.x2 +
            ' ' +
            d.y2
          return start + side1
        })
        .style('opacity', 0)

      coilLabels
        .append('text')
        .attr('class', 'coil-label')
        .attr('x', 3)
        .attr('dy', -4)
        .append('textPath')
        .attr('xlink:href', function (d) {
          return '#path-' + d[coilLabel]
        })
        .text(function (d) {
          return d[coilLabel]
        })
    })

    function updatePathData (data) {
      let holeRadius = radius * holeRadiusProportion
      let arcAngle = 360 / arcsPerCoil
      let dataLength = data.length
      let coils = Math.ceil(dataLength / arcsPerCoil) // number of coils, based on data.length / arcsPerCoil
      let coilWidth = chartRadius * (1 - holeRadiusProportion) / (coils + 1) // remaining chartRadius (after holeRadius removed), divided by coils + 1. I add 1 as the end of the coil moves out by 1 each time

      data.forEach(function (d, i) {
        let coil = Math.floor(i / arcsPerCoil)
        let position = i - coil * arcsPerCoil
        let startAngle = position * arcAngle
        let endAngle = (position + 1) * arcAngle
        let startInnerRadius = holeRadius + i / arcsPerCoil * coilWidth
        let startOuterRadius =
          holeRadius +
          i / arcsPerCoil * coilWidth +
          coilWidth * (1 - coilPadding)
        let endInnerRadius = holeRadius + (i + 1) / arcsPerCoil * coilWidth
        let endOuterRadius =
          holeRadius +
          (i + 1) / arcsPerCoil * coilWidth +
          coilWidth * (1 - coilPadding)

        // vertices of each arc
        d.x1 = x(startAngle, startInnerRadius)
        d.y1 = y(startAngle, startInnerRadius)
        d.x2 = x(endAngle, endInnerRadius)
        d.y2 = y(endAngle, endInnerRadius)
        d.x3 = x(endAngle, endOuterRadius)
        d.y3 = y(endAngle, endOuterRadius)
        d.x4 = x(startAngle, startOuterRadius)
        d.y4 = y(startAngle, startOuterRadius)

        // CURVE CONTROL POINTS
        let midAngle = startAngle + arcAngle / 2
        let midInnerRadius =
          holeRadius + (i + 0.5) / arcsPerCoil * coilWidth
        let midOuterRadius =
          holeRadius +
          (i + 0.5) / arcsPerCoil * coilWidth +
          coilWidth * (1 - coilPadding)

        // MID POINTS, WHERE THE CURVE WILL PASS THRU
        d.mid1x = x(midAngle, midInnerRadius)
        d.mid1y = y(midAngle, midInnerRadius)
        d.mid2x = x(midAngle, midOuterRadius)
        d.mid2y = y(midAngle, midOuterRadius)

        d.controlPoint1x = (d.mid1x - 0.25 * d.x1 - 0.25 * d.x2) / 0.5
        d.controlPoint1y = (d.mid1y - 0.25 * d.y1 - 0.25 * d.y2) / 0.5
        d.controlPoint2x = (d.mid2x - 0.25 * d.x3 - 0.25 * d.x4) / 0.5
        d.controlPoint2y = (d.mid2y - 0.25 * d.y3 - 0.25 * d.y4) / 0.5

        d.arcNumber = position
        d.coilNumber = coil
      })

      return data
    }

    function x (angle, radius) {
      // change to clockwise
      let a = 360 - angle
      // start from 12 o'clock
      a = a + 180 - startAngle;
      return radius * Math.sin(a * radians)
    }

    function y (angle, radius) {
      // change to clockwise
      let a = 360 - angle
      // start from 12 o'clock
      a = a + 180 - startAngle;
      return radius * Math.cos(a * radians)
    }

    function chartWH (r) {
      return r * 2
    }
  }

  chart.radius = function (value) {
    if (!arguments.length) return radius
    radius = value
    return chart
  }

  chart.holeRadiusProportion = function (value) {
    if (!arguments.length) return holeRadiusProportion
    holeRadiusProportion = value
    return chart
  }

  chart.arcsPerCoil = function (value) {
    if (!arguments.length) return arcsPerCoil
    arcsPerCoil = value
    return chart
  }

  chart.coilPadding = function (value) {
    if (!arguments.length) return coilPadding
    coilPadding = value
    return chart
  }

  chart.arcLabel = function (value) {
    if (!arguments.length) return arcLabel
    arcLabel = value
    return chart
  }

  chart.coilLabel = function (value) {
    if (!arguments.length) return coilLabel
    coilLabel = value
    return chart
  }

  chart.startAngle = function (value) {
    if (!arguments.length) return startAngle
    startAngle = value
    return chart
  }

  return chart
 }
diff --git a/index.html b/index.html
 <head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
    <script src="d3-spiral-heatmap.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">

    <style>
        body {
            font-family: 'Catamaran', sans-serif;
            margin: 20px;
            top: 20px;
            right: 20px;
            bottom: 20px;
            left: 20px;
        }

        line {
            stroke: #E9E9E9;
        }

        .coil-label {
            fill: #000;
            font-size: 12px;
        }
        /*.arc path {
            stroke: #FFF;
        }*/
    </style>
 </head>

 <body>
    <div id="title">
        <h1>Northern hemisphere sea ice extent: 1978 to 2017</h1>
        <p>An example of a resuable spiral heatmap showing the extent of the sea ice in the northern hemisphere.</p>
        <p>Low sea ice is starting earlier in July, and lasting longer into October and November.</p>
    </div>
    <div id="legend"></div>
    <div id="chart"></div>
    <div id="source">
        <p>Source: http://nsidc.org/data/nsidc-0081.html and http://nsidc.org/data/nsidc-0051.html</p>
    </div>

    <script>
        //SVG dimensions
        const radians = 0.0174532925
        const chartWidth = 750
        const chartHeight = chartWidth
        const chartRadius = chartWidth / 2
        const margin = { "top": 40, "bottom": 40, "left": 40, "right": 40 }

        let dateParse = d3.timeParse("%d/%m/%Y")
        let dateFormat = d3.timeFormat("%d%m");// returns date string ddmm, eg 2902
        let dayOfYear = d3.timeFormat("%j");

        let startAngle = 0;

        let arcLabels = [
            { "month": "Jan", "start": 0, "days": 31 },
            { "month": "Feb", "start": 31, "days": 28 },
            { "month": "Mar", "start": 59, "days": 31 },
            { "month": "Apr", "start": 90, "days": 30 },
            { "month": "May", "start": 120, "days": 31 },
            { "month": "Jun", "start": 151, "days": 30 },
            { "month": "Jul", "start": 181, "days": 31 },
            { "month": "Aug", "start": 212, "days": 31 },
            { "month": "Sep", "start": 243, "days": 30 },
            { "month": "Oct", "start": 273, "days": 31 },
            { "month": "Nov", "start": 304, "days": 30 },
            { "month": "Dec", "start": 334, "days": 31 }
        ]

        //Colour scale
        var colour = d3.scaleSequential(d3.interpolateSpectral);

        //Load the data, nest, sort and draw charts
        d3.csv("sea-ice-extent.csv", convertTextToNumbers, function (error, data) {
            if (error) { throw error; };

            colour.domain(d3.extent(data, function (d) { return d.extent; }));

            let chartData = createDataPerDay(data);

            startAngle = ((data[0].dayOfYear / 365) * 360) - 1;

            //set the options for the sprial heatmap
            let heatmap = spiralHeatmap()
                .radius(chartRadius)
                .holeRadiusProportion(0.1)
                .arcsPerCoil(365)
                .startAngle(startAngle)
                .coilPadding(0.1)
            //.coilLabel("year")

            //CREATE SVG AND A G PLACED IN THE CENTRE OF THE SVG
            const div = d3.select("#chart").append("div")

            const svg = div.append("svg")
                .attr("width", chartWidth + margin.left + margin.right)
                .attr("height", chartHeight + margin.top + margin.bottom);

            const g = svg.append("g")
                .attr("transform", "translate("
                + (margin.left + chartRadius)
                + ","
                + (margin.top + chartRadius) + ")");

            g.datum(chartData)
                .call(heatmap);

            g.selectAll(".arc").selectAll("path")
                .style("fill", function (d) { return colour(d.extent); })


            d3.selectAll(".arc-label").remove();

            var arcLabelsG = g.selectAll('.arc-label')
                .data(arcLabels)
                .enter()
                .append('g')
                .attr('class', 'arc-label')

            let dayAngle = 360 / 365;

            arcLabelsG
                .append('text')
                .text(function (d) {
                    return d.month
                })
                .attr('x', function (d) {
                    let monthAngle = 360 * (d.days / 365);
                    let labelAngle = (d.start * dayAngle) + (monthAngle / 2)
                    let labelRadius = chartRadius + 20;
                    return labelX(labelAngle, labelRadius)
                })
                .attr('y', function (d) {
                    let monthAngle = 360 * (d.days / 365);
                    let labelAngle = (d.start * dayAngle) + (monthAngle / 2)
                    let labelRadius = chartRadius + 20;
                    return labelY(labelAngle, labelRadius)
                })
                .style('text-anchor', function (d, i) {
                    return i < arcLabels.length / 2 ? 'start' : 'end'
                })

            arcLabelsG
                .append('line')
                .attr('x2', function (d, i) {
                    let lineAngle = d.start * dayAngle
                    let lineRadius = chartRadius + 40
                    return labelX(lineAngle, lineRadius)
                })
                .attr('y2', function (d, i) {
                    let lineAngle =  d.start * dayAngle
                    let lineRadius = chartRadius + 40
                    return labelY(lineAngle, lineRadius)
                })


            //DRAW LEGEND

            const legendWidth = chartRadius;
            const legendHeight = 20;
            const legendPadding = 40;

            const units = "million square km"

            var legendSVG = d3.select("#legend")
                .append("svg")
                .attr("width", legendWidth + legendPadding + legendPadding)
                .attr("height", legendHeight + legendPadding + legendPadding);

            var defs = legendSVG.append("defs");

            var legendGradient = defs.append("linearGradient")
                .attr("id", "linear-gradient")
                .attr("x1", "0%")
                .attr("y1", "0%")
                .attr("x2", "100%")
                .attr("y2", "0%");

            let noOfSamples = 20;
            let dataRange = colour.domain()[1] - colour.domain()[0];
            let stepSize = dataRange / noOfSamples;

            for (i = 0; i < noOfSamples; i++) {
                legendGradient.append("stop")
                    .attr("offset", (i / (noOfSamples - 1)))
                    .attr("stop-color", colour(colour.domain()[0] + (i * stepSize)));
            }

            var legendG = legendSVG.append("g")
                .attr("class", "legendLinear")
                .attr("transform", "translate(" + legendPadding + "," + legendPadding + ")");

            legendG.append("rect")
                .attr("x", 0)
                .attr("y", 0)
                .attr("width", legendWidth)
                .attr("height", legendHeight)
                .style("fill", "url(#linear-gradient)");

            legendG.append("text")
                .text("Low (" + colour.domain()[0] + " " + units + ")")
                .attr("x", 0)
                .attr("y", legendHeight - 35)
                .style("font-size", "12px");

            legendG.append("text")
                .text("High (" + colour.domain()[1] + " " + units + ")")
                .attr("x", legendWidth)
                .attr("y", legendHeight - 35)
                .style("text-anchor", "end")
                .style("font-size", "12px");


        });


        //Returns a new array, which a data point per day, except for 29th Feb.
        //Where a day is missing in the original data, use the average from the preceding and next day.
        function createDataPerDay(data) {

            let day = data[0].date;
            let lastDay = data[data.length - 1].date;
            let newData = []

            let i = 0;

            for (day; day <= lastDay; day.setDate(day.getDate() + 1)) {

                //skip 29th Feb in new dataset
                if (dateFormat(day) != "2902") {

                    let datum = {};
                    datum.date = new Date(day);
                    let compareDate = new Date(data[i].date);

                    if (compareDate.getTime() === day.getTime()) {

                        datum.extent = data[i].extent;
                        datum.source = "original";

                        //move to the next day in the original data, unless it is 29th Feb
                        if (i < (data.length - 1)) {
                            i = (data[i + 1].month == 2 && data[i + 1].day == 29) ? i + 2 : i + 1;
                        }

                    } else {

                        datum.extent = (data[i - 1].extent + data[i + 1].extent) / 2;
                        datum.source = "avg";

                    };

                    newData.push(datum);

                }

            }

            return newData;

        };

        function labelX(angle, radius) {
            // change to clockwise
            let a = 360 - angle
            // start from 12 o'clock
            a = a + 180;
            return radius * Math.sin(a * radians)
        }

        function labelY(angle, radius) {
            // change to clockwise
            let a = 360 - angle
            // start from 12 o'clock
            a = a + 180;
            return radius * Math.cos(a * radians)
        }

        function convertTextToNumbers(d) {
            let dateString = d.day + "/" + d.month + "/" + d.year
            d.date = dateParse(dateString);
            d.extent = +d.extent;
            d.year = +d.year;
            d.month = +d.month;
            d.day = +d.day;
            d.dayOfYear = +dayOfYear(d.date);
            return d;
        };
    </script>
 </body>
diff --git a/sea-ice-extent.csv b/sea-ice-extent.csv
diff --git a/thumbnail.png b/thumbnail.png
	// A spiral heatmap
	// The following options are available
	// radius: radius of the overall plot, not including any labels. Default 250
	// holeRadiusProportion: the proportion (0 to 1) of the radius (see above) that is left as a hole. Default 0.
	// arcsPerCoil: a 'coil' is one revolution of the spiral. This sets how many arcs (or arcs) you want per coil. Typically this would
	// be set according to the periodicity of the data. For example, 12 for months per year, 24 for hours per day, etc
	// coilPadding: the proportion (0 to 1) of the coil width that is used for padding between coils. Useful for making the spiral very noticeable
	// arcLabel: the field name to use for the labels around the circumference
	// coilLabel: the field name to use for the labels at the beginning of each coil

	function spiralHeatmap () {
	// constants
	const radians = 0.0174532925

	// All options that are accessible to caller
	// Default values
	var radius = 250
	var holeRadiusProportion = 0.3 // proportion of radius
	var arcsPerCoil = 12 // assuming months per year
	var coilPadding = 0 // no padding
	var arcLabel = '' // no labels
	var coilLabel = '' // no labels
	var startAngle = 0;

	function chart (selection) {
	selection.each(function (data) {
	const arcAngle = 360 / arcsPerCoil
	const labelRadius = radius + 20

	var arcLabelsArray = []

	for (var i = 0; i < arcsPerCoil; i++) {
	arcLabelsArray.push(i)
	}

	// Create/update the x/y coordinates for the vertices and control points for the paths
	// Stores the x/y coordinates on the data
	updatePathData(data)

	let thisSelection = d3
	.select(this)
	.append('g')
	.attr('class', 'spiral-heatmap')

	var arcLabelsG = thisSelection
	.selectAll('.arc-label')
	.data(arcLabelsArray)
	.enter()
	.append('g')
	.attr('class', 'arc-label')

	arcLabelsG
	.append('text')
	.text(function (d) {
	return data[d][arcLabel]
	})
	.attr('x', function (d, i) {
	let labelAngle = i * arcAngle + arcAngle / 2
	return x(labelAngle, labelRadius)
	})
	.attr('y', function (d, i) {
	let labelAngle = i * arcAngle + arcAngle / 2
	return y(labelAngle, labelRadius)
	})
	.style('text-anchor', function (d, i) {
	return i < arcLabelsArray.length / 2 ? 'start' : 'end'
	})

	arcLabelsG
	.append('line')
	.attr('x2', function (d, i) {
	let lineAngle = i * arcAngle
	let lineRadius = chartRadius + 10
	return x(lineAngle, lineRadius)
	})
	.attr('y2', function (d, i) {
	let lineAngle = i * arcAngle
	let lineRadius = chartRadius + 10
	return y(lineAngle, lineRadius)
	})

	var arcs = thisSelection
	.selectAll('.arc')
	.data(data)
	.enter()
	.append('g')
	.attr('class', 'arc')

	arcs.append('path').attr('d', function (d) {
	// start at vertice 1
	let start = 'M ' + d.x1 + ' ' + d.y1
	// inner curve to vertice 2
	let side1 =
	' Q ' +
	d.controlPoint1x +
	' ' +
	d.controlPoint1y +
	' ' +
	d.x2 +
	' ' +
	d.y2
	// straight line to vertice 3
	let side2 = 'L ' + d.x3 + ' ' + d.y3
	// outer curve vertice 4
	let side3 =
	' Q ' +
	d.controlPoint2x +
	' ' +
	d.controlPoint2y +
	' ' +
	d.x4 +
	' ' +
	d.y4
	// combine into string, with closure (Z) to vertice 1
	return start + ' ' + side1 + ' ' + side2 + ' ' + side3 + ' Z'
	})

	// create coil labels on the first arc of each coil
	coilLabels = arcs
	.filter(function (d) {
	return d.arcNumber == 0
	})
	.raise()

	coilLabels
	.append('path')
	.attr('id', function (d) {
	return 'path-' + d[coilLabel]
	})
	.attr('d', function (d) {
	// start at vertice 1
	let start = 'M ' + d.x1 + ' ' + d.y1
	// inner curve to vertice 2
	let side1 =
	' Q ' +
	d.controlPoint1x +
	' ' +
	d.controlPoint1y +
	' ' +
	d.x2 +
	' ' +
	d.y2
	return start + side1
	})
	.style('opacity', 0)

	coilLabels
	.append('text')
	.attr('class', 'coil-label')
	.attr('x', 3)
	.attr('dy', -4)
	.append('textPath')
	.attr('xlink:href', function (d) {
	return '#path-' + d[coilLabel]
	})
	.text(function (d) {
	return d[coilLabel]
	})
	})

	function updatePathData (data) {
	let holeRadius = radius * holeRadiusProportion
	let arcAngle = 360 / arcsPerCoil
	let dataLength = data.length
	let coils = Math.ceil(dataLength / arcsPerCoil) // number of coils, based on data.length / arcsPerCoil
	let coilWidth = chartRadius * (1 - holeRadiusProportion) / (coils + 1) // remaining chartRadius (after holeRadius removed), divided by coils + 1. I add 1 as the end of the coil moves out by 1 each time

	data.forEach(function (d, i) {
	let coil = Math.floor(i / arcsPerCoil)
	let position = i - coil * arcsPerCoil
	let startAngle = position * arcAngle
	let endAngle = (position + 1) * arcAngle
	let startInnerRadius = holeRadius + i / arcsPerCoil * coilWidth
	let startOuterRadius =
	holeRadius +
	i / arcsPerCoil * coilWidth +
	coilWidth * (1 - coilPadding)
	let endInnerRadius = holeRadius + (i + 1) / arcsPerCoil * coilWidth
	let endOuterRadius =
	holeRadius +
	(i + 1) / arcsPerCoil * coilWidth +
	coilWidth * (1 - coilPadding)

	// vertices of each arc
	d.x1 = x(startAngle, startInnerRadius)
	d.y1 = y(startAngle, startInnerRadius)
	d.x2 = x(endAngle, endInnerRadius)
	d.y2 = y(endAngle, endInnerRadius)
	d.x3 = x(endAngle, endOuterRadius)
	d.y3 = y(endAngle, endOuterRadius)
	d.x4 = x(startAngle, startOuterRadius)
	d.y4 = y(startAngle, startOuterRadius)

	// CURVE CONTROL POINTS
	let midAngle = startAngle + arcAngle / 2
	let midInnerRadius =
	holeRadius + (i + 0.5) / arcsPerCoil * coilWidth
	let midOuterRadius =
	holeRadius +
	(i + 0.5) / arcsPerCoil * coilWidth +
	coilWidth * (1 - coilPadding)

	// MID POINTS, WHERE THE CURVE WILL PASS THRU
	d.mid1x = x(midAngle, midInnerRadius)
	d.mid1y = y(midAngle, midInnerRadius)
	d.mid2x = x(midAngle, midOuterRadius)
	d.mid2y = y(midAngle, midOuterRadius)

	d.controlPoint1x = (d.mid1x - 0.25 * d.x1 - 0.25 * d.x2) / 0.5
	d.controlPoint1y = (d.mid1y - 0.25 * d.y1 - 0.25 * d.y2) / 0.5
	d.controlPoint2x = (d.mid2x - 0.25 * d.x3 - 0.25 * d.x4) / 0.5
	d.controlPoint2y = (d.mid2y - 0.25 * d.y3 - 0.25 * d.y4) / 0.5

	d.arcNumber = position
	d.coilNumber = coil
	})

	return data
	}

	function x (angle, radius) {
	// change to clockwise
	let a = 360 - angle
	// start from 12 o'clock
	a = a + 180 - startAngle;
	return radius * Math.sin(a * radians)
	}

	function y (angle, radius) {
	// change to clockwise
	let a = 360 - angle
	// start from 12 o'clock
	a = a + 180 - startAngle;
	return radius * Math.cos(a * radians)
	}

	function chartWH (r) {
	return r * 2
	}
	}

	chart.radius = function (value) {
	if (!arguments.length) return radius
	radius = value
	return chart
	}

	chart.holeRadiusProportion = function (value) {
	if (!arguments.length) return holeRadiusProportion
	holeRadiusProportion = value
	return chart
	}

	chart.arcsPerCoil = function (value) {
	if (!arguments.length) return arcsPerCoil
	arcsPerCoil = value
	return chart
	}

	chart.coilPadding = function (value) {
	if (!arguments.length) return coilPadding
	coilPadding = value
	return chart
	}

	chart.arcLabel = function (value) {
	if (!arguments.length) return arcLabel
	arcLabel = value
	return chart
	}

	chart.coilLabel = function (value) {
	if (!arguments.length) return coilLabel
	coilLabel = value
	return chart
	}

	chart.startAngle = function (value) {
	if (!arguments.length) return startAngle
	startAngle = value
	return chart
	}

	return chart
	}
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-scale-chromatic.v0.3.min.js"></script>
	<script src="d3-spiral-heatmap.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Catamaran" rel="stylesheet">

	<style>
	body {
	font-family: 'Catamaran', sans-serif;
	margin: 20px;
	top: 20px;
	right: 20px;
	bottom: 20px;
	left: 20px;
	}

	line {
	stroke: #E9E9E9;
	}

	.coil-label {
	fill: #000;
	font-size: 12px;
	}
	/*.arc path {
	stroke: #FFF;
	}*/
	</style>
	</head>

	<body>
	<div id="title">
	<h1>Northern hemisphere sea ice extent: 1978 to 2017</h1>
	<p>An example of a resuable spiral heatmap showing the extent of the sea ice in the northern hemisphere.</p>
	<p>Low sea ice is starting earlier in July, and lasting longer into October and November.</p>
	</div>
	<div id="legend"></div>
	<div id="chart"></div>
	<div id="source">
	<p>Source: http://nsidc.org/data/nsidc-0081.html and http://nsidc.org/data/nsidc-0051.html</p>
	</div>

	<script>
	//SVG dimensions
	const radians = 0.0174532925
	const chartWidth = 750
	const chartHeight = chartWidth
	const chartRadius = chartWidth / 2
	const margin = { "top": 40, "bottom": 40, "left": 40, "right": 40 }

	let dateParse = d3.timeParse("%d/%m/%Y")
	let dateFormat = d3.timeFormat("%d%m");// returns date string ddmm, eg 2902
	let dayOfYear = d3.timeFormat("%j");

	let startAngle = 0;

	let arcLabels = [
	{ "month": "Jan", "start": 0, "days": 31 },
	{ "month": "Feb", "start": 31, "days": 28 },
	{ "month": "Mar", "start": 59, "days": 31 },
	{ "month": "Apr", "start": 90, "days": 30 },
	{ "month": "May", "start": 120, "days": 31 },
	{ "month": "Jun", "start": 151, "days": 30 },
	{ "month": "Jul", "start": 181, "days": 31 },
	{ "month": "Aug", "start": 212, "days": 31 },
	{ "month": "Sep", "start": 243, "days": 30 },
	{ "month": "Oct", "start": 273, "days": 31 },
	{ "month": "Nov", "start": 304, "days": 30 },
	{ "month": "Dec", "start": 334, "days": 31 }
	]

	//Colour scale
	var colour = d3.scaleSequential(d3.interpolateSpectral);

	//Load the data, nest, sort and draw charts
	d3.csv("sea-ice-extent.csv", convertTextToNumbers, function (error, data) {
	if (error) { throw error; };

	colour.domain(d3.extent(data, function (d) { return d.extent; }));

	let chartData = createDataPerDay(data);

	startAngle = ((data[0].dayOfYear / 365) * 360) - 1;

	//set the options for the sprial heatmap
	let heatmap = spiralHeatmap()
	.radius(chartRadius)
	.holeRadiusProportion(0.1)
	.arcsPerCoil(365)
	.startAngle(startAngle)
	.coilPadding(0.1)
	//.coilLabel("year")

	//CREATE SVG AND A G PLACED IN THE CENTRE OF THE SVG
	const div = d3.select("#chart").append("div")

	const svg = div.append("svg")
	.attr("width", chartWidth + margin.left + margin.right)
	.attr("height", chartHeight + margin.top + margin.bottom);

	const g = svg.append("g")
	.attr("transform", "translate("
	+ (margin.left + chartRadius)
	+ ","
	+ (margin.top + chartRadius) + ")");

	g.datum(chartData)
	.call(heatmap);

	g.selectAll(".arc").selectAll("path")
	.style("fill", function (d) { return colour(d.extent); })


	d3.selectAll(".arc-label").remove();

	var arcLabelsG = g.selectAll('.arc-label')
	.data(arcLabels)
	.enter()
	.append('g')
	.attr('class', 'arc-label')

	let dayAngle = 360 / 365;

	arcLabelsG
	.append('text')
	.text(function (d) {
	return d.month
	})
	.attr('x', function (d) {
	let monthAngle = 360 * (d.days / 365);
	let labelAngle = (d.start * dayAngle) + (monthAngle / 2)
	let labelRadius = chartRadius + 20;
	return labelX(labelAngle, labelRadius)
	})
	.attr('y', function (d) {
	let monthAngle = 360 * (d.days / 365);
	let labelAngle = (d.start * dayAngle) + (monthAngle / 2)
	let labelRadius = chartRadius + 20;
	return labelY(labelAngle, labelRadius)
	})
	.style('text-anchor', function (d, i) {
	return i < arcLabels.length / 2 ? 'start' : 'end'
	})

	arcLabelsG
	.append('line')
	.attr('x2', function (d, i) {
	let lineAngle = d.start * dayAngle
	let lineRadius = chartRadius + 40
	return labelX(lineAngle, lineRadius)
	})
	.attr('y2', function (d, i) {
	let lineAngle = d.start * dayAngle
	let lineRadius = chartRadius + 40
	return labelY(lineAngle, lineRadius)
	})


	//DRAW LEGEND

	const legendWidth = chartRadius;
	const legendHeight = 20;
	const legendPadding = 40;

	const units = "million square km"

	var legendSVG = d3.select("#legend")
	.append("svg")
	.attr("width", legendWidth + legendPadding + legendPadding)
	.attr("height", legendHeight + legendPadding + legendPadding);

	var defs = legendSVG.append("defs");

	var legendGradient = defs.append("linearGradient")
	.attr("id", "linear-gradient")
	.attr("x1", "0%")
	.attr("y1", "0%")
	.attr("x2", "100%")
	.attr("y2", "0%");

	let noOfSamples = 20;
	let dataRange = colour.domain()[1] - colour.domain()[0];
	let stepSize = dataRange / noOfSamples;

	for (i = 0; i < noOfSamples; i++) {
	legendGradient.append("stop")
	.attr("offset", (i / (noOfSamples - 1)))
	.attr("stop-color", colour(colour.domain()[0] + (i * stepSize)));
	}

	var legendG = legendSVG.append("g")
	.attr("class", "legendLinear")
	.attr("transform", "translate(" + legendPadding + "," + legendPadding + ")");

	legendG.append("rect")
	.attr("x", 0)
	.attr("y", 0)
	.attr("width", legendWidth)
	.attr("height", legendHeight)
	.style("fill", "url(#linear-gradient)");

	legendG.append("text")
	.text("Low (" + colour.domain()[0] + " " + units + ")")
	.attr("x", 0)
	.attr("y", legendHeight - 35)
	.style("font-size", "12px");

	legendG.append("text")
	.text("High (" + colour.domain()[1] + " " + units + ")")
	.attr("x", legendWidth)
	.attr("y", legendHeight - 35)
	.style("text-anchor", "end")
	.style("font-size", "12px");


	});


	//Returns a new array, which a data point per day, except for 29th Feb.
	//Where a day is missing in the original data, use the average from the preceding and next day.
	function createDataPerDay(data) {

	let day = data[0].date;
	let lastDay = data[data.length - 1].date;
	let newData = []

	let i = 0;

	for (day; day <= lastDay; day.setDate(day.getDate() + 1)) {

	//skip 29th Feb in new dataset
	if (dateFormat(day) != "2902") {

	let datum = {};
	datum.date = new Date(day);
	let compareDate = new Date(data[i].date);

	if (compareDate.getTime() === day.getTime()) {

	datum.extent = data[i].extent;
	datum.source = "original";

	//move to the next day in the original data, unless it is 29th Feb
	if (i < (data.length - 1)) {
	i = (data[i + 1].month == 2 && data[i + 1].day == 29) ? i + 2 : i + 1;
	}

	} else {

	datum.extent = (data[i - 1].extent + data[i + 1].extent) / 2;
	datum.source = "avg";

	};

	newData.push(datum);

	}

	}

	return newData;

	};

	function labelX(angle, radius) {
	// change to clockwise
	let a = 360 - angle
	// start from 12 o'clock
	a = a + 180;
	return radius * Math.sin(a * radians)
	}

	function labelY(angle, radius) {
	// change to clockwise
	let a = 360 - angle
	// start from 12 o'clock
	a = a + 180;
	return radius * Math.cos(a * radians)
	}

	function convertTextToNumbers(d) {
	let dateString = d.day + "/" + d.month + "/" + d.year
	d.date = dateParse(dateString);
	d.extent = +d.extent;
	d.year = +d.year;
	d.month = +d.month;
	d.day = +d.day;
	d.dayOfYear = +dayOfYear(d.date);
	return d;
	};
	</script>
	</body>