Raster & Vector I

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

87% match

Raster & Vector I

This example overlays vector street data from a TopoJSON file onto raster map tiles from OpenStreetMap. The visualization uses d3-tile to fetch and position the image tiles, while d3.geoPath renders a black mesh of road lines over them. The map is centered on Detroit using a Mercator projection configured with d3.geoMercator. Both the raster tiles and the vector streets are drawn as SVG elements, combining the two data types in a single static view. The code also loads the TopoJSON with d3.json and converts it to a mesh using the topojson library.

83% match

Raster & Vector I

This example displays geographic vector boundaries overlaid on a raster map of Detroit. Using d3-tile to fetch and position OpenStreetMap image tiles, it renders them as a base layer within an SVG canvas. The d3.geoPath and d3.geoMercator projections draw a TopoJSON mesh of Detroit’s streets on top, creating a composite view of vector data and raster imagery.

Mmbostock

83% match

Raster & Vector 4.0

This example shows an interactive map of the United States with OpenStreetMap raster tiles overlaid by a vector outline of US counties. It combines zooming and panning with a Mercator projection. The code uses D3 v4.0 alpha, the d3-tile library for tile loading, and d3.geoPath with TopoJSON to render county boundaries. As the user zooms, the vector path’s stroke-width adjusts to maintain a constant screen-space width, while the raster tiles dynamically load from OpenStreetMap servers.

Homework 7

This map shows Oklahoma counties overlaid on OpenStreetMap raster tiles, with a crimson semi-transparent point pattern and county mesh outlines. The visualization combines tiled map imagery via `d3.tile` with geographic county boundaries from a TopoJSON file, projected using `d3.geoMercator` and rendered as SVG paths through `d3.geoPath`. Quake data appears as filled circles, though no dataset is explicitly loaded here. The code uses D3 v4, TopoJSON, and the `d3-tile` plugin to compose the interactive layout.

AAnaMal08

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.

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

Raster & Vector III

This example demonstrates pan and zoom interactions on a map of US counties, combining raster OpenStreetMap tile images with vector boundaries rendered as red outlines. The code uses d3-tile to load and position raster tiles, and d3.zoom to manage the user-driven transformations. A d3.geoPath with a Mercator projection draws a TopoJSON mesh of counties, while the zoom handler updates both the tile positions and the vector’s transform and stroke-width for efficient performance. The vector data is fetched from a GitHub-hosted TopoJSON file.