The avatar for @tashapiro
Tanya Shapiro
Independent Data Analytics Consultant, passionate about data visualization and storytelling · she/her 🏳️‍🌈
Public
#30DayChartChallenge
Edited
Apr 29, 2024
Fork of #30DayChartChallenge D1: Part to a Whole
•
1 fork
6 stars
2
Insert cell
Insert cell
Insert cell
Insert cell
Highcharts.chart('container', {
chart: {
type: 'item'
},
title: {text: 'Breakdown of Minutes by Category', align:'left'},
credits: {enabled:false},
yAxis: {reversed: true},
plotOptions: {
item: {
marker: {symbol: 'square'},
}
},
series: [{
name: 'Category',
colors: ['#00BFB2','#48EB70','#EBCD49','#FF9D13','#F95738','#7F2FFF','#4DEAFF','#DCDCDC'],
layout: 'vertical',
data: chartData
}],
drilldown: {
series: [{
name: 'Somatic maintenance',
id: 'somatic maintenance',
data: drilldownData.filter(d=> d.id==='somatic maintenance').map(d=> [[d.name, d.y]])
}]
}
});

Insert cell
drilldownData.filter(d=> d.id==='somatic maintenance').map(d=> [[d.name, d.y]])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chartData = aggregatedData.map(d=>({name: d.id, drilldown: d.id.toLowerCase(), y: d.value, marker: 'square'}))
Insert cell
filteredData
select
category as id
,round(sum(hoursPerDayCombined)*60,0) as value
from filteredData
group by category
order by 2 desc
Insert cell
chartData
Insert cell
filteredData
select
lower(category) as id
,subcategory as name
,round(sum(hoursPerDayCombined)*60,0) as y
from filteredData
group by category, subcategory
order by 3 desc
Insert cell
filteredData = ghd_all_countries.filter(d=>d.country_iso3===selectedCountry)
Insert cell
'wdsfdgSDGDS'.toLowerCase()
Insert cell
Insert cell
Highcharts = {
const Highcharts = await require("highcharts");
await require("highcharts/highcharts-more.js");
await require("highcharts/modules/sunburst.js");
await require("highcharts/modules/item-series.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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more