Skip to main content
Log in
R

rpkupfer@wpi.edu

@rkupferwpi·18 public vizzes

Loading thumbnail…

NICS Data - Bar Chart With Transition - Final

This interactive D3.js bar chart visualizes FBI NICS background check data across U.S. states, showing stacked totals for handguns, long guns, other firearms, and multiple gun purchases. Users can select the year, filter to top states, and sort by value or alphabetically. Bars transition smoothly between states using D3 transitions, with a legend that highlights categories on hover and tooltips revealing per-category counts. The visualization updates automatically through an animated playback mode.

Dec 2, 2025
Loading thumbnail…

Fork of NICS Data - Bar Chart With Transition

This interactive bar chart displays state-level firearm purchase background check data from the NICS (National Instant Criminal Background Check System) dataset. Animated via D3.js `transition`, the visualization compares total background checks across U.S. states and U.S. territories, with each bar stacked by firearm category (handgun, long gun, other, multiple). A legend hover effect dims non-hovered categories via `.attr('opacity', ...)`. Users can select a year, filter to show only the top 10 or 25 states, sort the bars by value or alphabetically, control the animation’s transition speed with a slider, and play an automatic year progression animation.

Nov 21, 2025
Loading thumbnail…

US Map Polishing

An interactive choropleth of FBI NICS background check counts by U.S. state animates a zoom and reset view. Built with D3.js (`geoAlbersUsa`, `geoPath`), it fetches state boundaries as TopoJSON and merges CSV data. Hovering highlights a state in red and displays its name in a tooltip; clicking a state zooms to its bounding box using D3’s `zoom` behavior.

Nov 5, 2025
Loading thumbnail…

NICS Data - Bar Chart Polishing

This interactive bar chart displays FBI NICS firearm background check data aggregated by state and year, with stacked bars showing handgun, long gun, other, and multiple gun purchases. Users can filter by year, limit to top states, and sort bars by descending, ascending, or alphabetical order. Hovering reveals tooltip details, while legend interaction dims non-selected categories. The chart uses d3.scaleBand, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, with d3-rosetta's unidirectional data flow managing state and re-rendering.

Nov 5, 2025
Loading thumbnail…

US Map with Zoom on Click

This interactive map of the United States displays state boundaries using the `d3.geoAlbersUsa()` projection and `d3.geoPath()`, with geographic data sourced from `us-atlas` and parsed via `topojson-client`. Users can click any state to zoom into it using the `d3.zoom` behavior, with a 750ms transition, while hovering highlights the state in red and shows a tooltip with its name. A background click or the “Reset View” button restores the original view. The visualization also supports loading external CSV data, such as the provided `nics.csv` firearm background-check statistics.

Oct 29, 2025
Loading thumbnail…

NICS Data - Bar Chart Interactive Sorting

This interactive bar chart visualizes Firearms Background Check data from the NICS, showing the total number of checks per state for a selected year. Using D3.js, the chart aggregates data by state and year, with options to filter by year, display the top 10, top 25, or all states, and sort alphabetically or by check count. The visualization supports stacked bars for different gun types (handgun, long gun, other, multiple), with a legend that highlights categories on hover, a tooltip that appears when hovering over a state, and animated transitions when sorting is changed.

Oct 29, 2025
Loading thumbnail…

NICS Data - Bar Chart Interactive Legend

This interactive bar chart visualizes firearm background check data across U.S. states, showing stacked totals by gun type (handgun, long gun, other, and multiple) for a selected year. Users can filter by year and choose to display the top 10, top 25, or all states. Hovering over bars reveals detailed category tooltips, while hovering over the legend highlights a specific gun type. Built with D3 v7 and d3-rosetta, it uses scaleBand and scaleLinear for axes, transitions to animate opacity changes, and CSV-loaded data aggregated per state.

Oct 22, 2025
Loading thumbnail…

US Map With State Borders, Pop Up, and Red Fill on Hover

This interactive US map displays state boundaries, hovering states highlight in red with a tooltip revealing the state name. The visualization loads geographic data as TopoJSON from the us-atlas and visionscarto-world-atlas packages, projecting it with d3.geoAlbersUsa and d3.geoPath. The tooltip is implemented as an HTML div, and mouseenter/mouseleave events trigger the red fill and tooltip visibility.

Oct 9, 2025
Loading thumbnail…

NICS Data - Bar Chart

This visualization uses an interactive bar chart to show the total number of firearms by state for a selected year, with bars stacked and colored by firearm type (handgun, long gun, other, multiple). Users can filter to the top 10 or 25 states or view all. The D3.js example loads CSV data, aggregates it by state and year, and renders the chart using `scaleBand` and `scaleLinear` scales. It includes axes, labels, a legend, and a tooltip that displays the breakdown for each state when hovering.

Oct 9, 2025
Loading thumbnail…

US Map With State Borders

This visualization displays a map of the United States with state borders and an outline of the country. It uses the `d3.geoPath` projection and renders geographic features as SVG paths, with a graticule outline drawn around the map. The map data is loaded from the `us-atlas` package as TopoJSON and converted using the `topojson-client` library. The states are filled in white with black borders, while the outer outline uses a thicker stroke to differentiate it from the internal boundaries.

Oct 1, 2025
Loading thumbnail…

NICS Data - WIP Bar Chart version 2

This bar chart displays total firearm background checks by U.S. state for September 2023, with each bar stacked to show the breakdown between handguns, long guns, other firearms, and multiple-gun purchases. The chart aggregates monthly data from the NICS dataset, filtering out territories. Built with D3 v7 and d3-rosetta, it uses `scaleBand` and `scaleLinear` for axes, appends stacked rect elements per gun type, and includes a legend showing color-coded categories.

Sep 24, 2025
Loading thumbnail…

Diabetic Scatter Plot with axis

This scatter plot visualizes the relationship between glucose and insulin levels in blood, with each point colored green or red to indicate whether a patient was diagnosed with diabetes. The data originates from the National Institute of Diabetes and Digestive and Kidney Diseases, focusing on female patients of Pima Indian heritage. The visualization uses `d3.scaleLinear` for axes, `d3.axisBottom` and `d3.axisLeft` for ticks, plus custom axis labels, all rendered through React and the d3 `select` API.

Sep 14, 2025
Loading thumbnail…

Fork of Basic Scatter Plot with React & D3 with Diabetes Data

A scatter plot visualizes the relationship between Glucose and Insulin levels in a diabetes dataset, with each circle representing a patient. The React app loads the CSV data and passes it to the D3 visualization module. D3's `scaleLinear` and `extent` functions calculate the axis domains, while the `join` operator binds data points to SVG circles, setting their positions, radius, and fill color.

Sep 10, 2025
Loading thumbnail…

Fork of Loading Data - Diabetes Data

This example loads a diabetes dataset from a CSV file and displays its raw contents as a JSON-formatted text block. The visualization focuses on the data-loading process, using a state machine to transition from an undefined state to a loading state and finally to the parsed data. The code parses the CSV using D3’s `csvParse` function and converts numeric fields from strings to numbers. The data, sourced from Kaggle, is rendered by fetching the file and displaying the parsed array in a `<pre>` element.

Sep 8, 2025
Loading thumbnail…

Fork of Loading Data - NICS Data

This example loads a CSV of FBI NICS firearm background check data using `d3.csvParse` after fetching the file with the Fetch API. It displays the parsed data as raw JSON in a `<pre>` element, converting the numeric columns—handgun, long_gun, other, and multiple—to numbers with the unary plus operator. The visualization tracks loading state through a `setState` callback, initially showing `"LOADING"` before the data appears. The code relies on D3 v7 methods including `select`, `csvParse`, and `join` to render the output.

Sep 3, 2025
Loading thumbnail…

Fork of Loading Data - Cars Data

This example displays raw car data loaded from a CSV file by parsing it with D3’s `csvParse` and rendering it as a JSON string using `JSON.stringify`. The visualization shows the dataset’s structure, including categorical attributes like company and fuel type, alongside quantitative fields such as horsepower, price, and top speed. The code uses `fetch` to retrieve the CSV, then maps each row without cleaning the text-based numeric values, preserving them as strings. D3 selections manage the `<pre>` element that displays the parsed data.

Sep 3, 2025
Loading thumbnail…

Fork of Circles with D3

This example composes a static, hard-coded scene of circles and lines on a gray background. It shows a large yellow circle positioned at the upper left, with a fan of thick yellow lines radiating toward a diagonal sequence of small red circles, alongside a white circle containing facial features and a green mouth. The code uses the D3 `select` method to bind SVG elements directly to data arrays, creating `line` and `circle` elements with attributes for coordinates, radius, and fill color. The rendering relies on D3 7.8.5 and the `join` operation for declarative element creation.

Aug 25, 2025
Loading thumbnail…

Fork of Circles with D3

This example displays seven semi-transparent circles, each with a distinct color and radius, positioned at fixed coordinates on a soft green background using D3.js v7. The visualization constructs an SVG container sized to the full viewport and binds the static array of circle data to SVG circle elements via the `selectAll`/`data`/`join` pattern, setting attributes like `cx`, `cy`, `r`, and `fill` directly in the D3 selection. The code uses the `select` method to target the container div and imports from the D3 module, serving as a simple demonstration of data-driven SVG rendering without any interaction or animation.

Aug 23, 2025