GeoJSON Transforms

100%

GeoJSON Transforms

✓ Published0🌍 Public

Last edited Dec 11, 2012

Created on Dec 11, 2012

This example demonstrates how GeoJSON geometry types can be transformed into simplified or filtered representations by applying custom point, line, and polygon handlers. It builds on the D3 geo module’s type dispatch system, explicitly defining default handlers for Feature, FeatureCollection, and GeometryCollection objects alongside primitive geometries. The code uses d3_geo_type and d3_noop to create a reusable translator, showing how to override or extend processing for each GeoJSON type. The rendering approach is not shown, focusing solely on the data-transformation pipeline.

AI-generated description

Similar vizzes

Loading thumbnail…

Custom Cartesian Projection

This example displays a set of land parcel polygons from a GeoJSON file, drawn as light gray shapes with black outlines on an SVG canvas. It creates a custom Cartesian projection by implementing a `d3.geoTransform` that maps raw coordinates through two `d3.scaleLinear` scales for the x and y axes. The resulting transform feeds into a `d3.geoPath` generator, which renders the geographic features using the projected coordinates, bypassing standard geographic projections.

Mmbostock

69% match

Loading thumbnail…

GeoJSON Contours Test

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.

CCurran Kelleher

69% match

Loading thumbnail…

Simplifying and cleaning Shapefiles.

This example demonstrates how to simplify and clean geographic data by rounding coordinates within a TopoJSON file. It uses D3’s `d3.round` function to reduce each point’s precision to two decimal places, then outputs the cleaned result as a JSON string. The code maps over the nested structure of polygons, line strings, and points, applying the rounding operation at each coordinate level. The visualization gallery shows the transformed data as plain text, highlighting the coordinate simplification process. The source is a GeoJSON-derived TopoJSON file, processed entirely in the browser with D3 v3.

Mmbostock

67% match

Loading thumbnail…

GeoJson Experiments

This example displays a minimal GeoJSON feature collection on an interactive slippy map. It renders a point for Dinagat Islands, a point for Singapore, and a line string connecting their coordinates. The map is built with Mapbox.js version 1.6.2, and the GeoJSON data is loaded directly into the map’s `featureLayer.setGeoJSON` method. The visualization demonstrates basic point and line geometry placement over a raster tile background, with the view initially centered on the first coordinate at zoom level five.

CCliffordAnderson

66% match

Loading thumbnail…

GeoJSON in Three.js

A rotating three-dimensional wireframe globe renders world landmasses in red over a gray graticule grid, animated via Three.js WebGL. The code loads world-atlas TopoJSON, converts it to a GeoJSON mesh with topojson.mesh, and maps longitude/latitude coordinates to Cartesian points on a sphere. A spherical MultiLineString graticule is built manually, and both layers use Three.js LineSegments with LineBasicMaterial, rotated continuously by d3.timer.

Mmbostock

66% 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

65% match

Loading thumbnail…

Gist 85a75203bb9327d5704c

This example visualizes a single blue polygon with a semi-transparent fill and a bold outline, rendered from GeoJSON coordinate data. The visualization relies on a custom rendering approach, likely using d3.geoPath to project and draw the polygon onto an SVG or canvas element. The code applies explicit styling properties—fill, fill-opacity, and stroke-width—directly from the feature’s style object, demonstrating how geographic features can be styled programmatically. The rendering is static, with no animation or interaction, and the polygon’s vertices span longitude and latitude values to illustrate basic map-projection output.

CCliffordAnderson

64% match

Loading thumbnail…

Postman upload

This example demonstrates how GeoJSON point data with custom properties can be visualized on an interactive map. It uses D3.js to bind the feature collection and render each point as a marker, with properties like title, series, and image captions driving tooltips or popups. The code leverages d3.geoPath to project geographic coordinates and d3.forceSimulation for optional layout adjustments, while the marker styling (size, color, symbol) is drawn from the properties. The data source is a GeoJSON file loaded from a gist, and the visualization shows three historical images of Friedrichstraße in Berlin, with coordinates provided as strings in the geometry.

CCliffordAnderson

64% match