Engineer & Educator | Observable Ambassador | Karaoke Enthusiast
addTooltips(
Plot.plot({
marks: [
Plot.dot(data, {
x: "Year",
y: "Age",
stroke: "Event",
title: (d) => `Name: ${d.Name}
Medal: ${d.Medal}
Team: ${d.Team}
Event: ${d.Event}
Year: ${d.Year}`
})
]
})
)
addTooltips(
Plot.plot({
marks: [
Plot.text(data, {
text: d => {
// 🥇🥈🥉
if(d.Medal == "Gold") return "🥇"
if(d.Medal == "Silver") return "🥈"
if(d.Medal == "Bronze") return "🥉"
return "."
},
x: "Year",
y: "Age",
title: (d) => `Name: ${d.Name}
Medal: ${d.Medal}
Team: ${d.Team}
Event: ${d.Event}
Year: ${d.Year}`
})
]
})
)
countryEmoji //Try pulling this into the plot!
import { countryEmoji } from "@mattdzugan/making-maps-out-of-emojis"
addTooltips(
Plot.plot({
facet: {
data: data,
y: "Event"
},
marks: [
Plot.dot(data, {
x: "Year",
y: "Age",
stroke: "Event",
title: (d) => `Name: ${d.Name}
Medal: ${d.Medal}
Team: ${d.Team}
Event: ${d.Event}
Year: ${d.Year}`
})
]
})
)
d3.rollups(data, v => v.length, d => d.Name).sort((a,b) => b[1] - a[1])
Inputs.table(data)
data
import { gymnastics as data } from "@zanarmstrong/dataset-olympics"
import {addTooltips} from "@mkfreeman/plot-tooltip"
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.
