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 5, 2022
1 fork
10 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 DataBar and arrow charts to compare unemployment rates across yearsConnected Scatter
Dorling 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
unemploymentMap = new Map(unemployment2000to2020.filter(d => d.year == year).map(d => [d.id, {'labor_force': d.labor_force, 'rate': d.rate}]))
Insert cell
Insert cell
greaterThanCutoff = unemployment2000to2020.filter(d => greaterThanCutoffCountyIDs.includes(d.id))
Insert cell
greaterThanCutoffCountyIDs = Array.from(
d3.group(
unemployment2000to2020.filter(d => d.year == "2000" & d.labor_force > cutoffThreshold)
.sort((a,b) => b.labor_force - a.labor_force)
, d => d.id)
.keys()
)
Insert cell
Insert cell
Insert cell
import {makeCarto} from "@fil/plot-carto-0-5"
Insert cell
Plot = require("@observablehq/plot@0.4.0").then(makeCarto)
Insert cell
import {textcolor} from "@observablehq/text-color-annotations-in-markdown"
Insert cell
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