Class 4

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.

92% 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`.

91% match

class 3 - states

This example displays a map of the United States with earthquake locations overlaid as crimson points. The map is rendered using SVG paths created with `d3.geoPath` and a `d3.geoAlbersUsa` projection, while earthquake data is loaded from the USGS GeoJSON feed and plotted with the same path generator. The visualization also shows the latitude and longitude of the mouse cursor in a separate text element, using the projection’s `invert` method to translate screen coordinates to geographic coordinates.

class 5 - states

This example displays a map of United States state boundaries rendered in SVG using d3.geoPath with the d3.geoAlbersUsa projection. It overlays earthquake locations from the USGS live GeoJSON feed, with earthquakes plotted as crimson paths on the map. The code uses topojson to convert state topology data and d3.json to load both the state boundaries and earthquake data. A legend is included, and the visualization also shows a coordinate readout that updates on mousemove events, revealing the current latitude and longitude under the cursor.

class 5 - states

class 3 - states

This example displays a map of US states rendered in gray with an Albers USA projection, overlaid with crimson points marking earthquake locations from the USGS live GeoJSON feed. It uses d3.geoPath for both state boundaries and earthquake points, with topojson to convert US state geometries. As the mouse moves over the map, a text display updates to show the geographic longitude and latitude in degrees, computed via projection.invert and d3.mouse. The visualization layers states and earthquakes in separate SVG groups, with a fixed SVG canvas sized 960 by 500 pixels.

Class #13 demo

This example displays earthquake data from the USGS live feed on a map of the United States, using d3.geoPath with a d3.geoAlbersUsa projection to render state boundaries and quake locations as SVG paths. It includes a draggable circle representing Washington DC, with tooltip and mouse-move coordinate readout, plus a magnitude-based legend with counts. Colors are assigned via a d3.scaleOrdinal and d3.schemeCategory10, while the map data comes from TopoJSON.

86% match

Class 5

A United States map rendered as gray SVG paths displays earthquakes from the last week, sized and colored by magnitude on a categorical scale. Each quake is drawn as a crimson path using `d3.geoPath` with a `d3.geoAlbersUsa` projection, while a legend counts quakes per magnitude bin. The map fills the viewport, and moving the mouse updates a coordinate readout via `projection.invert` and `d3.mouse`. Data comes from USGS GeoJSON and state boundaries from TopoJSON.