md`# Spiral Heatmap
Build with Tom Shanley's [d3-spiral-heatmap](https://github.com/tomshanley/d3-spiral-heatmap) plug-in.
`
chart = {
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", width);
const g = svg
.append("g")
.attr(
"transform",
"translate(" + (chartRadius) + "," + (chartRadius) + ")"
);
g.datum(chartData).call(heatmap);
g.selectAll(".arc")
.selectAll("path")
// .style("stroke", "#dddddd")
.style("fill", d => {
return d.commits>0 ? colorScale(d.commits): '#dddddd'
})
g.selectAll('text').attr("font-size", "10px");
return svg.node();
}
colorScale = d3.scaleSequential(d3.interpolateOrRd).domain([0,20])
heatmap = spiralHeatmap()
.radius(chartRadius)
.holeRadiusProportion(0.2)
.arcsPerCoil(365)
.coilPadding(0.1)
.coilLabel("year");
chartRadius = width/2
formatDay = d3.timeFormat("%d")
formatMonth = d3.timeFormat("%m")
formatYear= d3.timeFormat("%Y")
formatDate = d3.timeFormat("%Y-%m-%d")
startAngle = (data[0].dayOfYear / 365) * 360 - 1
md`## Data
source: [@codingwithfire/d3-git-history-data](https://observablehq.com/@codingwithfire/d3-git-history-data)
`
groupedData = d3.rollup(data, v => v.length, d => d.date)
data = combined.map(d => {
const timestamp = timeParser(d.date).getTime()
const date = timeParser(d.date)
return {
...d,
timestamp,
year: +formatYear(d3.utcYear(timestamp)),
date: d3.timeDay(date),
month: +formatMonth(d3.utcMonth(date)),
day: +formatDay(d3.utcDay(date)),
dayOfYear: d3.timeDay.count(d3.timeYear(timestamp), timestamp)
}
}).sort((a, b) => a.date - b.date)
chartData = d3.timeDays(domain[0], domain[1]).map(date => {
return {
date,
commits: groupedData.get(date) || 0
}
})
domain = d3.extent(data.map(d => d.date))
import {spiralHeatmap} from '@tomshanley/spiral-heatmap'
import { combined, timeParser } from '@codingwithfire/d3-git-history-data'
luxon = require("luxon@1/build/amd/luxon.js")
d3 = require('d3@6')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
