Skip to main content
Log in
E

Erik Erickson

@erikerickson·19 public vizzes

Loading thumbnail…

US Map Projection

This example displays a map of the United States using an Albers equal-area conic projection, with the landmass filled in light gray and state boundaries in white. It uses D3.js (d3.v7) with the `d3.geoAlbersUsa()` projection and the `d3.geoPath()` function to render the geographic shapes as SVG paths. The map is drawn within a fixed 960×600 viewport, and the underlying geographic data is handled by the TopoJSON library.

Dec 12, 2023
Loading thumbnail…

D3 World Map

This choropleth map visualizes the average university diversity index across U.S. states in 2021, using a white-to-blue linear color scale. Each state is rendered as an SVG path via `d3.geoPath` with a `d3.geoAlbersUsa` projection, colored by state-level data. Hovering reveals a tooltip, and a `d3.legendColor` legend displays the scale. The code loads TopoJSON state boundaries from a GitHub gist and uses D3 v4 and the d3-legend plugin.

Dec 11, 2023
Loading thumbnail…

Massachusetts Rention Rates by year and quartile 10/31/2019 final

This visualization maps Massachusetts school district student retention rates, overlaying circles scaled by quartile value onto a geographic outline of the state. Interactive dropdown menus filter the displayed data by retention quartile and academic year, revealing potential geographic patterns over time. The map renders with `d3.geoAlbers` and `d3.geoPath`, while point radii use `d3.scaleSqrt`. Data from the Massachusetts Department of Elementary and Secondary Education is loaded via `d3.json` and `d3.csv`, and the interface is built with React and `react-dropdown`.

Oct 31, 2019
Loading thumbnail…

Mass School District Boundaries

This example displays the boundaries of Massachusetts school districts as a light gray-and-teal choropleth map. It loads TopoJSON data from a GitHub gist and converts it to GeoJSON features using the TopoJSON library. The map is rendered in SVG with React, and the D3 geoPath and geoIdentity projection with reflectY flip the coordinates to orient the state correctly. The visualization focuses on crisp geographic outlines without additional thematic encoding, serving as a base layer for potential district-level analysis.

Oct 31, 2019
Loading thumbnail…

Massachusetts Advanced Placement Performance by town

This visualization shows Massachusetts Advanced Placement performance by town, with each town’s score representing the number of students achieving a score of 3-5 on AP exams. A proportional symbol map uses circles sized with `d3.scaleSqrt` overlaid on a geographic outline rendered via `d3.geoPath` and `geoAlbers` projection. The map is built with React, pulling TopoJSON and CSV data through custom hooks, with static SVG rendering and semi-transparent green circles to emphasize performance density.

Oct 31, 2019
Loading thumbnail…

Massachusetts Retention w/ Menu and Interactive Color Legend

This scatter plot shows Massachusetts school district retention rates across multiple years, with dropdown menus to change the x-axis, y-axis, and circle-size attributes among attendance and absence metrics. An interactive color legend filters points by year on hover, dimming non-matching circles via opacity. Built with React and D3 v5, it uses `scaleLinear`, `scaleOrdinal`, and SVG circles to render the data from a CSV loaded with `d3.csv`.

Oct 31, 2019
Loading thumbnail…

Multiple Views with Fast Brushing

Two coordinated views visualize migrant deaths and disappearances worldwide. A bubble map uses `d3.geoNaturalEarth1` and `d3.geoPath` to draw country boundaries, graticules, and scaled circles for filtered data. Below it, a time histogram built with `d3.bin` and `d3.scaleTime` shows monthly death totals; brushing with `d3.brushX` filters the map reactively, updating circles through React state. Data comes from a CSV of missing migrants, while country shapes use TopoJSON from the world-atlas package.

Oct 20, 2019
Loading thumbnail…

Massachusetts Retention compared to Chronically Absent Rates

This scatter plot compares Massachusetts school districts’ chronic absenteeism rates on the x-axis with the number of student retentions on the y-axis, while encoding each district’s retention rate through circle radius. The visualization uses React to manage rendering and d3.scaleLinear for all three scales, generating an SVG with custom AxisBottom, AxisLeft, and Marks components. Data comes from the Massachusetts Department of Elementary and Secondary Education, loaded via d3.csv, and styled with opacity and a custom font.

Oct 17, 2019
Loading thumbnail…

Massachusetts Retention w/ Menu and Color Legend

This interactive scatter plot visualizes Massachusetts school district retention data, with dropdown menus controlling the x-axis, y-axis, and point size, while a color legend encodes the year. Built with React and D3.js, it uses SVG circles to represent districts, with axes generated from D3 scales and color encoded via a sequential ordinal scale. The data is loaded from a CSV file using D3’s `csv` function, and the interface relies on React state to update the chart dynamically.

Oct 8, 2019
Loading thumbnail…

Massachusetts Retention compared to Chronically Absent Rates with Menus

This interactive scatter plot shows Massachusetts school district retention rates in relation to chronic absenteeism, with three dropdown menus letting viewers compare different metrics on the x-axis, y-axis, and point size. The visualization uses d3.scaleLinear to map data values to pixel coordinates, with circles rendered as SVG marks whose radius corresponds to a selected attribute. Data is loaded from a CSV via d3.csv, and the React interface updates the axes and circle sizes dynamically when menu selections change, while tooltips display formatted values for each district.

Oct 3, 2019
Loading thumbnail…

Massachusettts Drop Out Rates

This example displays a text-based summary of longitudinal dropout rates by district in Massachusetts, sourced from public MA DESE data. It shows the total file size in kilobytes, the number of data rows, and the number of columns parsed from the CSV. Using D3 v5, the program loads the remote CSV via `d3.csv`, then formats the data with `d3.csvFormat` to compute byte length and accesses the parsed rows and columns properties. The result is rendered as plain text inside an HTML `<pre>` element.

Sep 27, 2019
Loading thumbnail…

Massachusetts Student Attendance and Retention

This example displays the file size, row count, and column count of a Massachusetts student attendance and retention dataset. It highlights questions about district attendance, geographic absenteeism patterns, and correlations between retention and absenteeism. The code uses d3.csv to load remote CSV data from a GitHub gist and updates a pre element with the computed summary. It also demonstrates alternative approaches using fetch, async/await, and d3.csvParse, though those are commented out. The dataset originates from the Massachusetts Department of Elementary and Secondary Education.

Sep 27, 2019
Loading thumbnail…

AP Test Scores of MA Districts by Year

This stacked bar chart shows AP test participation and score distributions for Massachusetts school districts by year, with each bar representing the total number of tests at each score level. The visualization reveals that overall AP participation has increased over time, while the highest score (5) remains stable and score 2 has grown substantially. The chart uses Vega-Lite via the vega-lite-api wrapper with D3 for CSV loading, and data comes from the Massachusetts DESE AP performance dataset. Each stack segment is colored by score level, with tooltips displaying district names.

Sep 23, 2019
Loading thumbnail…

Largest Participating MA Districts in AP Test (tests taken per district) by year

This stacked bar chart shows the number of AP tests taken by the largest participating Massachusetts school districts each year, with each stack segment representing a unique district. The visualization uses the Vega-Lite API to encode the year on the x-axis, test count on the y-axis, and district as the color, with tooltips revealing school names. Data is loaded from a CSV file hosted in a GitHub gist, sourced from the MA DESE AP participation dataset, and rendered using the vega-lite and vega libraries with custom configuration for axis styling.

Sep 23, 2019
Loading thumbnail…

Largest Participating MA Districts in AP Test (tests taken per district) by year

This stacked bar chart shows the Massachusetts school districts with the highest Advanced Placement test participation, measured by total tests taken per district, across multiple years. Each bar segment represents a distinct district for a given year, with color encoding the test count and tooltips revealing the school name. The visualization is built using Vega-Lite and D3, loading CSV data from a DESE repository via d3.csv, and renders through the vega-lite-api with custom axis and label styling from a config file.

Sep 23, 2019
Loading thumbnail…

Largest Participating MA Districts in AP Test (tests taken per district) by year

This stacked bar chart shows the Massachusetts school districts with the highest Advanced Placement test participation, measured by total tests taken per district, across multiple years. Each bar segment represents a distinct district for a given year, with color encoding the test count and tooltips revealing the school name. The visualization is built using Vega-Lite and D3, loading CSV data from a DESE repository via d3.csv, and renders through the vega-lite-api with custom axis and label styling from a config file.

Sep 22, 2019
Loading thumbnail…

AP Test success rate compared to participation rate by Massachusetts HS

This bubble chart compares Advanced Placement test participation rates and success rates across Massachusetts high schools, with each bubble’s position showing the percentage of students taking at least one AP test versus those scoring 3–5. Bubble color and size encode the school’s 9–12 population. Built with Vega-Lite and d3.v5, it loads CSV data from the DESE repository via `d3.csv` (through the `vl` API) and renders using the default SVG viewer with custom axis styling from `config.js`.

Sep 19, 2019
Loading thumbnail…

Horrible Experiment gone bad. AP Participation compared to non-successful AP test attempts by district

This scatterplot compares Massachusetts school districts by the percentage of students taking at least one AP test against the percentage scoring 1-2, with the bar color and size encoding district population. It uses Vega-Lite’s API to render SVG marks, with d3.csv loading MA DESE AP participation data. The visualization is explicitly described by its author as a “horrible experiment gone bad” and a dead end, reflecting its unclear analytical value.

Sep 19, 2019
Loading thumbnail…

Erickson's Face

A yellow circle face with turquoise irises and black pupils stares out from the center of an SVG canvas. Two white elliptical eye whites flank the irises, while a black-outlined bowtie sits below, composed of two polygons and a central circle. A mouth arc is drawn beneath the bowtie. The visualization uses React to render the SVG elements and d3.arc to generate the mouth path, with all coordinates computed relative to the canvas center.

Sep 3, 2019