The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
outlier 2022
Edited
Feb 11, 2022
11 stars
outlier 2022
Examples from: Three Simple Flexible tools for Empowered Data VisualizationSet scheme, min, and max for color in a choroplethDiverging Scales - US Map Unemployment Data
Bar and arrow charts to compare unemployment rates across years
Connected ScatterDorling Cartograms in Plot.carto w/ D3 to create the force layout
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
colorDecreaseIncrease = ['purple', '#ff8000']
Insert cell
orderXBy = ({
alphabetic: d => d.county + ", " + d.state,
year1: d => d.year1.rate,
year2: d => d.year2.rate,
state: d => d.state
})
Insert cell
Insert cell
orderBy = ({
"default (alphabetical)": d3.sort(topXOneYear, d => d.county + ", " + d.state).map(d => d.county + ", " + d.state),
'labor force in year...': d3.sort(topXOneYear, d => -d.labor_force).map(d => d.county + ", " + d.state),
'unemployment rate in year...': d3.sort(topXOneYear, d => -d.rate).map(d => d.county + ", " + d.state),
"state name": d3.sort(topXOneYear, d => -d.state).map(d => d.county + ", " + d.state),
})
Insert cell
topXOneYear = top30.filter(d => d.year == yearToSortBy)
Insert cell
dataSelectedYears = top30.filter(d => yearsToInclude.includes(d.year))
Insert cell
yearToCompareTo = "2007"
Insert cell
twoYearsCompared = Array.from(diffs(subset, year1, year2), ([key, value]) => (value) )// recession vs pandemic
Insert cell
subset.find(d => d.year == "2007" & d.county == "Palm Beach County")
Insert cell
Insert cell
import { topX as top30, diffs, commonColor, collectionPreviews } with { yearToCompareTo } from "@observablehq/sources-for-outlier-2022-notebooks"
Insert cell
numCounties = 150
Insert cell
import { topX as top150} with { yearToCompareTo, numCounties } from "@observablehq/sources-for-outlier-2022-notebooks"
Insert cell
Insert cell
import {addTooltips} from "@mkfreeman/plot-tooltip"
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