Reporting, editing, computer programming.
data = d3.csvParse(
await FileAttachment("flare.csv").text(),
({ id, value }) => ({
name: id.split(".").pop(),
title: id.replace(/\./g, "/"),
group: id.split(".")[1],
value: +value
})
)
pack = data =>
d3
.pack()
.size([width, height])
.padding(3)(d3.hierarchy({ children: data }).sum(d => d.value))
root = pack(data)
color = d3.scaleOrdinal(data.map(d => d.group), d3.schemeCategory10)
bubbles = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const leaf = svg
.selectAll("g")
.data(root.descendants().filter(d => d.depth > 0))
.join("circle")
.attr("r", d => d.r)
.attr("transform", d => `translate(${d.x},${d.y})`)
.attr("fill-opacity", 0.7)
.attr("fill", d => color(d.data.group));
return svg.node();
}
drawPetalPath = d => {
const config = {
baseStart: 10,
baseEnd: 10,
cornerStart: 15,
cornerEnd: 45
};
// Boost the size
const flowerPower = 1.3;
// They key here is that I'm scaling the size of the path's variables
// to the radius set by the circle
const pathScale = d3
.scaleRadial()
.domain([0, d3.max(Object.values(config))])
.range([0, d.r * flowerPower]);
return [
'M',
`0 0`,
'C',
`-${pathScale(config.baseStart)} -${pathScale(config.baseEnd)}`,
`-${pathScale(config.baseStart)} -${pathScale(config.cornerStart)}`,
`0 -${pathScale(config.cornerEnd)}`,
'C',
`${pathScale(config.baseStart)} -${pathScale(config.cornerStart)}`,
`${pathScale(config.baseStart)} -${pathScale(config.baseEnd)}`,
`0 0`
].join(' ');
}
paths = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const data = root.descendants().filter(d => d.depth > 0);
const leaf = svg
.selectAll("g")
.data(data)
.join('path')
.attr("transform", d => `translate(${d.x},${d.y})`)
.attr('d', d => drawPetalPath(d))
.attr('fill', d => color(d.data.group))
.attr('stroke', 'black')
.attr('stroke-width', 1);
return svg.node();
}
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.
