The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Feb 16, 2022
1 star
// replace with your data by uploading or importing a different CSV
import {unemployment as data} from "@d3/stacked-area-chart"
categoriesName = "industry"
metricName = "unemployed"
// a few functions to choose from for sorting the categories
sortOptions = ({
'alphabetical': (a,b) => a[0] > b[0] ? 1 : -1,
'largest to smallest': (a,b) => b[1] - a[1],
'smallest to largest': (a,b) => a[1] - b[1],
})
// extracts and sums the categories from the data based on the metricName and categoriesName
categoriesRolledUp = d3.rollups(data, v => d3.sum(v, d => d[metricName]), d => d[categoriesName])
// extracts the names of the categories from the categoriesRollupUp array
categories = categoriesRolledUp.map(d => d[0])
// filter and sort the categorical strings based on the selections from the checkboxes and radio buttons
categoriesFilteredSorted =
categoriesRolledUp.
filter(d => categoriesToShow.includes(d[0]))
.sort(sortOptions[selectedSortOption])
.map(d => d[0])
dataFiltered = data.filter(d => categoriesFilteredSorted.includes(d[categoriesName]))
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.
