Skip to main content
Log in
B

Ben Trantanella

@bentrantanella·15 public vizzes

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.

Dec 12, 2025
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.

Dec 12, 2025
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.

Dec 12, 2025
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.

Dec 12, 2025
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`.

Dec 12, 2025
Loading thumbnail…

Final Project Progress 1

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.

Dec 12, 2025
Loading thumbnail…

Fork of World Cities

This visualization shows the world's cities as tiny dots on a natural Earth projection, with country boundaries rendered in light gray and graticule lines overlaid for geographic context. The code uses D3’s `geoNaturalEarth1` projection and `geoPath` to draw the map, while fetching geographic data from a TopoJSON world atlas and city coordinates from a CSV file. Each city’s population is parsed but not visually encoded; instead, all cities appear as uniform 0.2-pixel-radius circles. The rendering is driven by D3 selections with data joins, and topojson-client converts the TopoJSON features into GeoJSON for mapping.

Dec 12, 2025
Loading thumbnail…

2024 Boston Marathon Data Final Project

A bar chart displays the number of runners in each age group from the 2024 Boston Marathon, with bar colors encoding the average percentage slowdown between the first and second half of the race. Data is loaded from a CSV file and processed in React, while d3.v7 handles scales, axes, and rendering. The custom `getColor` function assigns darker green through red hues to increasing positive split percentages, and a legend explains the color scale.

Oct 10, 2025
Loading thumbnail…

Boston Marathon Bar Chart #2

This bar chart shows the number of runners in each age group at the 2024 Boston Marathon, with bar colors encoding the average percent change between each group’s first and second half finish times. Using React and D3 v7, the chart groups runners from a CSV file into age categories, counts them, and calculates an average split-time change. The `viz` function builds the chart with D3’s `scaleBand` and `scaleLinear`, and a custom `getColor` utility maps average percent-change values to a green-to-red palette. A legend explains the color scale.

Sep 26, 2025
Loading thumbnail…

Boston Marathon Bar Chart #1

This bar chart displays the average percent change between first and second half marathon times across age groups for the 2024 Boston Marathon, with the y-axis fixed from 0% to 25%. The visualization groups runners by age category and computes the mean percentage slowdown per group. Built with React and D3 v7, it uses d3.csv to load the data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.mean to aggregate the values. Bars are rendered as SVG rectangles filled with steelblue.

Sep 25, 2025
Loading thumbnail…

Boston Marathon Box and Whisker Plot

This box and whisker plot shows how runners’ finish times change between the first and second halves of the 2024 Boston Marathon, broken down by age group. The chart displays percent change in split times, with positive values indicating a slower second half. It uses d3.scaleBand and d3.scaleLinear for axes, while box plot statistics are calculated manually from the data. Outliers are filtered by removing the most extreme 20% of values beyond the whiskers. The visualization is built with React and D3 v7, reading from a CSV of finisher data sourced from Kaggle.

Sep 18, 2025
Loading thumbnail…

2024 Uber Data

This visualization presents raw, unprocessed ride data from Uber throughout 2024, displaying each trip's attributes such as date, time, vehicle type, pickup and drop locations, booking value, ride distance, and ratings. The code fetches a CSV file, parses it using `csvParse`, and converts specific quantitative fields—including `avg_vtat`, `booking_value`, and `ride_distance`—to numeric types. Built with the D3.js v7 library, the visualization uses a `select().join()` pattern to render the JSON representation of the dataset within a `<pre>` element, showing the structured data without additional graphical encoding.

Sep 5, 2025
Loading thumbnail…

Zip Code Weather Data

This example displays weather data for the two weeks leading up to the 2024 Boston Marathon, showing maximum, minimum, and mean temperatures for each athlete’s registered zip code across fifteen days in April. The visualization initially renders raw CSV data as JSON text, loading and parsing the dataset with `d3.csvParse` within a `fetch` call. The D3 v7 `select` and `join` methods manage the DOM updates asynchronously, with state management handling the transition from loading to populated data.

Sep 5, 2025
Loading thumbnail…

Athlete Data from 2024 Boston Marathon

This visualization displays athlete data from the 2024 Boston Marathon, showing the raw dataset as a JSON-formatted text dump within a `<pre>` element. It uses D3 v7’s `csvParse` to load and parse the data, converting numeric string fields like `first_half`, `finish`, and `percent_change` into numbers for analysis. The visualization updates reactively via a `setState` function, triggering a re-render of the container with the newly fetched data. It demonstrates a minimal data-loading workflow without any chart or graphical encoding.

Sep 5, 2025
Loading thumbnail…

Fork of Circles with D3

Seven colored circles, each 15 pixels in radius, rest in a horizontal line at the bottom left of a mint-green canvas. Hovering over any circle smoothly animates it into an evenly spaced orbit around the screen’s center, using an ease transition over one second; hovering again returns it to its original spot. The example demonstrates D3 v7’s `select().join()` for SVG element creation and stable keyed data binding, alongside `on('mouseenter')` event handling and the `transition().attr()` API for position tweening. All seven circles—red through violet—exist in a fixed dataset.

Sep 4, 2025