Published
Edited
Dec 20, 2021
1 star
Data source: https://observablehq.com/@zanarmstrong/dataset-olympics
Despite there has been so many data viz been made using this dataset, I am going to pick this for practice.
1. 120 Years of Summer Olympics in One Chart
3. World Map
Plot.plot({
height: 600,
width: 900,
marginLeft: 100,
x:{
axis: null
},
y:{
axis: null
},
marks: [
Plot.cell(gridWorld, {
x: "x",
y: "y",
fill: null,
// stroke: 'black'
}),
// Plot.dot(gridWorld, {
// x: "x",
// y: "y",
// r: 5,
// // stroke: 'black'
// }),
Plot.text(gridWorld, {
x: "x",
y: "y",
text: "alpha3",
})
],
})
Reference
https://www.washingtonpost.com/sports/olympics/2021/07/31/oldest-youngest-olympians/
https://www.nytimes.com/interactive/2021/07/27/upshot/which-country-leads-in-the-olympic-medal-count.html
https://www.economist.com/graphic-detail/2021/07/29/olympic-records-are-being-broken-at-a-record-pace
https://fivethirtyeight.com/features/every-olympic-sport-in-one-chart/
https://www.lemonde.fr/les-decodeurs/article/2021/07/23/jeux-olympiques-de-tokyo-visualisez-les-sports-apparus-disparus-feminises-depuis-cent-vingt-cinq-ans_6089293_4355770.html
https://www.economist.com/graphic-detail/2021/07/25/which-is-the-strongest-olympic-team-of-all-time
https://twitter.com/geokaramanis/status/1421878642737487879
https://flourish.studio/2021/07/23/olympics-tokyo-2021/
https://olympic-medals.spren9er.de/
medals2016 = medalsByYear.find(d => d.year ==2016).countries.map(d => ({...d, info: gridWorldMap.get(d.country)}))
medalsByYear = Array.from(d3.rollup(medals, v => v.length, d=>d.Year, d => d.NOC), ([year, item]) => ({
year,
countries: Array.from(item, ([country,count]) => ({
country,
count
}))
}))
// d3.group(medals, d=> d.NOC)
sports
import {sports, events, medals} from "@mydu/weekly-unfolded-01-prep"
import { countryEmoji } from "@mattdzugan/making-maps-out-of-emojis"
import { SummaryTable } from "@observablehq/summary-table"
import {Table} from '@observablehq/inputs'
import { addTooltips } from "@mkfreeman/plot-tooltip"
import { athletics } from "@zanarmstrong/dataset-olympics";
import { gymnastics } from "@zanarmstrong/dataset-olympics"
import { yrs1920_1964_2016_summer } from "@zanarmstrong/dataset-olympics"
import {addAnimation} from "@mkfreeman/plot-animation"
import {
tidy,
startsWith,
groupBy,
summarize,
sum,
mutate,
select,
n,
mean,
everything,
arrange,
desc,
filter,
rate,
TMath,
pivotWider,
pivotLonger,
leftJoin,
count,
map,
complete,
fill
} from '@pbeshai/tidyjs' // observable import
gridWorldMap = d3.group(gridWorld, d=> d.alpha3)
gridWorld = d3.json("https://gist.githubusercontent.com/KarimDouieb/fbd29d80918c0b16aef837680eddb865/raw/0a2243629bf4c95f1853aac2aa6e2ebdda61cd38/worldTileGrid.json")
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.
