S

sjpeno@wpi.edu

@sydneypeno·28 public vizzes

Loading thumbnail…

Boston Crashes Project

This interactive visualization explores nine years of Boston crash data from the city’s Vision Zero program, using a geographic map and a time-series line chart. The map plots individual crash locations as colored points by crash type, filtered via checkboxes, and is rendered with D3’s `d3.geoPath` and parsed GeoJSON. The line chart aggregates monthly crash counts, with colored seasonal bands and toggleable lines for each crash type, implemented using D3 scales, axes, and `d3.line`. Both views load data directly from CSV and GeoJSON files, ensuring scalable performance.

Loading thumbnail…

v6 - Crash Graph

This visualization is a line graph showing the number of crashes over time, binned by month to reveal seasonality. It plots the total crash count against monthly timestamps, with interactive checkboxes that let the user toggle the visibility of three crash types: motor vehicle, pedestrian, and bicycle. The chart dynamically updates the line and y-axis scale based on the selection, and data points are highlighted on hover. The code uses d3’s `scaleTime`, `scaleLinear`, `bin`, and `line` APIs to process and render the data from a CSV file.

Loading thumbnail…

v3 - Crash Graph

This line graph shows the seasonality of traffic crash counts over time from a CSV dataset. The chart bins incidents by month, plots them as a continuous line, and color-codes line segments by season (winter, spring, summer, fall) with an accompanying legend. Built using D3’s `line`, `scaleTime`, `bin`, and `timeMonth` APIs, the visualization aggregates crash timestamps to reveal monthly trends in the data.

Loading thumbnail…

v8 - Boston Crash Map

This map visualizes Boston crash data from data.boston.gov, displaying incidents as colored points based on crash type: red for motor vehicle, blue for pedestrian, and green for bicycle. Users can toggle crash types on and off via interactive checkboxes in the legend. The visualization uses d3.geoPath with a geoMercator projection to render Boston neighborhood boundaries from GeoJSON, and positions crash points from CSV data using the same projection system.

Loading thumbnail…

Boston Crashes

This interactive visualization combines a geographic map of Boston with crash data from the city’s Vision Zero program, plotting each incident as a colored circle based on mode type—red for motor vehicles, blue for pedestrians, and green for bicycles. A toggleable time series chart below aggregates monthly crash counts using `d3.bin` and `timeMonth`, while checkboxes allow filtering by mode to update both views. The map uses `d3.geoMercator` and `d3.geoPath` to render Boston neighborhood boundaries from a GeoJSON file, with crash locations projected via longitude and latitude coordinates.

Loading thumbnail…

v5 - Crash Graph

This line chart displays the seasonality of crash counts over time, with data from the smallcrashcopy.csv file. It uses d3.bin and timeMonth.range to aggregate crashes by month, then plots them with d3.line and scales from d3.scaleTime and d3.scaleLinear. The visualization supports toggling visibility for three mode types (mv, ped, bike) via checkboxes, which recomputes the total counts and dynamically updates the y-axis with axisLeft. A gray background rectangle and labeled axes for month and crash counts frame the chart.

Loading thumbnail…

v4 - Crash Graph

This line graph visualizes the seasonality of crash data from a CSV file, displaying monthly crash counts for three transportation modes: motor vehicles, pedestrians, and bicycles. The visualization uses D3.js functions including `timeMonth.bin()` for grouping data, `scaleTime` and `scaleLinear` for scaling, and `line()` for generating the line paths. Each mode is color-coded using `scaleOrdinal` with `schemeCategory10`, and the chart includes interactive toggling for showing or hiding each line.

Loading thumbnail…

v7 - Boston Crash Map

This map shows the geographic distribution of traffic crashes in Boston, colored by mode type: motor vehicle (red), pedestrian (blue), and bicycle (green). Interactive checkboxes let viewers filter crash points by type. The visualization renders Boston’s neighborhood boundaries as GeoJSON paths using `d3.geoPath` with a `geoMercator` projection, and overlays individual crash locations from the city’s 911 dispatch dataset as SVG circles. Crash data is loaded directly from a CSV file.

Loading thumbnail…

v6 - Boston Crash Map

This visualization shows the geographic distribution of traffic crashes across Boston, with individual points colored by mode type: red for motor vehicles, blue for pedestrians, and green for bicycles. It also provides a legend identifying these categories. The map uses D3's `geoMercator` projection and `geoPath` to render Boston neighborhood boundaries from embedded GeoJSON data. Crash locations from the provided `crashes.csv` are plotted as circles, with coordinates projected and positioned using the same projection function.

Loading thumbnail…

v6 - Boston Crash Map

A geospatial treemap of Boston crash records from the city’s Vision Zero program maps point locations from a CSV onto a GeoJSON boundary. The visualization uses `d3.geoMercator` with a center on Boston and `d3.geoPath` to render the neighborhood polygon, while individual crashes are projected as points. The code imports crash data via `crashes.csv` and draws them in an SVG container, showing the geographic distribution of incidents by their `dispatch_ts` and `mode_type` attributes.

Loading thumbnail…

v5 - Boston Crash Map

A geographic map of Boston displays crash locations as points against a basemap of neighborhood boundaries. The visualization shows the spatial distribution of incidents across the city, with individual crashes differentiated by mode type—motor vehicle, pedestrian, or bicycle—using a Mercator projection. Built with D3.js, it uses `geoMercator` and `geoPath` to render the neighborhoods, while crash coordinates from a Boston Crash Dataset are projected as points.

Loading thumbnail…

v4 - Boston Crash Map

This visualization displays a geographic map of Boston using hardcoded GeoJSON data of the Roslindale neighborhood, rendered with a Mercator projection via `d3.geoPath`. Crash records from the Boston Crash Dataset, including time, location, and mode type, are plotted as points on the map. The code imports CSV data directly and uses `d3.select` to set up the SVG container, with a projection centered on Boston's coordinates. This version focuses on integrating the neighborhood boundary geometry with the crash data for spatial analysis.

Loading thumbnail…

v4 - Boston Crash Map

A map of Boston displays red points marking crash locations from the city’s crash dataset, with an outline of the state drawn from hardcoded GeoJSON. A point is plotted for each record’s latitude and longitude. Using a D3 geoMercator projection and geoPath, the code renders the map, and D3’s data join appends circles to the SVG. The crashes.csv file supplies the coordinates for each marker.

Loading thumbnail…

v3 - MA Crash Map

This map shows the geographic distribution of traffic crashes across Boston, utilizing point data from the Boston Crash Dataset. The visualization plots each incident as a red circle, with the state and city boundaries of Massachusetts rendered as an outline. The code uses `d3.geoMercator` for projection and `d3.geoPath` to draw the map paths, while importing crash data from a CSV file to position the individual crash points.

Loading thumbnail…

v2 - Crash Graph

This line chart displays the monthly count of traffic crashes from a CSV dataset, revealing seasonality patterns in the data. The visualization bins crash records by month using d3.bin with timeMonth thresholds, then renders the aggregated counts as a steelblue line with circular point markers. The x-axis uses d3.scaleTime with a monthly time format label, while the y-axis uses d3.scaleLinear to show the number of crashes. The chart includes gray background rectangle, axis labels, and explicitly positioned tick marks created through d3.axisBottom and d3.axisLeft.

Loading thumbnail…

v2 - MA Crash Map

This map of Massachusetts shows the geographic distribution of traffic crashes using red dots plotted over the state’s outline. The visualization uses GeoJSON for the state boundary and crash data containing coordinates to place each incident on the map. The code relies on D3 libraries including `d3.geoMercator` for the map projection, `d3.geoPath` to generate the state’s path, and D3’s projection methods to convert crash latitude and longitude into screen coordinates for circle placement. The crash data originates from the Boston Crash Dataset.

Loading thumbnail…

v1 - MA Map

This visualization shows a map of Massachusetts with the state’s geographic boundary drawn using hardcoded GeoJSON data, projected with d3.geoMercator and rendered via d3.geoPath. The map is centered on Boston, where the crash data originates, and displays the state outline with a black stroke over a white background. The code uses d3.select and data binding to append the path elements, though it does not yet plot the actual crash locations or temporal patterns from the Boston Crash Dataset.

Loading thumbnail…

Simple MA Map

This example displays the geographic outline of Massachusetts as a simple, black-and-white map on a white background. It shows the state's boundary as a single continuous path with no fill or additional visual encoding. The visualization is built using React, leveraging the D3 library's `geoMercator` projection and `geoPath` to render the map. Hardcoded GeoJSON data, which includes the state's coordinates, is projected and centered within the container, demonstrating a straightforward approach to drawing a single state with D3's geo APIs.

Loading thumbnail…

Massachusetts

This example renders a static map of Massachusetts using a Mercator projection. The code loads a GeoJSON file containing the state’s boundary geometry and displays it as an SVG path. It applies a light gray fill and dark stroke via D3’s `geoPath` and `geoMercator` APIs, centering the map at Boston with a fixed scale.

Loading thumbnail…

Fork of Simple MA Map 2

This fork renders a simple map of Massachusetts using React and D3.js. It shows a single GeoJSON polygon representing the state boundary, fitted to the viewport with a Mercator projection. The code applies a teal fill and black stroke to the path generated by `d3.geoPath`. The example demonstrates a minimal setup for projecting geographic data with `d3.geoMercator` and includes a video walkthrough.

Loading thumbnail…

v1 - Crash Graph

This bar chart visualizes the monthly frequency of traffic incidents in a small crash dataset, distinguishing incident types (mv, ped, bike) through the use of a categorical mode field. The chart displays the total number of crashes per month, with bars rendered using d3.bin and d3.timeMonth to aggregate dates from a CSV file. The visualization employs d3.scaleTime and d3.scaleLinear for the axes, d3.axisBottom and d3.axisLeft for tick marks, and d3.timeParse to handle timestamps with UTC offsets. The gray background and steelblue bars highlight the temporal distribution of incidents.

Loading thumbnail…

Pseudo Line Chart

This pseudo line chart displays two data series—pink and blue—as unconnected, path-based line approximations within an SVG canvas. Rather than using scales or axes, it plots raw coordinates directly. The example demonstrates SVG Path elements and styling attributes like `fill`, `stroke`, and `stroke-width`. The code employs D3.js version 7.8.5, specifically the `d3.line` generator, to create the path data, along with `select` for DOM manipulation. Axis labels for "Unemployment Rate" and "Year" are manually positioned.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between COVID-19 cases and deaths in Massachusetts, using data from a US states CSV file filtered to a single state. The D3.js code, authored by sydneypeno, constructs a linear-scale plot with axes for cases (x-axis) and deaths (y-axis). It implements custom formatting through d3.scaleLinear, axisBottom, and axisLeft functions to generate the chart, rendering data points as semi-transparent steelblue circles. The visualization demonstrates a straightforward correlation between cumulative cases and deaths over time.

Loading thumbnail…

CSV Dataset Template - Covid

This example provides a bare-bones template for importing and parsing a COVID-19 dataset from the New York Times, which tracks daily cases and deaths by U.S. state. It shows the structure of the parsed data by rendering the first record as a JSON object in a `<pre>` element. The code loads the CSV with an import statement, converts the `cases`, `deaths`, and `fips` fields to numbers, and then displays the first data point. The visualization is minimal, focusing on data loading and parsing rather than chart rendering.

Loading thumbnail…

Data Viz Size - rainfall

A tile-grid map of the contiguous United States shows average annual rainfall per state. Each state is represented by a blue circle, with the circle’s area scaled to the rainfall amount using a square-root transform (via `d3.scaleSqrt`) to keep differences visible. State abbreviations are not rendered; instead, full state names appear as text labels placed below each circle. The visualization uses `d3.select` and `d3.join` to create the SVG circles and text, drawing from static arrays of state locations and rainfall values derived from USA.com data.

Loading thumbnail…

CSV Dataset Template - Unemployment

This example displays the first row of a U.S. unemployment dataset as a JSON object in a preformatted text block. The dataset, sourced from the Federal Reserve’s FRED platform, includes monthly unemployment rates from 1948 onward, broken down by gender and age groups. The code imports the CSV data, converts all rate fields to numbers, and renders the first data point using `container.innerHTML`. It does not visualize the temporal trends or gender comparisons described in the metadata.

Loading thumbnail…

CSV Dataset Template - Crash

This example displays the first record of the Boston Crash Dataset as formatted JSON in a container, parsed from a CSV file using a custom date-time extraction function. It uses standard JavaScript array methods and template literals to render the data with a specified font size, loading the dataset via the `data.csv` import and exposing it through the `main` and `data` exports.

Loading thumbnail…

Fork of Circles with D3

This example renders a snowman-like figure composed of ten circles arranged on a pastel green SVG canvas. The visualization demonstrates D3’s General Update Pattern and method chaining, binding an array of objects with x, y, radius, and fill properties to circle elements. Using `select`, `data`, and `join` from d3, the code dynamically sets attributes like `cx`, `cy`, `r`, and `fill`, and applies a uniform opacity of 0.708 to the shapes, showing how static data can drive SVG styling.