fields = [
{radius: 0.2 * radius, interval: d3.timeYear, subinterval: d3.timeMonth, format: d3.timeFormat("%b")},
{radius: 0.3 * radius, interval: d3.timeMonth, subinterval: d3.timeDay, format: d3.timeFormat("%d")},
{radius: 0.4 * radius, interval: d3.timeWeek, subinterval: d3.timeDay, format: d3.timeFormat("%a")},
{radius: 0.6 * radius, interval: d3.timeDay, subinterval: d3.timeHour, format: d3.timeFormat("%H")},
{radius: 0.7 * radius, interval: d3.timeHour, subinterval: d3.timeMinute, format: d3.timeFormat("%M")},
{radius: 0.8 * radius, interval: d3.timeMinute, subinterval: d3.timeSecond, format: d3.timeFormat("%S")}
]
fields[0].radius
width = 954
height = width
radius = width / 1.67
armRadius = radius / 22
dotRadius = armRadius - 9
color = d3.scaleSequential([0, 2 * Math.PI], d3.interpolateRainbow)
arcArm = d3.arc()
.startAngle(d => armRadius / d.radius)
.endAngle(d => -Math.PI - armRadius / d.radius)
.innerRadius(d => d.radius - armRadius)
.outerRadius(d => d.radius + armRadius)
.cornerRadius(armRadius)
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.
