The end-to-end solution for building and hosting better data apps, dashboards, and reports.
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 yearsDorling Cartograms in Plot.carto w/ D3 to create the force layout
Connected Scatter
function connectedScatterPlot(){
return addTooltips(Plot.plot({
marks: connectedScatter(topX, {
x: d => d.labor_force / compareToYear.get(d.id).labor_force - 1,
y: d => d.rate - compareToYear.get(d.id).rate,
sort: d => +d.year,
r: d => JSON.stringify(+d.year),
fill: d => d.employed / compareToYear.get(d.id).employed - 1,
xBefore: d => compareToYear.get(d.id).labor_force,
xAfter: d => d.labor_force,
yBefore: d => compareToYear.get(d.id).rate ,
yAfter: d => d.rate
}),
facet: {
data: topX,
y: d => d.county + ", " + d.state,
marginRight: 150
},
height: 3000,
width: 600,
fy: {
domain: d3.groupSort(
topX,
g => -d3.max(g,
d => d.employed / compareToYear.get(d.id).employed - 1), d => d.county + ", " + d.state)
},
x: {
label: "% change in labor force since " + yearToCompareTo
},
y: {
label: "difference in unemployment rate since " + yearToCompareTo
},
r: {
domain: [2000,2020],
range: [1, 8]
},
color: {
type: "diverging",
domain: [-.5,0,.5],
clamp: true,
//legend: true,
label: "% change in number of people employed since " + yearToCompareTo,
},
}))
}
function connectedScatter(data, {
x = null,
y = null,
sort = null,
fill = null,
r = null,
xBefore = null,
xAfter = null,
yBefore = null,
yAfter = null
} = {}) {
return Plot.marks(
Plot.ruleX([0]),
Plot.ruleY([0]),
Plot.line(data, {
x,
y,
sort,
stroke: "#aaa",
curve: "catmull-rom"
}),
Plot.dot(data, {
x,
y,
r,
fill,
stroke: "purple",
title: d => d.year +
"\nChange in labor force since " + yearToCompareTo + ": " + d3.format(".2%")(x(d)) + "\n(" + xBefore(d) + " in " + yearToCompareTo + " and " + xAfter(d) + " in " + d.year + ")" +
"\nDifference in unemployment rate since " + yearToCompareTo + ": " + (y(d) > 0 ? "+" : "")+ d3.format(".2f")(y(d)) + "\n(" + yBefore(d) + " in " + yearToCompareTo + " and " + yAfter(d) + " in " + d.year + ")"
})
)
}
numCounties = 30
import { topX } with { yearToCompareTo, numCounties } from "@observablehq/sources-for-outlier-2022-notebooks"
topX
compareToYear = new Map(topX.filter(m => m.year == yearToCompareTo).map(k => [k.id, k]))
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.
