geoTransform Example

100%

geoTransform Example

✓ Published0🌍 Public

Last edited Mar 17, 2017

Created on Feb 24, 2017

This example demonstrates a custom D3 geoTransform that scales a U.S. state map. The projection is defined with a `scale` function that uses `d3.geoTransform` to adjust coordinates around the center of the SVG canvas, shrinking the map to 20% of its original size. State boundaries are loaded from a TopoJSON file, converted to GeoJSON features, and rendered as gray SVG paths. The visualization highlights how custom geographic projections can be created and applied with D3's geoPath, offering a simple way to rescale map data without using a standard projection.

AI-generated description

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example creates a tilegram map of the United States using D3.js and the TopoJSON library. It loads geographic data from `tile.topo.json` and renders each state as a path generator using `d3.geoPath` with a custom `geoTransform` projection. The SVG canvas is 1400 by 1000 pixels, and states are styled with their names and tilegram values from the data. The visualization demonstrates how to combine TopoJSON feature extraction with D3's geographic path rendering to produce a stylized map.

Aanduskong

77% match

Loading thumbnail…

Custom Projection

This example displays a map of California counties and their boundaries, rendered with a custom 2D affine transform instead of a standard geographic projection. The `d3.geoPath` and `d3.geoTransform` APIs apply a matrix operation that flips the y-axis, allowing pre-projected TopoJSON data to be correctly positioned within the SVG viewport. The map uses gray fills and strokes, with counties and boundary lines drawn as separate SVG paths.

Mmbostock

77% match

Loading thumbnail…

state testing

This example displays a map of the United States with each state rendered as a tan SVG path with grey borders on a blue ocean background. The visualization loads US Atlas TopoJSON data and converts it to GeoJSON features using `topojson.feature`, then projects the coordinates with `d3.geoAlbersUsa` and `d3.geoPath` within a React component. Hovering a state changes its fill color to dark green. The code references commented-out scales and data joins for potential color mapping, though the active version only renders the base geography.

Hhunsingeruk@gmail.com

76% match

Loading thumbnail…

Geo Map

This map of the United States lets users click a state to zoom in on it and click the background to zoom back out. The visualization uses D3.js v3 with the `d3.geo.albersUsa` projection and `d3.geo.path` to draw state boundaries from TopoJSON data loaded from a GitHub gist. Clicking a state triggers a smooth `g.transition()` that adjusts the scale and translate attributes, while the active state is highlighted in orange via CSS classes.

IIgathi

76% match

Loading thumbnail…

country map

This example displays a map of the United States with state boundaries, rendered as SVG paths using D3’s `geoAlbers` projection and `geoPath`. It shows land areas in blue, a graticule sphere in purple, and state interiors highlighted with yellow strokes. The map loads US Atlas TopoJSON data from jsdelivr, processes it with `topojson.feature` and `topojson.mesh`, and is built within a React component using the `geoGraticule` API to draw the graticule lines.

PPavaniMangugari

76% match

Loading thumbnail…

Zoomable Geography

This example shows U.S. states and counties rendered as SVG paths, which can be panned and zoomed with the mouse. It uses d3.behavior.zoom to modify the transform of a group element, letting the browser redraw geographic features quickly without reprojection. The code loads TopoJSON data and renders it with d3.geo.path, using a null projection to preserve the pre-computed geometry. Border stroke widths are adjusted inversely to the zoom scale to maintain a constant visual weight.

Mmbostock

76% match

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

76% match

Loading thumbnail…

Gist 08d3bc545278d6a3b2d22df875392612

This example visualizes U.S. state boundaries using D3 v4’s geoAlbersUsa projection and d3.geoPath to render geographic features from a local us-states.json file. The SVG canvas, sized 700x580, is appended to the body, and each state’s polygon is drawn as a path element with a default fill and stroke. The map is centered using a translate of [width/2, height/2], and the simple code demonstrates how to load and project GeoJSON data for display. No interactions or styling are applied, keeping the focus on the map layout.

JJoymangulJensen

76% match