Skip to main content
SimilarExport ZIP
100%

Maptime AMS #4: Geopolitics, Borders & D3.js!

✓ Published0🌍 Public
SSokrates86
Last edited Jan 15, 2016
Created on Jan 15, 2016

This example visualizes the territorial expansion of the United States from 1790 onward, animating state boundaries over time. A draggable timeline slider, built with the custom chroniton library, controls the year and triggers map updates. The map is rendered as SVG using D3.js, with geographic data loaded from TopoJSON files (states.json and usa.json). Each state is colored according to its name using a predefined color palette, and the chroniton slider includes play/pause buttons for automatic animation.

AI-generated description

Built with blockbuilder.org

Similar vizzes

Loading thumbnail…

Let's make an interactive US Map with D3.js!

This interactive US map uses d3.geoAlbersUsa and d3.geoPath to render state boundaries from TopoJSON data, with each state displaying its name via SVG title elements. The visualization supports zooming and panning through d3.zoom, applying transforms to the SVG group containing the state paths. States are colored light green and highlight on hover, while the surrounding ocean appears as a light blue sphere backdrop. The map loads geographic data from a CDN-hosted US atlas file and renders everything client-side using D3 v5.

KKaitlyn Trudeau
78% match
Loading thumbnail…

Let's make an interactive US Map with D3.js!

An interactive SVG map of the United States renders state boundaries with basic hover styling. Using the D3.js and TopoJSON libraries, it loads a `states-10m.json` TopoJSON file, converts the topology into GeoJSON features, and projects them with an Albers equal-area conic projection via `d3.geoAlbersUsa()`. A zoom interaction updates the map's SVG transform, while each state path gains a tooltip showing its name.

Aacrasto-tibco
77% match
Loading thumbnail…

Untitled

This interactive map of the United States uses a D3.js geographic projection to display state boundaries, rendered as SVG paths from TopoJSON data. Clicking a state zooms in via a smooth `transition` that adjusts the group’s scale and translate attributes, while the clicked state is highlighted in orange. A click on the background resets the view, returning the map to its original scale and stroke width. The example relies on `d3.geo.albersUsa`, `d3.geo.path`, and TopoJSON’s `feature` and `mesh` methods.

CChase Hall
76% match
Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a choropleth-style map of the United States using D3.js, highlighting a subset of states with a distinct CSS class. It loads TopoJSON data from `https://d3js.org/us-10m.v1.json` and uses `d3.geoAlbersUsa` for projection and `d3.geoPath` to render state boundaries as SVG paths. The code filters state features against a predefined set of FIPS IDs, though the visual highlighting of selected states is commented out.

Jjons288
76% match
Loading thumbnail…

Let's make a US map with D3.js!

This example renders a map of the United States using state boundaries. The map is drawn as black paths with white strokes on an SVG canvas. The code loads GeoJSON state outlines from the `us-atlas` package, converts them into topological features with the `topojson` library, and projects them using `d3.geoAlbers` with `d3.geoPath` for rendering. The visualization demonstrates a basic choropleth-ready framework without additional data encoding.

Ddaigokawabe
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…

Untitled

This example presents an interactive map of the United States using d3.geo.path with an Albers USA projection, rendering state boundaries as SVG paths. Clicking a state triggers a smooth zoom animation that scales and translates the map to center on the selected region, highlighting it in orange. The map is constructed from topojson.feature and include a mesh overlay for state borders. The zoom effect is achieved by transitioning the group element's transform attribute using d3.transition over 750 milliseconds.

Ppcsong33
76% match
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
75% match