Gist 92ccda216d53db9f20a8f2b4c3a60b58

GeoTIFF Contours II

This example renders a global temperature contour map from a GeoTIFF file, using natural Earth projection to display the data. The visualization computes contour polygons with d3-contour, reprojects them into spherical coordinates, and fills each contour with a color from the interpolateMagma sequential scale based on its value. The code loads the raster via the GeoTIFF library, rotates longitude values from [0, 360] to [-180, +180], and inverts pixel coordinates to latitude and longitude. SVG paths are drawn with d3.geoPath, with antimeridian stitching handled by d3.geoStitch.

67% match

Gist f18adc0d5e8f2f124288

This visualization combines a GeoJSON geometry collection with a thematic map overlay, using a base point at coordinates (152.5169, -29.8064) and multiple detailed polygon outlines. The polygons appear to trace irregular regions or clusters, likely representing geographic areas or boundaries, while the point marks a specific location. The rendering emphasizes spatial relationships and distributions through geometric shapes, suggesting a geospatial analysis or mapping of regional data.

DDylanFM

67% match

Vector Tiles

This interactive map displays vector tiles of road networks from OpenStreetMap, rendered as SVG paths. It uses Mapzen’s vector tile API to load road data, and d3.geoMercator’s projection with a d3.tile-based tile system to fetch and display 256×256 tiles. The visualization supports pan and zoom via d3.zoom, with a matrix3d transform for scaling and translation. Mouse movement updates a location readout showing latitude and longitude, computed by inverting the projection.

66% match

Gist bea3b68601c5004145624bdb03eaa43e

This example maps oceanographic CTD (conductivity, temperature, depth) sampling locations along the British Columbia coast and offshore Pacific. A GeoJSON MultiPoint dataset feeds a D3 map using `d3.geoPath` with a TopoJSON basemap for landmasses. Points cluster tightly near the continental shelf and along a repeating offshore grid, while a supplementary CSV (`proflocations.csv`) suggests profile station coordinates. The visualization shows the spatial distribution of oceanographic measurements, highlighting dense nearshore sampling versus broader offshore transects, rendered as a static point-layer over geographic context.

MMbrownshoes

66% match

Heatmap

This heatmap blends a base map with three point locations that are transformed into radial gradients, showing how they are highlighted on a map. The visualization combines a CloudMade tile layer and OpenStreetMap data, with the points loaded as GeoJSON features. The map uses the Polymaps library, and its `load` callback dynamically adjusts each point’s radius based on the current zoom level while assigning a green gradient fill with fading opacity.

Tile Viewer

This example shows a zoomable map interface where the user can pan and zoom across geographic tiles. It displays each tile as a numbered 256-by-256-pixel square with a red border and its coordinates as text, updating the visible grid as the viewport changes. The code uses d3.geo.tile, d3.geo.mercator, and d3.behavior.zoom, applying a CSS 3D matrix transform to reposition tiles during zoom events. It relies on a gist by mbostock and the d3.v3 library, with tile positions computed from the current zoom scale and translation.

Heatmap

This heatmap visualizes topographic elevation data from the `volcano.json` dataset, rendered directly onto a Canvas element. The code reads the JSON file using `d3.json` and maps values between 90 and 190 to a custom terrain-like color scale built with `d3.scaleSequential` and `d3.interpolateHsvLong`. Elevation values are converted to RGB colors via `d3.rgb` and written into `ImageData` with `putImageData`.

Zoomable Map Tiles

This interactive map shows a zoomable view of OpenStreetMap tiles that smoothly pans and zooms across geographic regions. It uses the `d3.geo.tile` plugin to calculate which 256x256 tile images are visible in the viewport based on current scale and translate values, while `d3.behavior.zoom` handles user panning and zooming interactions. The tiles are rendered as `img` elements positioned absolutely, and a `d3.geo.mercator` projection inverts mouse coordinates to display the latitude and longitude at the cursor.