GeoJSON Contours Test

100%

GeoJSON Contours Test

✓ Published0🌍 Public

Last edited May 13, 2024

Created on May 13, 2024

This example tests the rendering of contour lines stored as GeoJSON MultiPolygon features, with each feature carrying a numeric value property. The visualization displays these contours as filled regions across a geographic area, creating a layered map that resembles a topographic or density surface. The code uses D3’s `geoPath` to project and draw the GeoJSON geometry onto an SVG canvas, with the contour values determining the visual appearance of each region. The data comes from a gist by curran, showcasing how pre-generated contour polygons can be directly translated into a map visualization.

AI-generated description

Similar vizzes

Loading thumbnail…

GeoTIFF Contours

This example visualizes surface temperature data from a GeoTIFF file as twenty colored contour bands over a map-like SVG view. It reads the raster values with the GeoTIFF library, computes contours using `d3.contours` with smoothing disabled, and renders them as filled paths via `d3.geoPath`. A sequential color scale with `d3.interpolateMagma` maps each contour’s value to its fill color, producing a vivid elevation-style temperature gradient across the geographic extent.

Mmbostock

78% match

Loading thumbnail…

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.

Mmbostock

78% match

Loading thumbnail…

geoContours

This visualization uses a geoContour layer to turn weather-station temperatures into smooth, colored bands across a map. The page loads a GeoJSON-style array of [longitude, latitude, temperature] points from points.json, then projects them with an equal-Earth projection and renders them on a canvas. `d3.geoContour()` from the d3-geo-voronoi plugin computes isobands between user-defined thresholds (here a fixed threshold of 40), and each contour band is filled with a sequential blue-red scale mapping temperature. The semi-transparent black dots mark the station locations. The map uses the Equal Earth projection and is drawn with d3.geoPath and a canvas context; no other visual encodings are shown. This example demonstrates the geoContour API for gridded or scattered geographic data in d3.# geoContours **geoContours** demonstrates `d3.geoContour()` from the d3-geo-voronio plugin, which computes isobands (filled contour regions) for irregularly spaced geographic data. The example visualizes weather station temperature readings across Africa and surrounding regions. ## Visualization Details The visualization uses a **Equal Earth projection** to render temperature contours on a canvas. Weather stations appear as black dots, with each station's position determined by [longitude, latitude] and its temperature used as the contour value. **Key implementation:** - **Data**: ~120 weather stations across Africa with temperature readings - **Contour generation**: `d3.geoContour()` with 40 evenly-spaced threshold values creates filled isobands between temperature levels - **Color encoding**: A sequential RdBu (red-blue) scale maps temperature, with red for warmer and blue for cooler values - **Rendering**: Canvas-based with semi-transparent fills, allowing overlapping contour bands to blend visually - **Overlay**: Black dots mark the original station locations The visualization creates a smooth temperature surface across the African continent by interpolating irregularly-spaced point data into nested contour bands, using a custom geoContour implementation from the d3-geo-voronoi library. The projection is Equal Earth, and the contours are computed on the sphere (not projected), giving smooth geographic temperature isolines. The points are geographic [longitude, latitude] coordinates; each has a temperature value in °C. The example demonstrates d3.geoContour() from the d3-geo-voronoi library (which uses d3-delaunay and d3-tricontour under the hood). The data represents African weather stations, but the contouring algorithm works for any irregularly-spaced XYZ dataset. </textarea>

PPhilippe Rivière

76% match

Loading thumbnail…

Contour Test using Jason Davis implementation with D3

This visualization demonstrates contour generation on a 20×10 grid of numeric values using the Conrec algorithm, ported to D3. The scalar field is encoded as a series of filled contour polygons, each mapped to a distinct level between -5 and 3. A linear color scale interpolates from white to red, with semi-transparent fills and black strokes delineating the contours. The data is rendered into an SVG using D3's line generator, with spatial scaling applied to map the grid coordinates onto a 500×500 pixel canvas. The example showcases how D3 can work alongside external contouring libraries to produce smooth isolines directly in the browser.

DDinoJay

75% match

Loading thumbnail…

test2

This example displays a map of the United States rendered as SVG paths, with each state outlined using GeoJSON data loaded from an external gist. It shows the geographic boundaries without additional styling or interaction. The visualization relies on D3 v3, specifically `d3.geo.path()` to convert GeoJSON features into SVG path data, and `d3.json()` to fetch the state geometry. The map is drawn into an SVG container with fixed width and height, using a simple data join to append one `<path>` element per state. No choropleth or data-encoding is applied, so the result is a plain state boundary map.

FFrieseWoudloper

73% match

Loading thumbnail…

D3 test

This example visualizes a historical route from a GeoJSON file, displaying daily segments as dashed black polylines over a light blue graticule-filled map. The code uses D3 v5 with an SVG rendering approach and a Mercator projection configured via `d3.geoMercator()`. It loads coastline and route data with `d3.json()`, then binds the features to SVG paths using `d3.geoPath()`. The graticule is generated with `d3.geoGraticule()`. The visualization clearly shows the path’s progression across the mapped region, with each day’s travel distinguished by styling properties like stroke dasharray.

MMarin Govorcin

73% match

Loading thumbnail…

Gist 5967514

This example displays a map of U.S. counties using a TopoJSON shapefile from the U.S. Census Bureau, rendered as gray-filled paths with white borders that turn red on hover. It shows the geographic boundaries of counties and responds to clicks, though the click behavior only logs to the console. The visualization uses D3 v3’s `d3.geo.path()` to project and draw the SVG paths, and TopoJSON’s `topojson.feature` to extract GeoJSON features from the topology. The map is static, with no zoom or pan, and the hover effect is the only interactive styling.

CCaged

72% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a choropleth map of geographic features rendered as SVG paths. It uses D3.js v5 to load the GeoJSON data, apply a Mercator projection with `d3.geoMercator`, and generate the path data via `d3.geoPath`. The TopoJSON library converts the datasource into GeoJSON features using `feature()`, while `d3.json` fetches the remote file before appending each path to the SVG canvas.

Cchaimmaeee

72% match