metros = FileAttachment("metros.csv").csv({typed: true})
Plot.plot({
grid: true,
inset: 10,
x: {
type: "log",
label: "Population →",
tickFormat: "~s"
},
y: {
label: "↑ Inequality"
},
color: {
type: "diverging",
reverse: true
},
marks: [
Plot.link(metros, {
x1: "POP_1980",
y1: "R90_10_1980",
x2: "POP_2015",
y2: "R90_10_2015",
stroke: d => d.R90_10_2015 - d.R90_10_1980
}),
Plot.dot(metros, {
x: "POP_2015",
y: "R90_10_2015",
r: 1
}),
Plot.text(metros, {
x: "POP_2015",
y: "R90_10_2015",
filter: "highlight",
text: "nyt_display",
dy: -6
})
]
})
income = FileAttachment("income.csv").csv({typed: true})
incdomain = d3.extent(income.flatMap(d => [d.m, d.f]))
Plot.plot({
height: 600,
marginRight: 40,
x: {
label: "Median annual income (men, thousands) →",
tickFormat: d => d / 1000
},
y: {
label: "↑ Median annual income (women, thousands)",
tickFormat: d => d / 1000
},
marks: [
Plot.link([1], {
x1: () => incdomain[0],
y1: () => incdomain[0],
x2: () => incdomain[1],
y2: () => incdomain[1]
}),
Plot.link([0.6, 0.7, 0.8, 0.9], {
x1: () => incdomain[0],
y1: k => incdomain[0] * k,
x2: () => incdomain[1],
y2: k => incdomain[1] * k,
strokeOpacity: 0.2
}),
Plot.text([0.6, 0.7, 0.8, 0.9, 1.0], {
x: () => incdomain[1],
y: k => incdomain[1] * k,
text: d => d === 1 ? "Equal" : d3.format("+.0%")(d - 1),
textAnchor: "start",
dx: 6
}),
Plot.dot(income, {x: "m", y: "f", title: d => `${d.type}, ${d.age}`})
]
})
Plot.plot({
height: 600,
marginRight: 40,
grid: true,
x: {
label: "Median annual income (men, thousands) →",
tickFormat: d => d / 1000,
domain: incdomain
},
y: {
label: "↑ Median annual income (women, thousands)",
tickFormat: d => d / 1000,
domain: incdomain
},
marks: [
Plot.dot(income, {x: "m", y: "f", title: d => `${d.type}, ${d.age}`})
]
})
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.
