Alan McConchie

@almccon·14 public vizzes

City density filtering by population and proximity

This interactive map visualizes global city density by filtering prominent urban centers from smaller neighbors. Gray dots represent all cities with populations over 50,000 from OpenStreetMap data, while blue and white highlighted cities emerge through an iterative algorithm that suppresses less populous cities within proximity-based buffers. The visualization uses D3.js with `geoNaturalEarth1` projections, `geoPath` for rendering country boundaries from World Atlas TopoJSON, and Turf.js functions like `buffer`, `booleanPointInPolygon`, and `distance` to calculate exclusion zones. Circle sizes reflect population through a square-root scale, while buffer radii decrease for larger cities.

Jun 12, 2024

Loading thumbnail…

States with Stamen employees

A U.S. map highlights the six states where Stamen employees reside as of January 2022, with those states filled in pink and the rest gray, overlaid with white state borders. Built with D3 v4, it loads TopoJSON US state boundaries via `d3.json` and renders them as SVG paths using `d3.geoPath`. The `topojson.feature` API extracts state geometries, and a simple `.classed` check applies the highlight color based on state IDs, with the entire map scaled and shifted by an SVG transform.

Jan 20, 2022

Loading thumbnail…

City density filtering by population and proximity, Mercator

This visualization filters city labels by population and proximity on a Mercator projection. Gray dots represent all cities from an OpenStreetMap dataset (tagged `place=city`), while highlighted dots show larger cities with smaller neighbors filtered out within a variable buffer radius. The example uses `d3.geoMercator` and `d3.geoPath` for mapping, `d3.scaleSqrt` for circle sizing, and `d3.scaleLinear` for buffer scaling. Country boundaries come from World Atlas TopoJSON, processed with the TopoJSON library. The algorithm applies a proximity-based filtering approach with variable buffer distances, demonstrating a method for decluttering dense point data.

Aug 24, 2021

Loading thumbnail…

City density filtering by population and proximity

This example displays a world map with cities filtered by population, showing only those with over 2 million residents as semi-transparent circles scaled by population size via `d3.scaleSqrt`. Geographic context comes from World Atlas TopoJSON, rendered using `d3.geoNaturalEarth1` and `d3.geoPath`. React manages the component state, fetching city data from an OpenStreetMap CSV through a custom `useCities` hook, while the `Marks` component renders the projected spheres, landmasses, and boundaries.

Aug 22, 2021

Loading thumbnail…

US House of Representatives reapportionment

This visualization animates the reapportionment of U.S. House of Representatives seats after the 2020 census, comparing each state’s population per representative between 2010 and 2020. A circle for each state is sized proportionally to total population, while concentric rings represent each seat, with area scaling to population-per-seat. Greener rings indicate more people per seat (underrepresentation), bluer indicate fewer. The animation uses `d3.transition` to morph ring radii and colors, `d3.geoPath` to render state polygons, and `d3.scaleSqrt` for circle sizing, alternating between two census years based on CSV and GeoJSON data.

Apr 30, 2021

Loading thumbnail…

Simulated COVID maps in the US and Canada

This interactive map simulates COVID-19 infection rates across the US and Canada. Users toggle between provinces and census divisions in Canada, and states and counties in the US, as well as between proportional and classed circle scaling. The visualization uses D3 v5 with a stereographic projection (`d3.geoStereographic`) and `d3.geoPath` to render the base GeoJSON polygons. Circles representing fake infections are sized using `d3.scaleSqrt` or `d3.scaleThreshold`, drawing on population data from the 2016 Canadian census and 2019 US county estimates.

Apr 15, 2021

Loading thumbnail…

Multivariate Choropleth Experiments with Clipped Outline

This visualization displays multivariate racial demographic data for New York census tracts, blending three HCL colors—white, black, and Asian—through a multiplicative d3.scaleSqrt transform to show population concentrations. Each tract’s fill combines opacities scaled by population counts, with a clip-path masking the map to the state’s simplified shoreline. Built with D3 v6 and topojson, it fetches American Community Survey data and renders SVG paths via d3.geoPath, plus an ordinal color legend.

Apr 6, 2021

Loading thumbnail…

Monoliths Delaunay Triangulation

This visualization displays a rotating globe with Delaunay triangulation lines connecting the locations of reported monoliths, which appear as bright points on a dark background. The orthographic projection uses d3.geoOrthographic and d3.geoPath to render world country boundaries from TopoJSON data. The triangulation is computed with d3.geoVoronoi, which generates the network of links between monolith sites, while d3.hexbin adds slight jitter to prevent exact alignment. The globe supports drag and zoom interactions via d3.drag and d3.zoom.

Feb 18, 2021

Loading thumbnail…

2020 candidates vs 2016 (preliminary results)

This interactive visualization compares the 2020 presidential election results against the 2016 election, presenting two choropleth maps of the United States. The top map shows the 2020 margin between Biden and Trump, while the bottom map displays the 2016 margin between Clinton and Trump, with states colored on a blue-purple-red scale. Built with D3 v5, it uses `d3.geoAlbersUsa()` for the map projection and `d3.geoPath()` to render state boundaries. Vote totals are aggregated from county-level data provided by The New York Times for 2020 and the US_County_Level_Election_Results_08-20 dataset for 2016.

Nov 17, 2020

Loading thumbnail…

2020 presidential election margins (preliminary results)

This visualization depicts the 2020 presidential election state vote margins using concentric rings, where the inner radius represents the losing party's votes and the outer radius the winner's, effectively highlighting surplus votes. The D3.js v5 map uses `d3.geoAlbersUsa` and `d3.geoPath` to render state borders, with `d3.arc` generating the proportional rings. Data is sourced from The New York Times election API, with circle sizes scaled using `d3.scaleSqrt`.

Nov 14, 2020

Loading thumbnail…

States with population less than 3 million (in red)

A choropleth of the United States highlights states with fewer than three million residents in red, with California singled out in blue, set against light gray for all other states. The map shows the stark contrast between California’s population and the combined populations of seventeen smaller states. The visualization uses D3 v4’s `d3.geoPath` to project US TopoJSON boundaries and renders the result as SVG, with each state fill assigned via a fixed list of FIPS-state codes from the source data.

Oct 20, 2020

Loading thumbnail…

States with population less than 3 million

A choropleth of the contiguous United States and Alaska highlights states with fewer than three million residents in red, California in blue, and all others in light gray. The map uses D3 v4 with `d3.geoPath` and TopoJSON to project and draw state boundaries from the us-10m dataset. Red states include Montana, Wyoming, and Vermont, while blue California is emphasized to show that its early 2020 vote count exceeded the total population of each red state.

Oct 20, 2020

Loading thumbnail…

BC Offsite Species

This visualization displays British Columbia offsite species data on a world map, with bubble size reflecting area in square kilometers. Users can brush the time-series histogram below to filter the mapped points. The map uses d3.geoPath with Albers projection and country boundaries from the World Atlas TopoJSON. The histogram bins data by month using d3.histogram and d3.scaleTime, with brushX interactions syncing the view.

Apr 26, 2020

Loading thumbnail…

An interactive D3 map

This interactive map visualizes a world map with airports and flight routes, highlighting connections from Bozeman (BZN) to major hubs. It uses d3.geoPath with a geoAlbers projection to render country boundaries, airport points, and Voronoi cells. Airports bounce into view with d3 transitions, while flight arcs are drawn as MultiLineStrings. Data comes from CSV files and the world-atlas TopoJSON, with svg elements and animation for interactivity.

Nov 27, 2019