D3 + Leaflet (fork from bost.ocks.org/mike/leaflet/)

100%

D3 + Leaflet (fork from bost.ocks.org/mike/leaflet/)

✓ Published0🌍 Public

Last edited Nov 12, 2016

Created on Nov 12, 2016

This example combines D3 with the Leaflet mapping library to render U.S. state boundaries as an interactive choropleth-style overlay on top of a Stamen Toner tile map. The D3 geographic projection is configured to use Leaflet’s latLngToLayerPoint method, which projects each GeoJSON feature onto the map’s current view. State outlines are drawn as SVG paths with a semi-transparent black fill that turns brown on hover. The map responds to zoom and pan events, redrawing the state boundaries to match the new view, creating a seamless integration between D3’s data-driven rendering and Leaflet’s interactive tile-based mapping. The visualization demonstrates how to combine D3’s flexible data joins and projection system with Leaflet’s robust map interactions, rendered on an HTML5 canvas with smooth zoom animations.

AI-generated description

forked from <a href='http://bl.ocks.org/ZJONSSON/'>ZJONSSON</a>'s block: <a href='http://bl.ocks.org/ZJONSSON/2957559'>D3 + Leaflet (fork mbostock)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3 + Leaflet (fork from bost.ocks.org/mike/leaflet/)

This example combines D3 with Leaflet to create an interactive choropleth map of US states. The map uses Leaflet for tile-based map rendering and zooming, while D3 handles the geographic data. State boundaries are drawn as SVG paths using D3’s geo path generator, with a custom projection function that converts latitude and longitude coordinates to Leaflet layer points, ensuring the states align perfectly with the map tiles. The states are semi-transparent black, turning brown on hover. As users zoom or pan the map, the state boundaries are redrawn to match the new view, maintaining accurate overlay. The visualization demonstrates the integration of D3's data-driven SVG rendering with Leaflet's interactive map capabilities.

ZZJONSSON

93% match

Loading thumbnail…

D3 + Leaflet

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.

JJn1532

89% match

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

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

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

81% 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…

State Ratings Map

This example renders a choropleth map of the United States using D3’s geo APIs. It employs `d3.geoAlbersUsa` for the projection, `d3.geoPath` to draw state boundaries, and `d3.geoGraticule` to overlay a graticule and outline. State geometries come from a TopoJSON source, converted to GeoJSON via `topojson-client`’s `feature` function. The visualization uses a join-based workflow to create SVG paths, with a white stroke separating states and a light gray graticule.

Mmacgregorm01@gmail.com

80% match

Loading thumbnail…

Let's make the US Map with D3.js!

This example displays a choropleth-style map of the United States with state boundaries rendered as SVG paths. It uses D3.js v5 to load US Atlas TopoJSON data, converts it to GeoJSON with the topojson library’s `feature` function, and projects it using `d3.geoAlbersUsa`. The `geoPath` generator draws each state as a separate path with a light green fill and subtle black strokes. A light blue sphere background is added first to contrast with the landmasses. The visualization intentionally omits labels or interactive features, focusing strictly on the geographic outlines.

Aacrasto-tibco

80% match