Software engineer dabbling in data viz
Plot.plot({
marks: [Plot.dot(medalsData, { x: "Age", y: "Height", stroke: "Medal" })]
})
addTooltips(
Plot.plot({
marks: [
Plot.dot(medalsData, {
x: "Age",
y: "Height",
stroke: "Sex",
title: (d) =>
`${d.Name} \n country: ${d.Team} \n event: ${d.Event} \n year: ${d.Year}`
})
]
})
)
addTooltips(
Plot.plot({
marks: [
Plot.dot(medalsData, {
x: "Year",
y: "Height",
stroke: "Sex",
title: (d) =>
`${d.Name} \n country: ${d.Team} \n event: ${d.Event} \n year: ${d.Year}`
})
]
})
)
addTooltips(
Plot.plot({
marks: [
Plot.dot(medalsData, {
x: "Year",
y: "Age",
stroke: "Sex",
title: (d) =>
`${d.Name} \n country: ${d.Team} \n event: ${d.Event} \n year: ${d.Year}`
})
]
})
)
addTooltips(
Plot.plot({
marks: [
Plot.text(medalsData, {
text: (d) => {
if (d.Medal == "Gold") return "🥇";
if (d.Medal == "Silver") return "🥈";
if (d.Medal == "Bronze") return "🥉";
},
x: "Year",
y: "Age",
title: (d) =>
`${d.Name} \n country: ${d.Team} \n event: ${d.Event} \n year: ${d.Year}`
})
]
})
)
addTooltips(
Plot.plot({
facet: {
data: medalsData,
y: "Event"
},
marks: [
Plot.dot(medalsData, {
x: "Year",
y: "Age",
stroke: "Event",
title: (d) =>
`${d.Name} \n country: ${d.Team} \n event: ${d.Event} \n year: ${d.Year}`
})
]
})
)
d3.group(medalsData, (d) => d.Name)
d3
.rollups(
medalsData,
(v) => v.length,
(d) => d.Name
)
.sort((a, b) => b[1] - a[1])
medalsData = data.filter((d) => d.Medal !== "NA")
Inputs.table(medalsData)
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.
