populationData
Type Table, then Shift-Enter. Ctrl-space for more options.
populationData
keys = ["<10", "10-19", "20-29", "30-39", "40-49", "50-59", "60-69", "70-79", "≥80"]
// taking tabular data structure to turn it into hierarchical data structure for visualization
// want to stack by column - age group
stackLayout = d3
.stack()
.keys(keys)
.offset(d3.stackOffsetExpand)(populationData)
// offset allows for normalized stacked bar chart
{
const width = 900;
const height = 300;
const marginTop = 25;
const marginRight = 20;
const marginBottom = 35;
const marginLeft = 60;
const x = d3
.scaleBand()
.domain(Array.from(new Set(populationData.map((d) => d.name))))
.range([0, width]);
const y = d3
.scaleLinear()
.domain([0, d3.max(stackLayout, (d) => d3.max(d, (d) => d[1]))])
.nice()
.range([height, 0]);
const color = d3
.scaleOrdinal()
.domain(keys)
.range(d3.schemeSpectral[keys.length]);
const svg = d3
.create("svg")
.attr("width", width + marginLeft + marginRight)
.attr("height", height + marginTop + marginBottom);
const g = svg
.append("g")
.attr("transform", `translate(${marginLeft}, ${marginTop})`);
// Append a group for each series, and a rect for each element in the series.
g.append("g")
.selectAll(".bucket")
.data(stackLayout) // making 9 differnet group tags
.join("g")
.attr("class", "bucket")
.attr("fill", (_, i) => color(keys[i])) // all values in same group tag = same color
.selectAll("rect")
// 9 group tags w/ 52 records
.data((d) => d) // using data already bound to group tag
.join("rect")
.attr("x", (d) => x(d.data.name))
.attr("y", (d) => y(d[1]))
.attr("height", (d) => y(d[0]) - y(d[1])) // inverted coordinate plane
.attr("width", x.bandwidth()); // bars take up full width
g.append("g")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(x));
g.append("g").call(d3.axisLeft(y));
return svg.node();
}
{
const width = 200;
const height = 200;
const margin = { top: 20, bottom: 20, left: 20, right: 20 };
const svg = d3
.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const rectangle = g
.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "#ddd")
.style("stroke", "#000")
// rectangle turns yellow when entering rectangle
.on("mouseenter", (event) => {
rectangle.style("fill", "yellow");
})
// rectangle turns blue when leaving rectangle
.on("mouseleave", (event) => {
rectangle.style("fill", "blue");
})
// rectangle strinking into nothingness when clicked on
.on("click", (events) => {
rectangle
.transition()
.duration(2000)
.attr("width", 0)
.attr("height", 0)
// shrinking at center
.attr("x", width / 2)
.attr("y", height / 2);
});
// making cursor
const circle = g
.append("circle")
.style("pointer-events", "none")
.attr("r", 5);
svg.on("mousemove", (event) => {
console.log(event);
circle.attr("cx", event.layerX - 20);
circle.attr("cy", event.layerY - 20);
});
return svg.node();
}
{
const width = 600;
const height = 400;
const margin = { top: 30, bottom: 20, left: 50, right: 50 };
const div = htl.html`<div></div>`;
const categories = d3.groups(iris, (d) => d.species);
const buttons = d3
.select(div)
.selectAll("button")
.data(categories)
.join("button");
buttons.text((d) => d[0]);
const svg = d3
.select(div)
.append("div")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
g.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "#eee");
const text = svg
.append("text")
.style("font", "12px sans-serif")
.attr("y", 15)
.text("Click on a circle to read the data!");
const x = d3
.scaleLinear()
.domain(d3.extent(iris, (d) => d["sepalLength"]))
.nice()
.range([0, width]);
const y = d3
.scaleLinear()
.domain(d3.extent(iris, (d) => d["sepalWidth"]))
.nice()
.range([height, 0]);
const color = d3
.scaleOrdinal()
.domain(categories.map((d) => d[0]))
.range(d3.schemeDark2);
const yAxis = g.append("g").call(d3.axisLeft(y).tickSize(-width));
const xAxis = g
.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).tickSize(-height));
yAxis.selectAll("line").style("stroke", "#fff");
xAxis.selectAll("line").style("stroke", "#fff");
const circles = g
.selectAll("circle")
.data(iris.filter((d) => d.species == "setosa"))
.join("circle")
.attr("r", 4)
.style("stroke", "#000")
.attr("cx", (d) => x(d.sepalLength))
.attr("cy", (d) => y(d.sepalWidth))
.style("fill", (d) => color(d.species))
.style("cursor", "pointer")
.on("click", (event, d) => {
text.text(JSON.stringify(d));
});
buttons.on("click", (event, d) => {
g.selectAll("circle")
.data(d[1], (d) => d)
.join(
(enter) =>
enter
.append("circle")
.attr("r", 4)
.style("stroke", "#000")
.attr("cx", (d) => x(d.sepalLength))
.attr("cy", (d) => y(d.sepalWidth))
.style("fill", (d) => color(d.species))
.style("cursor", "pointer")
.on("click", (event, d) => {
text.text(JSON.stringify(d));
}),
(update) =>
update
.attr("cx", (d) => x(d.sepalLength))
.attr("cy", (d) => y(d.sepalWidth))
.style("fill", (d) => color(d.species)),
(exit) =>
exit
.attr("fill", "red")
.call((exit) =>
exit.transition().duration(1000).attr("r", 0).remove()
)
);
});
return div;
}
iris.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
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.
