Independent Data Analytics Consultant, passionate about data visualization and storytelling · she/her 🏳️🌈
Public
Edited
Oct 11, 2024
9 stars
barChart = () => {
return Plot.plot({
title: 'Total Female Olympic Athletes by Sport',
subtitle: "Click to drilldown into a sport",
height:400,
marginLeft: 0,
x: {tickSize:0, grid:true, domain: [0, 1200]},
y: { tickSize:0, label:null, tickFormat: (y) => ''},
marks: [
Plot.barX(female_olympians, Plot.groupY(
{x: "count"},
{y: "sport", title: "sport", fill: d=> d.sport === clicked ? '#19E385' : '#01BAEF', insetTop:10, insetBottom:10, render: onClick, sort: {y: "-x"}})),
Plot.text(female_olympians, Plot.groupY({x: "count", text: "count"}, {y: "sport", dx: 15, sort: {y: "-x"}})),
Plot.text(female_olympians, Plot.groupZ(
{y: "first", text: "first"},
{y: "sport", z: 'sport', x:0, text:"sport",textAnchor: "start", dy:-17, fontWeight:'bold', fontSize:13}))
],
tooltip: {fill: '#19E385', opacity: 1}
})
}
densityChart = () => {
return Plot.plot({
height: 400,
title: 'Weight Distribution: ' + clicked,
y: {grid: true, tickSize:0},
x: {label: 'Weight (lbs)', tickSize:0},
marks: [
Plot.areaY(female_olympians.filter(d=> d.sport === clicked),
Plot.binX({y: 'count'},{x: "weight", fill: '#19E385', fillOpacity: 0.8, curve: 'basis', thresholds:40, stroke:'#19E385', strokeWidth:2}))
]
})
}
parentChart = () => {
return Plot.plot({
title: 'Total Female Olympic Athletes by Sport',
subtitle: "Click to drilldown into a sport",
height:400,
width: 700,
marginLeft: 0,
x: {tickSize:0, grid:true, domain: [0, 1200]},
y: { tickSize:0, label:null, tickFormat: (y) => ''},
marks: [
Plot.barX(female_olympians, Plot.groupY(
{x: "count"},
{y: "sport", title: "sport", fill: '#01BAEF', insetTop:10, insetBottom:10, render: onClickDrilldown, sort: {y: "-x"}})),
Plot.text(female_olympians, Plot.groupY(
{x: "count", text: "count"},
{y: "sport", dx: 15, sort: {y: "-x"}})),
Plot.text(female_olympians, Plot.groupZ(
{y: "first", text: "first"},
{y: "sport", z: 'sport', x:0, text:"sport",textAnchor: "start", dy:-17, fontWeight:'bold', fontSize:13}))
],
tooltip: {fill: '#19E385', opacity: 1}
})
}
drilldownChart = () => {
const subset = female_olympians.filter(d=> d.sport === clickedGroup)
const count = subset.length
return Plot.plot({
height: 400,
width: 700,
title: 'Weight Distribution: ' + clickedGroup,
subtitle: "Total of " + count + " athletes in this group",
y: {grid: true, tickSize:0},
x: {label: 'Weight (lbs)', tickSize:0},
marks: [
Plot.text(subset, Plot.groupZ({text: 'first'}, {z: 'sport', frameAnchor: "top-right", text: d=> "Return", render: onClickReturn, fontSize: 12, className: "return-button"})),
Plot.areaY(subset,
Plot.binX({y: 'count'},{x: "weight", fill: '#19E385', fillOpacity: 0.8, curve: 'basis', thresholds:40, stroke:'#19E385', strokeWidth:2}))
]
})
}
displayChart = (x) => {
return x === 'Drilldown' ? drilldownChart() : parentChart()
}
onClick = (index, scales, values, dimensions, context, next) => {
const el = next(index, scales, values, dimensions, context);
const rects = el.querySelectorAll("rect");
for (let i = 0; i < rects.length; i++) {
const d = values.channels.y.value[i];
rects[i].addEventListener("click", () => {
mutable clicked = d;
});
}
return el;
}
onClickDrilldown = (index, scales, values, dimensions, context, next) => {
const el = next(index, scales, values, dimensions, context);
const rects = el.querySelectorAll("rect");
for (let i = 0; i < rects.length; i++) {
const d = values.channels.y.value[i];
rects[i].addEventListener("click", () => {
mutable clickedGroup = d; // Set clicked value on click
mutable chart = 'Drilldown'; // Change chart to 'drilldown'
});
}
return el;
}
onClickReturn = (index, scales, values, dimensions, context, next) => {
const el = next(index, scales, values, dimensions, context);
const texts = el.querySelectorAll("text");
for (let i = 0; i < texts.length; i++) {
texts[i].addEventListener("click", () => {
mutable chart = 'Parent';
});
}
return el;
}
import {Plot} from "@mkfreeman/plot-tooltip"
function toSentenceCase(str) {
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
}
mutable clicked = "Athletics"
mutable chart = null
mutable clickedGroup = "Athletics"
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.
