The avatar for @tashapiro
Tanya Shapiro
Independent Data Analytics Consultant, passionate about data visualization and storytelling · she/her 🏳️‍🌈
Public
#30DayChartChallenge
Edited
Apr 23, 2024
1 fork
5 stars
2
#30DayChartChallenge
#30DayChartChallenge D1: Part to a Whole
#30DayChartChallenge D4: Waffle Chart
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
filteredData = ghd_all_countries.filter(d=>d.country_iso3===selectedCountry)
Insert cell
Insert cell
Highcharts = {
const Highcharts = await require("highcharts");
await require("highcharts/highcharts-more.js");
await require("highcharts/modules/sunburst.js");
return Highcharts;
}
Insert cell
Insert cell
ghd_all_countries.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
country_regions.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
country_regions.csv
SELECT * FROM "country_regions"
Insert cell
countries = [...new Set(ghd_all_countries.map(d => d.country_iso3))].sort()
Insert cell
countryList = country_regions
.filter(d => countries.includes(d.country_iso3))
.map(d => [d.country_name, d.country_iso3])
.sort((a, b) => a[0].localeCompare(b[0]));
Insert cell
selectedCountryName = country_regions.filter(d=>d.country_iso3 === selectedCountry)[0].country_name
Insert cell
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:wght@300,400,500,600&display=swap');

body, text {
font-family: 'Roboto Condensed'!important;
}
h1, h2, p, table, label {
max-width:100%;
}

label {
font-weight:bold;
}

.main-level {
font-size: 20px;
}
</style>
Insert cell

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.
Learn more