Assignment 9

100%

✓ Published0🌍 Public

Last edited Apr 7, 2017

Created on Apr 4, 2017

This interactive map displays earthquake locations from the USGS weekly feed overlaid on OpenStreetMap raster tiles and U.S. state boundaries from TopoJSON. Users can pan and zoom via d3.zoom, with d3-tile loading map tiles and d3.geoPath reprojecting the vector geometry on each interaction. The map also shows the geographic coordinates of the mouse cursor in real time.

AI-generated description

Using d3-tile to display raster image tiles underneath some TopoJSON vectors, and d3-zoom for pan & zoom. This version reprojects the geometry on interaction; compare to updating the transform. See another variation of this example with points, showing the U.S. State Capitals; also see the static version.

Tiles copyright OpenStreetMap contributors.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/5342063'>Raster & Vector II</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/370e02ad1c699502b6e4b1307359c679'>Raster & Vector II</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

homework 9.1

This interactive map displays global earthquake activity from the USGS feed overlaid on an OpenStreetMap basemap. Red paths outline the state boundaries of the United States, while each earthquake is drawn as a red path stroke using `d3.geoPath`. The view uses a Mercator projection with pannable and zoomable tiles via `d3.tile` and `d3.zoom`, and it shows geographic coordinates of the mouse position. The SVG rendering relies on TopoJSON for the boundary mesh and D3 version 4.

AAnaMal08

88% match

Loading thumbnail…

April 6 class

This interactive map shows earthquake locations across the United States, plotted as crimson paths atop a zoomable OpenStreetMap tile layer. Using d3.geoMercator projection and d3.geoPath, it renders geographic features from TopoJSON state boundaries and GeoJSON earthquake data from the USGS weekly feed. The d3.zoom and d3.tile APIs enable pan and zoom, updating both vector paths and raster tiles in sync. A status readout displays latitude and longitude coordinates using projection.invert as the mouse moves.

MMTClass

86% match

Loading thumbnail…

Raster & Vector II=Assignment Class 10

This interactive map displays world earthquake data from a live USGS feed overlaid with vector boundaries of U.S. states, drawn in red on a pan-and-zoomable OpenStreetMap raster tile background. The visualization uses `d3.geoMercator` for projection, `d3.geoPath` to render GeoJSON features, and `d3.tile` with `d3.zoom` to dynamically reproject the geometry during interaction. Earthquake epicenters are plotted as crimson paths, while state outlines are generated from TopoJSON using `topojson.feature`. Pointer movement reveals geographic coordinates in a label.

MMTClass

86% match

Loading thumbnail…

homework 9

This visualization displays a zoomable map of the United States with OpenStreetMap tiles as the basemap, overlaid with red state boundaries. The map uses the d3-tile library to load and render raster tiles, while d3.geoMercator and d3.geoPath project the TopoJSON boundaries of US states from external JSON data. User interactions via d3.zoom adjust the tile scale and translate the projection to sync vector features with the changing raster view.

AAnaMal08

83% match

Loading thumbnail…

Class 5

This visualization displays earthquakes from the past week across a map of the United States, with points colored by magnitude and a legend showing the number of quakes in each magnitude range. It uses d3.geoPath with a d3.geoAlbersUsa projection to render TopoJSON state boundaries, while earthquake data arrives as GeoJSON from the USGS feed. The map includes a draggable orange circle, and mouse movement updates a readout of geographic coordinates using the inverse projection.

MMTClass

80% match

Loading thumbnail…

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

MMTClass

79% match

Loading thumbnail…

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.

MMTClass

79% match

Loading thumbnail…

Class 5

This map of the United States displays earthquake locations from the USGS live feed for the past week, with each quake represented as a circle colored by magnitude using a D3 ordinal color scale. The visualization uses `d3.geoAlbersUsa` for the map projection, `d3.geoPath` to render state boundaries, and `topojson.v2` for GeoJSON conversion. A legend at the right shows magnitude ranges with quake counts, while mouseover coordinates are displayed via a D3 text element.

MMTClass

78% match