D3 + Leaflet

100%

✓ Published0🌍 Public

Last edited May 11, 2016

Created on Apr 11, 2016

This example combines D3.js and Leaflet to create an interactive map of U.S. states with a hover effect. It uses a Leaflet tile layer from OpenStreetMap as the base, with D3 rendering state boundaries as SVG paths overlaid on the map. The code loads GeoJSON data from a gist and projects it using a custom `d3.geo.transform` that converts coordinates to Leaflet’s layer points. The `d3.geo.path` draws the states, and hover fills them brown. The map’s `viewreset` event triggers a reset function to reposition and rescale the SVG overlay.

AI-generated description

Similar vizzes

Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple interactive map of the United States, with each state rendered as a light green shape that turns red on hover. It uses D3 v5’s `geoAlbersUsa` projection and `geoPath` to draw the geography, while TopoJSON’s `feature` extracts state boundaries from the us-atlas counties-10m dataset. The SVG paths are selected and appended via `selectAll` and `data`, with styling handled in CSS. The map is static apart from the hover effect, with no zoom or pan interactions.

Mmikezy

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

81% match

Loading thumbnail…

test

This example displays a choropleth-style map of the United States, rendering each state as a separate SVG path. The visualization shows the geographic boundaries of all states by loading GeoJSON data from a remote gist. Using D3 v3, the code applies `d3.geo.path()` to convert GeoJSON features into SVG path data, then appends each path to an SVG container with a red border. The map is static, with no interactivity or color encoding, serving as a basic demonstration of D3's geographic projection capabilities.

FFrieseWoudloper

80% match

Loading thumbnail…

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

This example demonstrates how to create a map of the United States using D3.js, rendering each state as a green SVG path with black strokes. The code loads county-level TopoJSON data from the us-atlas package, extracts state boundaries with topojson.feature, and projects them using the d3.geoAlbersUsa() projection. State paths are generated with d3.geoPath and appended to an SVG element, with styles defined in an accompanying CSS file. The example uses D3 v5 and relies on the geo-albers-usa-territories plugin for the projection.

NNita

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

80% match

Loading thumbnail…

US State Map

This interactive map of the United States uses D3 v3 to render state boundaries as SVG paths from the included `uStates.js` data file. Each state is colored according to randomly generated sample statistics—low, average, and high values—using an interpolated color scale from light yellow to dark red. Hovering over a state triggers a CSS-based tooltip that displays the state's name and its low, average, and high values in a styled HTML table. The map animates state fills on hover with a subtle opacity change, while the tooltip follows the cursor, providing a clean and informative way to explore the data.

CCoola85

80% match

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

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

80% match