Avatar credit --> Michelle Chandra dirtalleydesign.com/blogs/news/visual-design-and-generative-art
workbook1 = FileAttachment("Data_Olympics.xlsx").xlsx()
workbook1.sheetNames
medal_data = workbook1.sheet(0, {
headers: true,
})
medal_data
Type Table, then Shift-Enter. Ctrl-space for more options.
medal_data
X
GDP per capita (2023)
Y
Gender Diff
Color
—
Size
Total Medals
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.
radioMapping = ({
"Total": "Gender Diff",
"Gold":"Gold Diff",
"Silver":"Silver Diff",
"Bronze": "Bronze Diff",
})
htmlCell = html`
<div style="font-size: 36px">
Gender Difference in Total Medals by GDP Per Capita
<div style="font-size: 26px">
Paris Summer Olympics 2024
</div>
<p>
<div style="font-size: 16px">
Choose Medal Type
${viewof SelectedMedal}
</div>
<p>
<div style="font-size: 16px">
Search Country
${viewof SelectedCountry}
</div>
<p>
<div style="font-size: 16px">
Circle Size - Total Medals
${sizeLegend}
</div>
${chart}
</div>
`
chart = Plot.plot({
width,
height: 700,
y: {type: "linear",
label: "Gender Discrepency",
grid: true,
domain: [-65,80]},
x: {grid: true},
r: {domain: rDomain, range: [2, 50]},
margin: 40,
paddingOuter: 300,
marks: [
Plot.ruleY([0], { stroke: "#d3d3d3" }),
Plot.dot(medal_data, {
x: "GDP per capita (2023)",
y: (d) => d[radioMapping[SelectedMedal]],
r: "Total Medals",
stroke: "#333",
fill: "Gender Diff",
fillOpacity: d => SelectedCountry.includes(d.Country) ? 1: 0.2,
strokeOpacity: d => SelectedCountry.includes(d.Country) ? 1: 0.2,
channels: {Country: "Country",
["Gender Diff"]:
{value: (d) => d[radioMapping[SelectedMedal]],
label: "Gender Difference"},
["GDP per capita (2023)"]:
{value: "GDP per capita (2023)",
label: "GDP"}},
tip: {
format: {
Country: true,
r: true,
["Gender Diff"]: true,
["GDP per capita (2023)"]: (d) => `$${d}`,
y: false,
x: false,
fill: false,
fillOpacity: false,
strokeOpacity: false
}
}
}),
Plot.crosshair(medal_data, {x: "GDP per capita (2023)", y: (d) => d[radioMapping[SelectedMedal]]})
],
color: {
type: "diverging-symlog",
scheme: "RdYlGn",
legend: true,
label: "More Male Medals More Female Medals",
pivot: 0,
symmetric: true
}
})
rDomain = d3.extent(medal_data, d => d["Total Medals"])
sizeLegend = Plot.plot({
height: 110,
r: {domain: rDomain, range: [2, 50]},
x: {domain: [-2, 80*5], ticks: false},
y: {ticks: false},
marks: [
Plot.dot([1, 10, 50, 125, 300], {x: (d, i) => i+9*Math.sqrt(d-1), y: 0, r: d => d, fill: "#A0E775", stroke: "#333"}),
Plot.text([1, 10, 50, 125, 300], {x: (d, i) => i == 0? 4 : i == 1? 40: i + 9*Math.sqrt(d-1), y: 0, text: d => d, fontSize: 16}),
]
})
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.
