Built with blockbuilder.org
forked from tomshanley‘s block: Northern hemisphere sea ice extent
<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: #ffffff;
}
.coil-label {
fill: #000;
font-size: 12px;
}
/*.arc path {
stroke: #FFF;
}*/
</style>
</head>
<body>
<div id="title">
</div>
<div id="legend"></div>
<div id="chart"></div>
<div id="source">
<p>Source: //nsidc.org/data/nsidc-0081.html and //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('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)
})
});
//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>// 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
}