Here is a public team for a 2022 data viz class at TMU conducted by @sugi2000 @sugi2000lab
{
const width = 400;
const height = 400;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height]);
svg
.append("circle")
.attr("cx", width/2)
.attr("cy", height/2)
.attr("r", 160)
.attr("stroke", 'green')
.attr("stroke-width", 6);
svg
.append("circle")
.attr("cx", width/2)
.attr("cy", height/2)
.attr("r", 120)
.attr("stroke", 'yellow')
.attr("stroke-width", 6);
svg
.append("circle")
.attr("cx", width/2)
.attr("cy", height/2)
.attr("r", 80)
.attr("stroke", 'orange')
.attr("stroke-width", 6);
svg
.append("circle")
.attr("cx", width/2)
.attr("cy", height/2)
.attr("r", 40)
.attr("stroke", 'pink')
.attr("stroke-width", 6);
return svg.node();
}
dataset = d3.range(10).map((d) => ({
apple: d3.randomInt(100)(),
orange: d3.randomInt(100)()
}))
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.
