Social development practitioner. Trying to understand our world.
Published unlisted
Edited
Sep 13, 2020
data = d3.csvParse(`name,location,category,quantity,
Aaron,House,Human,1,
Dator,House,Machine,3,
Dator,Garage,Machine,1,
Link,House,Machine,1,
Link,Garage,Machine,1,
Cable,House,Infrastructure,6,
Cable,Garage,Infrastructure,9,
Table,House,Infrastructure,4,
Hose,Garden,Equipment,1,`)
grouped_data = d3.group(data, d => d.location, d => d.category)
grouped_data_array = Array.from(grouped_data)
grouped_data_array_mapped = Array.from(grouped_data, ([key, map]) => ({
name: key,
value: map.size,
}))
{
for (let value of grouped_data.values()) {
return(value)
}
}
manual_extraction = [
{name: grouped_data_array[0][0], value: grouped_data_array[0][1].size},
{name: grouped_data_array[1][0], value: grouped_data_array[1][1].size},
{name: grouped_data_array[2][0], value: grouped_data_array[2][1].size},
]
chart = {
const arcs = pie(grouped_data_array_mapped);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc)
.append("title")
.text(d => `${d.data.name}: ${d.data.value.toLocaleString()}`);
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arc.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data.value.toLocaleString()));
return svg.node();
}
pie = d3.pie()
.padAngle(0.005)
.sort(null)
.value(d => d.value)
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.
