Plot.plot({
height: 5000,
marginLeft: 150,
padding: 0,
grid: true,
inset: 0,
color: {
legend: false
},
x: {
label: "Age",
domain: [0, 120]
},
facet: {
data: df,
y: (d) => d.laureateLabel,
label: "Nobel laureate",
marginLeft: 120
},
fy: {
domain: d3
.sort(df2, (d) => -op.year(d.nobeldate))
.map((d) => d.laureateLabel)
},
marks: [
Plot.frame({ stroke: "#ccc" }),
Plot.dot(
df,
Plot.dodgeY({
x: (d) => d.age,
title: (d) =>
`${d.laureateLabel} (${d.age}) publishes ${d.workLabel} in ${op.year(
d.publicationdate
)}`,
anchor: "middle",
fill: (d) => d.laureateLabel
})
),
Plot.dot(df, {
x: (d) => d.agenobel,
title: (d) =>
`${d.laureateLabel} (${
d.agenobel
} ans) got the Nobel prize in ${op.year(d.nobeldate)}`,
fill: "#ffd700",
stroke: "#ccc",
opacity: 0.1,
r: 5
})
]
})
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.
