Unlisted
Edited
Apr 21, 2023
Insert cell
Insert cell
Plot.plot({
aspectRatio: 1,
marginRight: 40,
x: {
label: "Median annual income (men, thousands) →",
transform: (d) => d / 1000,
tickSpacing: 60
},
y: {
label: "↑ Median annual income (women, thousands)",
transform: (d) => d / 1000,
tickSpacing: 60
},
marks: [
Plot.link([0.6, 0.7, 0.8, 0.9, 1], {
x1: 0,
y1: 0,
x2: 102000,
y2: (k) => 102000 * k,
strokeOpacity: (k) => k === 1 ? 1 : 0.2
}),
Plot.text([0.6, 0.7, 0.8, 0.9, 1], {
x: 102000,
y: (k) => 102000 * k,
text: ((f) => (k) => k === 1 ? "Equal" : f(k - 1))(d3.format("+.0%")),
textAnchor: "start",
dx: 6
}),
Plot.dot(income, {x: "m", y: "f"})
]
})
Insert cell
income = FileAttachment("income-gender.csv").csv({typed: true})
Insert cell

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.
Learn more