Geo
US Map — Albers USA Projection
An interactive map of the United States using the Albers USA composite projection, inspired by the Observable Plot Albers USA projection example. The chart displays US state boundaries and nation outline fetched from the us-atlas TopoJSON CDN, with major US cities plotted as colored dots by category (Tech, Finance, Government, Cultural, Industrial, Healthcare). Users can hover over city dots to see tooltips with city name, state, category, and population. Interactive controls include: a projection picker (Albers USA, Albers, Mercator, Equirectangular), a category filter dropdown to show only cities of a specific type, a land fill color picker (Light Gray, Pale Green, Pale Blue, Pale Yellow, Pale Pink, Pale Purple, Silver), a border opacity slider, a dot size slider, a toggle to scale dots by population, and a toggle to show/hide city name labels. Summary cards show the number of cities displayed, total population, number of states, and number of categories. A color legend maps each category to its dot color. Seed data for 40 major US cities is stored in a bf table called USCities.
Bivariate Choropleth Map
An interactive bivariate choropleth map of the United States inspired by the Observable Plot bivariate choropleth example. The chart displays ~3,200 US counties colored by two health variables simultaneously using a 3x3 bivariate color grid. County boundaries are rendered from the us-atlas TopoJSON CDN (pre-projected Albers coordinates with identity projection) using Plot.geo with Plot.centroid. Each county is classified into one of nine color bins based on quantile thresholds for both variables, creating a two-dimensional color encoding. Four health metrics are available: Diabetes Rate (%), Obesity Rate (%), Physical Inactivity (%), and Smoking Rate (%). Per-county values are deterministically derived from state-level CDC baselines with county-specific variation. Interactive controls include: an X variable dropdown and a Y variable dropdown (each selecting from the four health metrics, with mutual exclusion to prevent selecting the same metric for both axes), a color scheme picker (Purple-Teal, Pink-Blue, Green-Orange, Blue-Red), a state borders toggle, and a legend toggle. A rotated 3x3 square legend in the bottom-right corner shows the bivariate color mapping with axis labels for both variables and hover tooltips explaining each cell. Hover tooltips on the map show county name, state, and both metric values. Summary cards display total county count, average of each selected metric, and the Pearson correlation coefficient between the two variables. Seed data for 20 major US states is stored in a bf table called BivariateChoropleth.
US County Choropleth Map
An interactive choropleth map of the United States showing county-level data, inspired by the Observable Plot choropleth example. The chart uses Plot.geo with Plot.centroid to render ~3,200 US counties from the us-atlas TopoJSON CDN (pre-projected Albers coordinates with identity projection), colored by a data metric using a quantize color scale. Three data metrics are available via dropdown: Unemployment Rate (%), Median Income ($K), and Population Density (per sq mi). Per-county values are deterministically derived from state-level baselines with county-specific variation. Interactive controls include: a data metric dropdown (3 options), a color scheme picker (22 schemes including blues, greens, reds, viridis, turbo, warm, cool), a scale type selector (quantize, quantile, threshold, linear, sqrt, log), a number-of-bins slider (3–15, active for quantize scale), and a state borders toggle. Hover tooltips (Plot.tip) display county name, state, and the selected metric value. A color legend is rendered by Observable Plot. Summary cards show the total county count, average value, minimum, and maximum for the selected metric. State borders are drawn as white lines over the county fill. Seed data for 20 major US states is stored in a bf table called ChoroplethData.
Earthquake Globe
An interactive earthquake globe inspired by the Observable Plot earthquake globe example. The chart displays a 3D orthographic projection of Earth with seismic events plotted as scaled dots, where dot radius represents earthquake magnitude converted to Richter amplitude (Math.pow(10, magnitude)). Land masses are rendered using TopoJSON world-atlas data fetched from CDN with a dark ocean background and graticule grid. Earthquake dots are semi-transparent with a colored stroke. Interactive controls include: longitude rotation slider (-180° to 180°) and latitude rotation slider (-90° to 90°) to spin the globe, a minimum magnitude filter slider (2.5–7.0), an earthquake dot color picker (Red, Orange, Yellow, Magenta, Cyan, Lime), a land fill color picker (Dark Gray, Forest Green, Earth Tan, Slate Blue, Deep Purple), and a toggle to show/hide magnitude labels on M5.0+ events. Hover tooltips (Plot.tip with Plot.pointer) display location name, magnitude, depth in km, and region. Summary statistics cards show event count, maximum magnitude, average magnitude, and average depth. A visual magnitude scale legend shows relative dot sizes for M3–M6. Seed data for 30 earthquakes across global seismic zones is stored in a bf table called Earthquakes.
Election Wind Map
An interactive election wind map of the United States inspired by the Observable Plot election wind map example. The chart visualizes US 2020 presidential election results as directional vectors at county centroids, where vector direction indicates party (60° right-leaning for Republican in red, -60° left-leaning for Democrat in blue) and vector length encodes the product of victory margin and total votes, sqrt-scaled. US county boundaries, state mesh, and nation outline are fetched from the us-atlas@3 TopoJSON CDN and rendered with Plot.geo using the Albers USA projection. Plot.vector with Plot.centroid places a colored arrow at the geographic center of each of ~3,200 US counties. Synthetic county-level election data is deterministically generated from FIPS codes using a seeded pseudo-random function, with state-level partisan leanings (blue states, swing states, red states) producing a realistic distribution where ~83% of counties lean Republican but Democratic counties have higher vote totals (urban areas). Hover tooltips (Plot.tip with Plot.pointer composed with Plot.centroid) display county name, winning party, margin percentage, and total vote count. Interactive controls include: a min votes slider (0–200K, filtering out small counties), a min margin slider (0–50%, filtering close races), a vector scale slider (0.2×–3.0×, default 1.5×), a color theme dropdown (Classic Red/Blue, Pastel, Vivid, Muted, Orange/Teal, Crimson/Purple), and a state borders toggle. A directional legend shows red arrows pointing right (Republican) and blue arrows pointing left (Democrat). Summary cards display total county count, Republican county count (red background), Democrat county count (blue background), and total votes. Seed data for 15 notable US counties with real-world-inspired election results is stored in a bf table called ElectionWindMap.
Floor Plan
An interactive architectural floor plan rendered using Plot.geo with an identity projection, inspired by the Observable Plot floor plan example. The chart displays a multi-room house layout as colored GeoJSON polygons. Each room is color-coded by type (living, kitchen, bedroom, bathroom, study, hallway, storage, outdoor, structure). Users can hover over rooms to see tooltips with room name, type, and area. Interactive controls include a color scheme picker (Tableau10, Pastel, Set2, Accent, Dark2), a room type highlight filter that dims all other room types, a wall thickness slider, and a toggle to show/hide room labels. Summary cards below the chart display total room count, total area, and number of distinct room types. Seed data is stored in a bf table called FloorPlanRooms.
GeoTIFF Contours
An interactive filled contour visualization of global geographic data fields, inspired by the Observable Plot GeoTIFF contours example. Instead of loading a GeoTIFF raster, the chart generates synthetic global data fields (Surface Temperature, Sea Level Pressure, Annual Precipitation, Surface Elevation) from deterministic mathematical formulas on a 360×180 grid (1-degree resolution, 64,800 data points). The chart uses Plot.contour with fill and clip:“sphere” to render filled contour polygons on a world map projection, with Plot.sphere() drawing the globe outline. Interactive controls include: a data field dropdown (4 options: Surface Temperature in °C, Sea Level Pressure in hPa, Annual Precipitation in mm, Surface Elevation in m), a color scheme picker (Magma, Viridis, Turbo, Plasma, Inferno, YlGnBu, Spectral, RdYlBu, BuPu, Warm, Cool), a projection picker (Equal Earth, Natural Earth, Equirectangular, Orthographic, Mercator), a threshold count slider (5–60, default 30), a contour stroke width slider (0–2, default 0.25), a contour lines toggle, and a graticule grid toggle. A color legend is rendered by Observable Plot. Summary cards below the chart display the current field name, minimum value, mean value, and maximum value with units. Seed data for 4 data field definitions is stored in a bf table called ContourFields.
Hexbin Map
An interactive hexbin map of the United States inspired by the Observable Plot hexbin map example. The chart displays store locations aggregated into hexagonal bins on a US map using Plot.dot with Plot.hexbin transform. Each hexagon’s size represents the count of stores in that bin, and the fill color represents either the earliest opening date (min), latest opening date (max), or store count. US geographic data (state mesh and nation outline) is fetched from the us-atlas TopoJSON CDN. Interactive controls include: a projection picker (Albers, Albers USA, Mercator, Equirectangular), a color scheme dropdown (Spectral, YlGnBu, Turbo, Viridis, Warm, Cool, Plasma, RdYlBu), a hex color-by selector (Earliest Opening Date, Latest Opening Date, Store Count), a max hex radius slider (6–30px), a border opacity slider, and a toggle to show/hide the color legend. Hover tooltips display hexbin information. Summary cards show total stores, earliest opening year, latest opening year, and unique location count. Seed data for 90 store locations across the US spanning from 1962 to 2019 is stored in a bf table called StoreLocations.
Store Expansion Map — Small Multiples
An interactive small-multiples geographic map inspired by the Observable Plot map small multiples example. The chart visualizes store openings across the United States faceted by decade (1960s through 2010s) using Plot.geo for US state boundaries and nation outline, and Plot.dot for store locations plotted by longitude/latitude. Each facet panel shows a single decade of openings. US geographic data is fetched from the us-atlas TopoJSON CDN. Interactive controls include: a projection dropdown (Albers USA, Albers USA inset, Mercator, Equirectangular), a dot color picker (Steel Blue, Black, Red, Teal, Gold, Purple, Orange), a dot size slider (0.5–5), and a decade range selector with start/end dropdowns to filter which decades are shown. Hover tooltips (Plot.tip with Plot.pointer) display city name and year for each store dot. Summary cards below the chart show total stores in the selected range, number of decades displayed, and overall total store count. Seed data for 93 store openings across US cities is stored in a bf table called StoreOpenings.
Polar Projection Explorer
An interactive azimuthal map projection explorer inspired by the Observable Plot polar projection example. The chart displays a world map centered on Earth’s poles using d3-geo azimuthal projections with TopoJSON world-atlas data fetched from CDN. Land masses are rendered with country borders, and notable polar locations (such as North Pole, South Pole, Reykjavik, Tromsø, McMurdo Station, Alert, etc.) are plotted as red dot markers with labels and hover tooltips showing name, description, and coordinates. Interactive controls include: a projection type dropdown (Azimuthal Equidistant, Azimuthal Equal Area, Stereographic, Orthographic, Gnomonic), a North/South pole toggle that re-centers the view, a clip angle slider (10°–90°) controlling how much of the globe is visible, a longitude rotation slider (-180° to 180°), a land color dropdown (Charcoal, Slate Blue, Forest Green, Deep Purple, Coral, Earth Tan), and toggles to show/hide location markers and labels. An info bar below the chart displays the current projection, pole, visible radius, and location count. Seed data for 12 polar locations is stored in a bf table called PolarLocations.
Shockwave Distance Rings
An interactive geographic visualization of concentric distance rings radiating from a geological epicenter, inspired by the Observable Plot shockwave example showing the Hunga Tonga eruption. The chart uses Plot.geo to render world land masses from TopoJSON world-atlas CDN data, and draws colored concentric circles using d3.geoCircle centered on the selected epicenter. Each ring represents a fixed angular distance from the epicenter, color-coded by distance in kilometers (111.2 km per degree). The map projection is automatically rotated to center on the selected epicenter. Interactive controls include: an epicenter preset dropdown (10 options including Tonga/Hunga Tonga 2022, Krakatoa 1883, Mount Pinatubo 1991, Yellowstone Caldera, Tohoku Earthquake 2011, Sumatra Earthquake 2004, Mount St. Helens 1980, Eyjafjallajökull 2010, Mount Vesuvius, Mount Fuji), a projection picker (Equal Earth, Equirectangular, Orthographic, Mercator, Natural Earth, Azimuthal Equal Area), a color scheme dropdown (Turbo, Viridis, Plasma, Inferno, Magma, Warm, Cool, Rainbow, Sinebow), a ring spacing slider (5°–30° controlling density of concentric circles), and a line width slider (0.5–5px). An info bar displays the selected epicenter name and coordinates. A color legend shows the distance-to-km mapping. Seed data for 10 epicenter locations is stored in a bf table called Epicenters.
US Population Spike Map
An interactive spike map of the United States showing county-level population as vertical spikes, inspired by the Observable Plot spike map example. The chart uses Plot.geo to render the US nation outline (light gray fill) and state borders (white mesh) from the us-atlas TopoJSON CDN (pre-projected Albers coordinates with identity projection). Plot.spike with Plot.centroid places a tapered vertical line at the geographic center of each of ~3,200 US counties, where the spike height is proportional to county population. A custom spike legend in the bottom-right corner displays reference spikes at 2M, 4M, 6M, 8M, and 10M population with SI-prefix labels. Per-county populations are deterministically generated from 2020 Census state totals distributed across counties with a log-normal-like skew (few large counties, many small ones). Hovering over a spike shows a tooltip with county name, state, and population value. Interactive controls include: a spike color dropdown (Red, Steel Blue, Orange Red, Dark Green, Purple, Teal, Crimson, Dark Orange), a land fill color dropdown (Light Gray, Pale Green, Pale Blue, Pale Yellow, White, Silver), a max spike height slider (50–400px, default 200), a spike opacity slider (0.1–1.0, default 0.5), a state borders toggle, and a spike legend toggle. Summary cards below the chart display total county count, total US population, average population per county, and the largest county name and population. Seed data for 20 major US states with populations is stored in a bf table called SpikeMapData.
US State Centroids
An interactive map of the United States showing centroid dots at the geographic center of each state, inspired by the Observable Plot state centroids example. The chart uses Plot.geo to render state boundaries (from us-atlas TopoJSON CDN) with the Albers USA projection, plus Plot.dot with the Plot.centroid transform to place a dot at each state’s geographic center. Hovering over a centroid dot shows a tooltip with the state name, region, population, and capital city. Interactive controls include: a region filter dropdown (All, Northeast, South, Midwest, West) to show only states in a specific region, a dot color picker (Red, Steel Blue, Orange, Teal, Purple, Dark Green), a land fill color picker (Light Gray, Pale Green, Pale Blue, Pale Yellow, Pale Pink, White), a dot size slider (2–15), a border opacity slider (0–1), a “Color by Region” toggle that assigns each dot a color based on its US Census region (with a legend showing Northeast=blue, South=red, Midwest=teal, West=orange), a “Scale by Population” toggle that sizes each dot proportionally to the state’s population, and a “Show Labels” toggle that displays state abbreviation labels above each centroid. Summary cards below the chart show the count of states displayed, total US population, and number of regions. Seed data for all 50 US states with name, abbreviation, population, region, and capital is stored in a bf table called StateCentroids.
US Counties by First Letter
An interactive map of the United States showing county centroids filtered by the starting letter of the county name, inspired by the Observable Plot “V counties” example. The chart uses Plot.geo to render county mesh boundaries (thin, adjustable opacity) and state borders (thicker) from us-atlas TopoJSON CDN data with the Albers USA projection. Plot.dot with the Plot.centroid transform places a filled dot at the geographic center of each matching county, and Plot.text with Plot.centroid adds county name labels anchored to the right of each dot. Hovering over dots shows a tooltip with the county name and state. Interactive controls include: a starting letter dropdown (A–Z, default “V”) that filters all ~3,200 US counties to those whose name begins with the selected letter, a projection picker (Albers USA, Albers, Mercator, Equirectangular), a dot color picker (Black, Steel Blue, Red, Teal, Orange, Purple, Dark Green), a dot size slider (2–10), a county border opacity slider (0–0.5), and a toggle to show/hide county name labels. A “Matches” badge displays the count of matching counties. Below the chart, a scrollable grid lists all matching county names with their state, sorted alphabetically. Seed data for 14 notable US counties is stored in a bf table called CountyExplorer.
Wind Map
An interactive wind vector field visualization inspired by the Observable Plot wind map example. The chart renders a global wind field using Plot.vector, where each arrow shows wind direction (via rotation computed from u and v components using atan2) and wind speed (via arrow length and color). Wind data is generated deterministically from atmospheric circulation formulas on a configurable latitude/longitude grid (default 10° resolution, covering ±170° longitude and ±75° latitude, producing ~560 vectors). Four distinct wind patterns are available: Global Circulation (three-cell model with trade winds, westerlies, and polar easterlies), Tropical Cyclone (hurricane-like rotating vortex centered in the North Atlantic at -65°, 25°N with spiral inflow), Jet Stream (meandering high-altitude westerly band at ~45°N latitude), and Convergence Zone (Intertropical Convergence Zone with converging trade winds near the equator). World land masses are rendered from the world-atlas TopoJSON CDN using Plot.geo with configurable map projections (Equirectangular, Equal Earth, Natural Earth, Mercator). Hover tooltips (Plot.tip with Plot.pointer) display longitude, latitude, wind speed in m/s, compass direction, and u/v component values. Interactive controls include: a wind pattern dropdown (4 options), a color scheme dropdown (Turbo, Viridis, Plasma, Inferno, Magma, Cool, Warm, YlGnBu), a projection dropdown (4 options), a grid resolution dropdown (5°, 10°, 15°, 20°), a vector length slider (5–40px), an opacity slider (0.1–1.0), a Show Land toggle, and a Show Graticule toggle. A color legend shows the speed-to-color mapping. Summary cards display total vector count, mean speed, max speed, and min speed. Wind pattern metadata for 4 patterns is stored in a bf table called WindPatterns.
World Map Projections
An interactive world map projection explorer inspired by the Observable Plot world projections example. The chart displays Earth’s land masses, country borders, and a graticule grid using Plot.geo with TopoJSON world-atlas data fetched from CDN. Twenty different map projections are available including Equal Earth, Equirectangular, Mercator, Orthographic, Stereographic, Natural Earth, Azimuthal Equal Area, Conic Equal Area, Bertin 1953, Eckert III, Hammer, Mollweide, Robinson, Sinusoidal, and Winkel Tripel — sourced from d3-geo and d3-geo-projection. Interactive controls include: a projection type dropdown (20 options), longitude and latitude rotation sliders (-180° to 180° and -90° to 90°), a land fill color picker (Charcoal, Slate Blue, Forest Green, Deep Purple, Coral, Earth Tan, Midnight, Olive), an ocean fill color picker (Light Blue, White, Pale Cyan, Lavender, Very Light Gray, Pale Aqua), and toggles for graticule grid, country borders, and major city markers. Twenty major world cities are plotted as colored dots by continent (North America, South America, Europe, Asia, Africa, Oceania) with hover tooltips showing city name, country, continent, and population. A continent color legend is displayed below the chart. Seed data for 20 cities is stored in a bf table called WorldCities.