olympicsTop10Nations2020
medals = ({ gold: "🥇", silver: "🥈", bronze: "🥉" })
nations = ({ USA: "🇺🇸", GBR: "🇬🇧", RUS: "🇷🇺", GER: "🇩🇪", CHN: "🇨🇳", BRA: "🇧🇷", AUS: "🇦🇺", ARG: "🇦🇷", FRA: "🇫🇷", JPN: "🇯🇵"})
medalsIso = (data) => (Plot.plot({
title: "How many times a national song was played in the Olympics",
subtitle: "Top 10 Gold Medal Winners in the 2016 Olympic Games",
height: 900,
width,
marginLeft: 35,
y: {
label: null,
domain: d3.sort(data, d => -d.Gold).map(d => d.nation),
tickFormat: (d) => ( nations[d.nation] ? nations[d.nation] : d)
},
x: {
domain: [0.5, 1],
axis: null
},
marks: [
Plot.text(data, {
text: (d) => `${medals.gold}`.repeat(d.Gold),
y: "nation",
frameAnchor: "left",
fontSize: 20,
lineWidth: 70,
}),
Plot.text(data,
Plot.stackX({
text: (d) => `${medals.silver}`.repeat(d.Silver),
y: "nation",
frameAnchor: "left",
fontSize: 20,
dx: 0,
dy: 20
})),
Plot.text(data,
Plot.stackX({
text: (d) => `${medals.bronze}`.repeat(d.Bronze),
y: "nation",
frameAnchor: "left",
fontSize: 20,
dx: 0,
dy: 40
}))
]
}))
viewof data2016 = Inputs.toggle({label: "Rio Olympics", value: true})
medalsIso(olympicsData)
olympicsData = data2016 ? olympicsTop10Nations2016 : olympicsTop10Nations2020
olympicsTop10Nations2016 = FileAttachment("olympics-top10-nations-2021.csv").csv()
continents = ({ Europe: "blue", Asia: "yellow", Africa: "black", Australia: "green", America: "red" })
turkeyEaten = [
{ holiday: "Thanksgiving", count: 46000000 },
{ holiday: "Christmas", count: 22000000 }
]
turkeyImage = FileAttachment("christmas-turkey-2990.svg").image()
turkeySrc = FileAttachment("christmas-turkey-2990.svg").url()
createArray = (n) => {
let arr = [];
for (let i = 1; i <= n; i++) {
arr.push(i);
}
return arr
}
createArray(11)
d3.range(1,11)
turkeyEaten
createTurkeyArray = (holiday, count) => createArray(count).map((d) => ({
holiday: holiday,
src: turkeySrc
}))
turkeyData = [...createTurkeyArray("Thanksgiving", 46 / 2), ...createTurkeyArray("Christmas", 22 / 2 )]
Plot.plot({
height: 120,
width,
marginLeft: 90,
y: {
label: null,
tickPadding: 20,
},
marks: [
Plot.image(
turkeyData,
Plot.stackX({
y: "holiday",
r: 20, //size of the circle images
src: turkeySrc
})
)
]
})
createArray(121)
calculateIconLayout(10,102)
createDeepMatrix = (iconsPerRow, totalIcons) => calculateIconLayout(iconsPerRow, totalIcons).map((d, i) =>
createArray(d).map((t) => {
return { x: t, y: i+1 }
})
)
personOutlined = FileAttachment("person-filled.svg").url()
personFilled = FileAttachment("person-outlined.svg").url()
createIconMatrixPlot(iconsPerRow, iconsTotal, iconsFilled)
matrixData = createDeepMatrix(10, 100).flat()
viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})
viewof range = Inputs.range([0, 100], {label: "Amount", step: 0.01})
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.
