Final Project Progress 1

100%

Final Project Progress 1

✓ Published2🌍 Public

Last edited Dec 12, 2025

Created on Oct 10, 2025

This interactive map of the United States visualizes the geographic distribution of marathon finishers by state. State boundaries are rendered as grey paths that turn green on hover, while red circles positioned at each state’s center scale in radius based on the total number of finishers recorded. The visualization loads US Atlas TopoJSON for state polygons, alongside CSV files listing state centers and finisher records. It uses d3.geoAlbers and d3.geoPath for projection and rendering, with d3.csvParse and topojson-client for data processing.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Final Project Progress 2

This visualization displays finisher counts from the 2024 Boston Marathon on a U.S. state map. It uses a static Albers projection to render state boundaries, with red circles sized relative to each state’s finisher count. Hovering over a state highlights it in green and shows a tooltip with the state name and total finishers. The data is loaded from CSV and TopoJSON sources, parsed with `d3.csvParse`, and processed with `topojson-client` alongside `d3.geoPath` and `d3.geoAlbers`.

BBen Trantanella

91% match

Loading thumbnail…

Final Project Progress 5

An interactive choropleth map of the United States visualizes the 2024 Boston Marathon finisher data, with each state’s circle size encoding the number of finishers while color darkness indicates the currently selected metric—number of finishers, average finish time, average age, or average second-half split difference. Using `d3.geoPath` and `d3.geoAlbers` to render state boundaries from TopoJSON and `d3.scaleLinear` for color mapping, the visualization loads finisher CSV data and state centers, enabling users to click legend items to switch between metrics, with hover tooltips and a dynamic color scale updating accordingly.

BBen Trantanella

90% match

Loading thumbnail…

Final Project Progress 3

This interactive choropleth map visualizes 2024 Boston Marathon finisher data by state, showing participant counts, average finish times, average age, and first- versus second-half split times. The map uses d3.geoAlbers and d3.geoPath to render U.S. states from TopoJSON data, with d3.scaleLinear color scales encoding the selected metric. Hovering over a state displays a custom HTML tooltip with the detailed statistics. The code fetches external CSV data for state centers and finisher records, filtering out Puerto Rico and the U.S. Virgin Islands.

BBen Trantanella

89% match

Loading thumbnail…

Final Project: 2024 Boston Marathon Data Vis

This interactive visualization displays 2024 Boston Marathon finisher data aggregated by U.S. state on an Albers equal-area projection map. Users can toggle between four coloring metrics—number of finishers, average finish time, average age, and average second-half split difference—with darker state colors indicating higher values. Circle size encodes the finisher count per state. Built with D3.js and topojson-client, it loads state boundaries from the us-atlas TopoJSON, parses CSV data via d3.csvParse, and renders geographic paths using d3.geoPath and a tooltip on hover.

BBen Trantanella

87% match

Loading thumbnail…

Final Project Progress 4

This interactive choropleth map visualizes 2024 Boston Marathon finisher data across U.S. states, with a clickable legend to toggle between four metrics: number of finishers, average finish time, average age, and average second-half split difference. The map uses D3’s `geoAlbers` projection and `geoPath` to render state boundaries from TopoJSON via `topojson-client`, while CSV data is parsed with `csvParse`. Hover effects and a tooltip are implemented with D3 selections, and color scales from `scaleLinear` update state fills dynamically.

BBen Trantanella

87% match

Loading thumbnail…

Let's make an interactive US Map with D3.js!

This interactive US map uses d3.geoAlbersUsa and d3.geoPath to render state boundaries from TopoJSON data, with each state displaying its name via SVG title elements. The visualization supports zooming and panning through d3.zoom, applying transforms to the SVG group containing the state paths. States are colored light green and highlight on hover, while the surrounding ocean appears as a light blue sphere backdrop. The map loads geographic data from a CDN-hosted US atlas file and renders everything client-side using D3 v5.

KKaitlyn Trudeau

74% match

Loading thumbnail…

US States Map

This example renders a geographic map of US states using D3 and TopoJSON, loading data from the us-atlas TopoJSON file. It draws each state with `d3.geoPath` and a `geoAlbersUsaTerritories` projection, which includes US territories. State boundaries appear as white strokes overlaid via a TopoJSON mesh, while the map updates reactively through the `d3-rosetta` StateProperty pattern. The visualization highlights the separation between states and provides a clean, basic template for choropleth or interaction extensions.

CCurran Kelleher

74% match

Loading thumbnail…

Final Project Week 1

Two small choropleth maps of U.S. states display two different data variables side by side, colored with distinct sequential scales. Users can click individual states to toggle their selection across both maps, with selected states tracked in a shared array. The maps are rendered as SVG paths from TopoJSON data, projected with a custom geoTransform scaling, and colored using d3.scaleLinear with data from CSV files filtered to 1970.

RRobert Curtis

74% match