class 4 - states

class 4 - states

100% match

class 4 - states

This visualization displays earthquakes recorded in the United States over the past week, color-coded by magnitude on a dark basemap of state boundaries. It uses D3.js v4 with the `d3.geoAlbersUsa` projection and `d3.geoPath` to render both the TopoJSON state outlines and GeoJSON earthquake points from the USGS real-time feed. The points are filtered into four magnitude bins and drawn with distinct colors, while a legend built with d3-legend explains the scale.

97% match

class 4 - states

This D3 visualization displays a map of US states generated from a GeoJSON TopoJSON source, overlaid with earthquake locations from the USGS all-week feed. It shows the geographic distribution of recent seismic activity across the country, with each quake rendered as a crimson point. The map uses the `d3.geoAlbersUsa` projection and `d3.geoPath` for both state boundaries and earthquake points. As the mouse moves, the page displays the cursor’s geographic coordinates, computed via `projection.invert` and formatted with `d3.format`.

92% match

class 4 - states

This example displays a map of the contiguous United States with earthquake locations overlaid as crimson points. The map is rendered using `d3.geoPath` with the `d3.geoAlbersUsa()` projection, while earthquake data is pulled from the USGS live GeoJSON feed. State boundaries come from a local US GeoJSON file processed with `topojson.feature`. The visualization also includes a static legend and interactive coordinate display, which updates as the mouse moves across the map. All drawing is performed with SVG elements.

91% match

Class 5

This visualization shows earthquake locations and magnitudes across the United States over the past week, using a color scale to group magnitudes into ordinal bins. A legend on the right lists magnitude ranges with counts of quakes per bin, and mousing over the map displays geographic coordinates. The code uses d3.geoAlbersUsa and d3.geoPath for the map projection, loads state boundaries from TopoJSON and earthquake data from USGS GeoJSON, and employs d3.scaleOrdinal with d3.schemeCategory10 for magnitude-dependent fill colors.

class 5 - states

A map of the United States displays earthquake locations from the USGS all-week feed, with each state rendered as a gray SVG path via `d3.geoPath` and a `d3.geoAlbersUsa` projection. Crimson circles mark earthquake epicenters, and a legend categorizes magnitudes by color, though the current legend implementation uses static orange swatches. The visualization uses TopoJSON for state boundaries and includes mouse-position coordinate tracking that updates an on-screen info panel.

Class 5

This visualization displays earthquake locations across the United States from the USGS live feed, with each quake colored by magnitude using a d3.scaleOrdinal color scale. State boundaries render as gray paths via TopoJSON and d3.geoPath with an AlbersUSA projection. A legend with circles shows magnitude ranges and counts, while hovering reveals coordinates through d3.mouse and projection.invert. The map filters quakes to viewport-visible coordinates and removes legend entries exceeding the largest observed magnitude.

class 3 - states

A U.S. map displays all 50 states in gray with a blue background, overlaid with red circles marking earthquake locations from the USGS live feed. The visualization plots both state boundaries and seismic events using d3.geoPath with the d3.geoAlbersUsa projection, filtering earthquake data by magnitude into four color-coded legend categories. The code loads TopoJSON state data and GeoJSON earthquake data via d3.json, with a legend showing magnitude ranges from 1.0 to 4.0+.