Skip to main content
SimilarExport ZIP
100%

Final Project Week 1

✓ Published1🌍 Public
RRobert Curtis
Last edited Nov 8, 2018
Created on Oct 10, 2018

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Final Project Week 2

Two choropleth maps of U.S. states display minimum wage values from a CSV dataset, with a legend that lists selected states and color-coded circles. Clicking states toggles their inclusion, adding them to an ordinal color scale and generating corresponding time-series line graphs lower on the page. The visualization uses d3.geoPath and a geoTransform projection for the maps, d3.line with curveBasis for the graph paths, and d3.scaleOrdinal with schemeSpectral for coloring.

RRobert Curtis
87% match
Loading thumbnail…

Final Project Week 2

This interactive visualization displays two U.S. maps comparing historical minimum wage data across states, with a line graph showing trends over time. Users click on states to select or deselect them, which updates the color legend and line graph accordingly. The maps use d3.geoPath with a custom geoTransform for projection, while the line graph employs d3.line with curveBasis. Data comes from CSV files and the US Atlas TopoJSON, rendered using D3 v5’s SVG output.

LLudovicGouverneur
84% match
Loading thumbnail…

Final Project Week 3

This visualization compares minimum wage data across U.S. states with two choropleth maps (one for a current year, one for 2018) and a line graph of trends over time. Users click states to select them, which highlights them on both maps and adds their wage trajectories to the graph using d3.line and d3.curveBasis. The maps use d3.geoPath with a custom scaler and a topojson feature collection. A d3.scaleOrdinal color legend with d3.schemeSpectral maps each selected state to a unique line color.

RRobert Curtis
82% match
Loading thumbnail…

Project in progress - Week 1

This example presents the initial stage of a state-level map visualization. It displays a U.S. map with light green states, which turn red upon hover, alongside two blue circles marking specific coordinates. The map is built using the D3.js v5 library, employing `d3.geoPath` and `d3.geoAlbersUsa` for the projection and shape rendering. The visualization supports zooming and panning through the `d3.zoom` interaction, and it loads geographic data from a remote JSON source.

NNTCHANG1289
80% match
Loading thumbnail…

Project in progress - WEEK 2

This example displays a map of the United States with red points marking fast food restaurant locations, overlaid on a state boundary layer. The map supports zooming and panning, and states highlight on hover. It uses D3 v5 with `d3.geoAlbersUsa` for projection, `d3.geoPath` to render TopoJSON state outlines, and `d3.zoom` for interaction. Restaurant coordinates are loaded from a CSV file and plotted as SVG circles.

NNTCHANG1289
77% match
Loading thumbnail…

Final Project

This interactive choropleth map shows cumulative COVID-19 cases per U.S. state as of September 2021, with darker fills representing higher case counts. Clicking a state displays a tooltip with its name, total cases, and total deaths. The visualization loads county-level data from a CSV via `d3.csv`, aggregates it by state using `d3.rollup`, and renders SVG paths from TopoJSON using `d3.geoPath`. Color opacity is scaled proportionally to each state’s case total, with a bivariate legend circle appended on click.

MManh Pham
77% match
Loading thumbnail…

Choropleth Map

A choropleth map of United States states renders geographic boundaries as SVG paths, colored light blue with black outlines and a red hover state. The map uses the topojson library to convert US Atlas TopoJSON data into GeoJSON features, then projects them with d3.geoAlbersUsa and renders them via d3.geoPath. Interactive zooming is enabled through a d3.zoom event that applies transform updates to the map group, while a categorical color legend displays the domain. State data loads from a remote US Atlas JSON file.

NNicholas Papacostas
76% match
Loading thumbnail…

Let's make a map with D3.js!

This visualization displays U.S. states as a choropleth map, highlighting a subset of selected state IDs in orange while rendering all others in gray. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw SVG paths from TopoJSON data loaded from `us-10m.v1.json`. The code filters state features against a predefined set and applies the `.selected` CSS class, though the commented-out section means the highlighting is not rendered in the final output.

Jjons288
76% match