World average temperatures from 1880 to 2017

.arcLabelLine {
            stroke: #E9E9E9;
        }

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

<body>
  <div id="explain"><h1>World average temperatures from 1880 to 2017</h1>
    <p>The GISS Surface Temperature Analysis (GISTEMP) is an estimate of global surface temperature change.<br/>The reference temperature is the 1951-1980 monthly means.</p></div>
  <svg id="slider" width="800" height="50"></svg>
  <div id="legend"></div>
    <div id="chart"></div>

var animated = true;
        
        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;

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

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

chartData = createDataPerDay(data);

startAngle = (((data[0].month - 1) / 12)  * 360);

//set the options for the spiral heatmap 
            let heatmap = spiralHeatmap()
                .radius(chartRadius)
                .holeRadiusProportion(0.1)
                .arcsPerCoil(12)
                .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);

chart = g.selectAll(".arc")
            arcs = chart.selectAll("path") 
                .style("fill", function (d, i) { 
                  return colour(d.temperature); 
                })
            		.style("opacity", "0")

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

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

let dayAngle = 360 / 12;

arcLabelsG
                .append('text')
                .text(function (d) {
                    return d.month
                })
                .attr('x', function (d) {
                    let monthAngle = 360 * (d.days / 365);
                    let labelAngle = (d.start * dayAngle) + (30 / 2)
                    let labelRadius = chartRadius + 20;
                    return labelX(labelAngle, labelRadius)
                })
                .attr('y', function (d) {
                    let monthAngle = 360 * (d.days / 365);
                    let labelAngle = (d.start * dayAngle) + (30 / 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("class", "arcLabelLine")
                .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)
                })
            
            yearLabel = g.append("text")
            	.text(chartData[0].date.getFullYear())
            	.style("text-anchor", "middle")
            	.attr("dy", 5)
          	
          	let delayIndex = 0;
          	let delayStagger = 10;
          
          	/*arcs.transition()
            	.duration(200)
            	.delay(function(d, i){ 
                delayIndex = delayIndex + 1;
              	return delayIndex * delayStagger;
            	})
            	.style("opacity", 1)
            	.on("start", function(d, i){
              	yearLabel.text(d.year);
            	})*/

//DRAW LEGEND

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

const units = "°C"

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", "100%")
                .attr("y1", "0%")
                .attr("x2", "0%")
                .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()[1] + " " + units + ")")
                .attr("x", 0)
                .attr("y", legendHeight - 35)
                .style("font-size", "12px");

legendG.append("text")
                .text("High (" + colour.domain()[0] + " " + 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 preceding 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.setMonth(day.getMonth() + 1)) {

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

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

datum.temperature = data[i].temperature * 2;
                datum.source = "original";
                datum.year = datum.date.getFullYear();
                datum.month = datum.date.getMonth();
                datum.day = datum.date.getDate();
                datum.dayOfYear = +dayOfYear(datum.date);
                i = i+1;

} else { 
                datum.temperature = data[i - 1].temperature * 2;
                datum.source = "avg";
                datum.year = datum.date.getFullYear();
                datum.month = datum.date.getMonth();
                datum.day = datum.date.getDate();
                datum.dayOfYear = +dayOfYear(datum.date);
              };

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

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-scale-chromatic.v0.3.min.js