Raster & Vector II=Assignment Class 10

100%

Raster & Vector II=Assignment Class 10

✓ Published0🌍 Public

Last edited Apr 4, 2017

Created on Apr 3, 2017

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.

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>

gpl-3.0 Licensed

Similar vizzes

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…

Assignment 9

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.

MMTClass

86% match

Loading thumbnail…

Raster & Vector II

A map of the United States uses a red outline to show state boundaries over OpenStreetMap raster tiles. The code combines d3-tile for tile loading, d3.geoMercator and d3.geoPath for reprojecting TopoJSON vectors, and d3-zoom for pan and zoom. On each interaction, the tile set and vector geometry are recomputed rather than relying on a transform, with tiles rendered as SVG images.

Mmbostock

83% match

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

82% match

Loading thumbnail…

Raster & Vector II

This example presents a hybrid vector-raster map of the United States, seamlessly blending OpenStreetMap raster tiles with red vector state boundaries. The visualization handles interactive pan and zoom, reprojecting the TopoJSON geometry in real time to maintain alignment with the underlying tiles. The implementation leverages d3.geoMercator for projection, d3.tile for raster tile management, d3.zoom for interaction, and d3.geoPath for rendering vector paths. The raster layer is populated with images from OSM’s tile server, while the vector layer uses TopoJSON data from a gist source.

CCurran Kelleher

81% match

Loading thumbnail…

class-07 demo

This visualization combines OpenStreetMap raster tiles with vector data for Oklahoma using d3-tile and d3.geoPath with a Mercator projection. It overlays county boundaries from a TopoJSON file, drawn as black lines, alongside earthquake points from a USGS GeoJSON feed, rendered as semi-transparent crimson circles. The quakes are filtered by magnitude threshold, and the tile layer uses the d3.tile layout to compute visible tiles. Both the raster images and vector shapes are rendered as SVG elements.

MMTClass

81% match

Loading thumbnail…

class-07 demo

This visualization displays a week of earthquake data overlaid on a map of Oklahoma, using a tile-based OpenStreetMap basemap for geographic context. It plots earthquake epicenters as crimson paths, filtering out events below a 2.5 magnitude threshold. The map uses a Web Mercator projection via `d3.geoMercator` and renders geographic features with `d3.geoPath`, including state and county boundaries from TopoJSON files. The basemap is composed of image tiles fetched from the OpenStreetMap tile server using the `d3.tile` API. Earthquake data is sourced from a local GeoJSON file rather than the live USGS feed.

MMTClass

81% match

Loading thumbnail…

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.

MMTClass

80% match