I live in Sydney, and work as a data visualsation designer
FileAttachment("furniture@1.csv")
image = FileAttachment("original-plate-25.jpg").image()
color = d3.scaleOrdinal(d3.schemeCategory10)
ticks = scale.ticks(numTicks).slice(0, -1)
keys = data.map((d, i) => d.year)
numArcs = keys.length
// arcWidth=80
arcWidth = (chartRadius - arcMinRadius - numArcs * arcPadding) / numArcs
scale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value) * 1.1])
.range([0, 2 * PI])
arc = d3.arc()
.innerRadius((d, i) => getInnerRadius(i))
.outerRadius((d, i) => getOuterRadius(i))
.startAngle(0)
.endAngle((d, i) => scale(d))
function getInnerRadius(index) {
return arcMinRadius + (numArcs - (index + 1)) * (arcWidth + arcPadding);
}
function getOuterRadius(index) {
return getInnerRadius(index) + arcWidth;
}
function rad2deg(angle) {
return angle * 180 / PI;
}
function arcTween(d, i) {
let interpolate = d3.interpolate(0, d.value);
return t => arc(interpolate(t), i);
}
PI = Math.PI
arcMinRadius = 40
arcPadding = 10
labelPadding = -5
numTicks = 10
chartRadius = height/2
import {margin} from '@kellytall/day-one-a-line-chart'
height = 500
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.
