Reusable spiral heatmap

An example of a resuable spiral heatmap.

The data is from the Makeover Monday series, about German car and truck production.

forked from tomshanley's block: Reusable spiral heatmap

line {
            stroke: #E9E9E9;
        }

.coil-label {
            fill: #000;
            font-size: 12px;
        }

.arc path {
            stroke: #FFF;
        }
    </style>
</head>

<body>

<h1>Spiral heatmap</h1>
    <p>An example of a resuable spiral heatmap.</p>

let dateParse = d3.timeParse("%d/%m/%Y")
        let yearFormat = d3.timeFormat("%Y")
        let monthFormat = d3.timeFormat("%b");
        
        //Colour scale
        var colour = d3.scaleSequential(d3.interpolateRdYlGn)

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

//ENSURE THE DATA IS SORTED CORRECTLY, IN THIS CASE BY YEAR AND MONTH
            //THE SPIRAL WILL START IN THE MIDDLE AND WORK OUTWARDS

var nestedData = d3.nest()
                .key(function (d) { return d.car_type; })
                .sortValues(function (a, b) { return a.date - b.date; })
                .entries(data);

nestedData.forEach(function (chartData) {

colour.domain(d3.extent(chartData.values, function (d) { return d.value; }));

//set the options for the sprial heatmap
                let heatmap = spiralHeatmap()
                    .radius(chartRadius)
                    .holeRadiusProportion(0.2)
                    .arcsPerCoil(12)
                    .coilPadding(0.1)
                    .arcLabel("month")
                    .coilLabel("year")

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

div.append("p")
                    .text(chartData.key)

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.values)
                    .call(heatmap);

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

})
        })

function convertTextToNumbers(d) {
            d.value = +d.value;
            d.date = dateParse(d.date);
            d.year = yearFormat(d.date);
            d.month = monthFormat(d.date);
            return d;
        };
    </script>
</body>

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

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