Public
Edited
Nov 22, 2023
3 forks
Importers
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Sheet 2-Table 1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
olympics2020 = sheet2Table1;
Insert cell
Insert cell
Insert cell
medals = ({ gold: "🥇", silver: "🥈", bronze: "🥉" })
Insert cell
Insert cell
Plot.plot({
title: "How many gold medals won by the top 10 nations in 2020 Olympics",
width: width,
height: 700,
y: {
label: null,
domain: d3.sort(olympics2020, d => -d.gold).map(d => d.nation)
},
x: {
domain: [0.5, 1],
axis: null
},
marks: [
Plot.text(olympics2020, {
text: d => medals["gold"].repeat(d.gold),
y: "nation",
fontSize: 15,
frameAnchor: "left"
}),
Plot.text(olympics2020, Plot.stackX({
text: d => medals["silver"].repeat(d.silver),
y: "nation",
fontSize: 15,
frameAnchor: "left",
dx: 0,
dy: 20
})),
Plot.text(olympics2020, Plot.stackX({
text: d => medals["bronze"].repeat(d.bronze),
y: "nation",
fontSize: 15,
frameAnchor: "left",
dx: 0,
dy: 40
}))
]
})
Insert cell
Insert cell
turkeySrc = FileAttachment("turkey.png").url()
Insert cell
turkeyData = [{
holiday: "Thanksgiving",
turkey: 46
}, {
holiday: "Christmas",
turkey: 22
}]
Insert cell
test = [{ x: 1, y: 1}, { x: 2, y: 1}, { x: 3, y: 1}, { x: 4, y: 1}]
Insert cell
createTurkeyArray = (holiday, count) => d3.range(1, count + 1).map((d) => ({ turkey: d, holiday: holiday}))
Insert cell
thanksgiving = createTurkeyArray("Thanksgiving", 46 / 2)
Insert cell
christmas = createTurkeyArray("Christmass", 22 / 2)
Insert cell
turkeyDataNew = [...thanksgiving, ...christmas]
Insert cell
Plot.plot({
height: 120,
width,
marginLeft: 80,
y: {
label: null,
tickPadding: 10
},
marks: [
Plot.image(turkeyDataNew, {
src: turkeySrc,
y: "holiday",
x: (d) => d.turkey,
r: 20
})
]
})
Insert cell
Insert cell
Plot.plot({

marks: [
Plot.dot(christmas, {x: "turkey", y: "holiday"}),
Plot.dot(christmas, {y: "turkey", x: "holiday"}),
Plot.ruleY([1], {stroke: "red"}),
Plot.ruleX([23])
]
})
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