Data Vizioneering.
Trying freelance after a lot of BI
Public
Edited
Jan 15
html`<svg>
<defs>
<path
id="test"
d="${circlePath(50,50,30)}"
/>
</defs>
<path
d="${circlePath(50,50,25)}"
style="fill:none;stroke:#626262;stroke-width:1px"
/>
<text>
<textPath href="#test" fill="#626262" text-anchor="middle" startOffset="0"
style="font-size: 0.7rem;text-anchor:start;">${testText}</textPath>
</text>
</svg>`
html`<svg>
<defs>
<path
id="test1"
d="${circlePath(50,50,27,true)}"
/>
</defs>
<path
d="${circlePath(50,50,30)}"
style="fill:none;stroke:#626262;stroke-width:1px"
/>
<text>
<textPath href="#test1" fill="#626262" text-anchor="middle" startOffset="0"
style="font-size: 0.7rem;text-anchor:start;">${testText}</textPath>
</text>
</svg>`
testText = "Text for Legend"
function circlePath (cx, cy, r, inner=false) {
const path = d3.path();
path.arc(cx,cy, r, Math.PI * 1, Math.PI * 3, inner);
return path.toString();
}
circlePath(10,10,100)
html`<svg>
<path
d="${semiCirclePath(50,50,25,- Math.PI/2,Math.PI/2)}"
style="fill:none;stroke:#626262;stroke-width:3px"
/>
<path
d="${semiCirclePath(50,50,20,Math.PI/2,-Math.PI/2)}"
style="fill:none;stroke:#626262;stroke-width:3px"
/>
</svg>`
function semiCirclePath (cx, cy, r, startAngle, endAngle) {
const path = d3.path();
path.arc(cx,cy, r, startAngle, endAngle,0);
return path.toString();
}
Plot.plot({
width,
insetLeft: 10,
x: {
reverse: true,
axis: "top",
grid: true,
interval: 1,
ticks: _.range(
d3.min(dataset, (d) => d.Year),
d3.max(dataset, (d) => d.Year) + 1,
4
),
tickFormat: d3.format(".0f")
},
y: {
grid: true,
domain: sportYearCount.map((d) => d.Sport)
},
marginLeft: 140,
insetLeft: 10,
marks: [
Plot.dot(
dataset,
Plot.group(
{},
{
y: "Sport",
x: "Year",
sort: { y: "-x" }
}
)
)
]
})
dataset = [...athlete_events, ...olympians_2020]
.filter((f) => f.Season == "Summer")
.map((d) => ({
...d,
Continent: Object.entries(country_continent).reduce(
(ac, cur) => ac || (cur[1].includes(d.NOC) && cur[0]),
false
)
}))
d3.group(
dataset.filter((f) =>
[
...Object.keys(sport_translation_2020),
"Gymnastics",
"Cycling",
"Swimming",
"Alpinism"
].includes(f.Sport)
),
(d) => d.Sport,
(d) => d.Event
)
athlete_events.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
country_continent = ({
Africa: [
"LES",
"GAM",
"RHO",
"MTN",
"LIB",
"DZA",
"AGO",
"BEN",
"BWA",
"BFA",
"BDI",
"CPV",
"CMR",
"CAF",
"TCD",
"COM",
"COD",
"COG",
"DJI",
"EGY",
"GNQ",
"ERI",
"SWZ",
"ETH",
"GAB",
"GMB",
"GHA",
"GIN",
"GNB",
"CIV",
"KEN",
"LSO",
"LBR",
"LBY",
"MDG",
"MWI",
"MLI",
"MRT",
"MUS",
"MAR",
"MOZ",
"NAM",
"NER",
"NGA",
"RWA",
"STP",
"SEN",
"SYC",
"SLE",
"SOM",
"ZAF",
"SSD",
"SDN",
"TZA",
"TGO",
"UGA",
"ZMB",
"ZWE",
"CHA",
"SUD",
"NGR",
"ALG",
"RSA",
"TAN",
"TUN",
"LBA",
"CGO",
"NIG",
"ANG",
"SEY",
"TOG",
"GUI",
"BOT",
"SAA",
"ZIM",
"MAW",
"ZAM"
],
Asia: [
"EUN", // This is russia the after USRR. Asia or Europe? I don't know. Big importance in 1992
"MYA",
"HKG",
"YMD",
"BAN",
"PLE",
"UAR",
"AFG",
"ARM",
"AZE",
"BHR",
"BGD",
"BTN",
"BRN",
"KHM",
"CHN",
"CYP",
"GEO",
"IND",
"IDN",
"IRN",
"IRQ",
"ISR",
"JPN",
"JOR",
"KAZ",
"KWT",
"KGZ",
"LAO",
"LBN",
"MYS",
"MDV",
"MNG",
"MMR",
"NPL",
"PRK",
"OMN",
"PAK",
"PHL",
"QAT",
"SAU",
"SGP",
"KOR",
"LKA",
"SYR",
"TWN",
"TJK",
"THA",
"TLS",
"TUR",
"TKM",
"ARE",
"UZB",
"VNM",
"YEM",
"IRI",
"KUW",
"MAS",
"KSA",
"UAE",
"YAR",
"INA",
"PHI",
"BRU",
"NBO",
"OMA",
"TPE",
"VIE",
"BHU",
"UNK",
"ROC",
"EOR"
],
Europe: [
"BOH",
"TCH",
"BUL",
"DEN",
"NED",
"ALB",
"AND",
"ARM",
"AUT",
"AZE",
"BLR",
"BEL",
"BIH",
"BGR",
"HRV",
"CYP",
"CZE",
"DNK",
"EST",
"FIN",
"FRA",
"GEO",
"DEU",
"GRC",
"HUN",
"ISL",
"IRL",
"ITA",
"KAZ",
"XKX",
"LVA",
"LIE",
"LTU",
"LUX",
"MLT",
"MDA",
"MCO",
"MNE",
"NLD",
"MKD",
"NOR",
"POL",
"PRT",
"ROU",
"RUS",
"SMR",
"SRB",
"SVK",
"SVN",
"ESP",
"SWE",
"CHE",
"TUR",
"UKR",
"GBR",
"VAT",
"GRE",
"URS",
"GER",
"SUI",
"GDR",
"MON",
"SLO",
"POR",
"PAR",
"FRG",
"CRO",
"HAI",
"LAT",
"YUG",
"ANT",
"KOS"
],
NorthAmerica: [
"GRN",
"CRC",
"ATG",
"BHS",
"BRB",
"BLZ",
"CAN",
"CRI",
"CUB",
"DMA",
"DOM",
"SLV",
"GRD",
"GTM",
"HTI",
"HND",
"JAM",
"MEX",
"NIC",
"PAN",
"KNA",
"LCA",
"VCT",
"TTO",
"USA",
"NCA",
"JAM",
"BER",
"ANZ",
"ESA",
"PUR",
"HON",
"MRI",
"SKN",
"VIN",
"GUA",
"HAI",
"LAT",
"IVB",
"ISV",
"MAD",
"MAL",
"GUM",
"CAY",
"BAR",
"GBS",
"BOT",
"ROT",
"CAM",
"SOL",
"CRT",
"GEQ",
"SAM",
"CRO",
"BIZ",
"SCG",
"IOA",
"BAH",
"GUA",
"NFL",
"BER",
"GUM"
],
SouthAmerica: [
"CHI",
"ARG",
"BOL",
"BRA",
"CHL",
"COL",
"ECU",
"GUY",
"PRY",
"PER",
"SUR",
"URY",
"VEN",
"URU",
"PAR",
"AHO",
"SAA",
"HAI",
"VAN",
"BOT",
"GUI"
],
Oceania: [
"AUS",
"FJI",
"KIR",
"MHL",
"FSM",
"NRU",
"NZL",
"PLW",
"PNG",
"WSM",
"SLB",
"TON",
"TUV",
"VUT",
"FIJ",
"SRI",
"COK",
"WIF",
"BUR",
"SAM",
"ARU",
"ASA",
"VAN",
"TGA",
"NFL",
"NEP",
"MGL",
"BER",
"GUM"
]
})
gsap = gs.gsap
gs = require('gsap@3.5.0/dist/gsap.js')
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.
