data = d3.tsvParse(raw)
[...new Set(data.map(d => d["Question #2 Answer"]))]
[...new Set(data.map(d => d["Question #1 Answer"]))]
domain = ["18-29", "30s", "40s", "50s", "60s", "70s and up"]
Plot.barX(
data,
Plot.groupY(
{ x: "count" },
{ y: "Question #2 Answer", fill: "Question #1 Answer" }
)
).plot({ x: { percent: true }, y: { domain, label: "Age" }, marginLeft: 70 })
data1 = d3.cross(domain, ["Yes", "No"]).map(([age, feel]) => {
const segment = data.filter(d => d["Question #2 Answer"] === age);
const frac = segment.filter(d => d["Question #1 Answer"] === feel).length / segment.length;
return {age, feel, frac}
})
Plot.plot({
subtitle: "Do you feel old?",
marginLeft: 70,
x: { label: null, tickFormat: ".0%" },
y: { label: "Age" },
marks: [
Plot.barX(data1, { x: "frac", y: "age", fill: (d) => d.feel === "Yes" }),
Plot.textX(
data1,
Plot.selectFirst(
Plot.stackX({
x: "frac",
y: "age",
z: (d) => d.feel === "Yes",
text: "feel",
inset: 0.5,
fill: "black",
stroke: "white"
})
)
)
]
})
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.
