JSFiddle - React, Tailwind, and code Playground
HTML
<div id="chart"></div>
JavaScript
const radians = 0.0174532925;
//CHART CONSTANTS
const chartRadius = 100;
const chartWidth = chartRadius * 3;
const chartHeight = chartRadius * 3;
const labelRadius = chartRadius + 5;
const margin = { "top": 180, "bottom": 40, "left": 180, "right": 40 };
const months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
//CHART OPTIONS
const holeRadiusProportion = 0.75; //fraction of chartRadius. 0 gives you some pointy arcs in the centre.
const holeRadius = holeRadiusProportion * chartRadius;
const segmentsPerCoil = 52; //number of coils. for this example, I have 12 months per year. But you change to whatever suits your data.
const segmentAngle = 360 / segmentsPerCoil;
let coils; //number of coils, based on data.length / segmentsPerCoil
let coilWidth; //remaining chartRadius (after holeRadius removed), divided by coils + 1. I add 1 as the end of the coil moves out by 1 each time
//SCALES
const colour = d3.scaleSequential(d3.interpolateViridis);
//CREATE SVG AND A G PLACED IN THE CENTRE OF THE SVG
const svg = d3.select("#chart")
.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) + ")");
// count the weeks
let week = 0
//LOAD THE DATA
d3.csv("https://gist.githubusercontent.com/JureStabuc/ce2fdf368ada02c39fe47a7963683224/raw/92c0e9872e6bc4db10fa07dcafb5bbb29f3ecbbd/restrictions_daily.csv", convertTextToNumbers, function (error, data) {
if (error) { throw error; };
// get the week number
data.forEach(function (d) {
const dateParse = d3.timeParse("%d/%m/%Y")(d.date)
d.week = week
if (+d3.timeFormat("%d")(dateParse) % 7 === 0)
week = week + 1
})
//CALCULATE AND STORE THE REMAING
let dataLength = 52
coils = Math.ceil(dataLength / segmentsPerCoil);
...