The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Examples from: Three Simple Flexible tools for Empowered Data VisualizationDiverging Scales - US Map Unemployment DataBar and arrow charts to compare unemployment rates across yearsConnected ScatterDorling Cartograms in Plot.carto w/ D3 to create the force layout
Set scheme, min, and max for color in a choropleth
color = ({
label: 'min: ' + colorMin + ", max: " + colorMax,
scheme,
domain: [colorMin, colorMax],
legend: true,
reverse,
})
function colorMyMap(color, data, width) {
return Plot.carto({
projection: "identity", // because our us object is already projected to Albers USA
marks: [
// projection fitExtent comes from first feature mark
Plot.feature(topojson.feature(us, us.objects.states), {
strokeWidth: 0.5
}),
Plot.features(topojson.feature(us, us.objects.counties).features, {
fill: (d) => data.get(d.id),
strokeWidth: 1,
stroke: (d) => data.get(d.id)
}),
Plot.feature(topojson.feature(us, us.objects.states), {
strokeWidth: .5,
stroke: "white"
}),
Plot.feature(topojson.feature(us, us.objects.nation), {
strokeWidth: 1,
stroke: "black"
})
],
width,
height: width * 2/3,
color
})}
unemploymentMap = unemploymentMapsByYear.get(year.toString())
unemploymentSingleYear = Array.from(unemploymentMap).map(d => {return {'rate': d[1]}})
unemploymentMapsByYear // for each year there is a Javascript Map object with an id for the county and a value (this is the unemployment rate). Click through on the import below to see how this data was prepared.
unemploymentRateExtent = d3.extent(unemployment2000to2020, d => +d.rate) // define the extent from the full dataset
import {
unemployment2000to2020, // dataset that includes a row for each county/year and the metric of interest ("rate")
unemploymentMapsByYear, // a Javascript Map object with keys (years) and values (Maps with a key for each county, and value for the rate for that county and year)
us, counties, statemap, statemesh, // to define the geographic maps, used by Plot.carto
collectionPreviews, header
} from "@observablehq/sources-for-outlier-2022-notebooks"
Plot = require("@observablehq/plot@0.4.0").then(makeCarto)
import {makeCarto} from "@fil/plot-carto-0-4"
import {Scrubber} from "@mbostock/scrubber"
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.
