Skip to main content
100%

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

✓ Published0🌍 Public
ZZJONSSON
Last edited Jun 20, 2012
Created on Jun 20, 2012

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.

AI-generated description

Similar vizzes

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

Fork of D3 World Mapzzz

A choropleth map of the United States visualizes a diversity index for each state, ranging from white to blue via a linear color scale. The visualization uses D3 v4 with `d3.geoAlbersUsa` for projection and `d3.geoPath` to render state boundaries from TopoJSON data. State polygons are filled based on a hardcoded dataset of diversity values, and hovering highlights the state with a thicker stroke. The code includes a commented-out tooltip and a legend using `d3.legendColor`, though neither is fully implemented.

11godfrey
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…

D3 map

This visualization presents a map of the United States, with each state’s geographic boundary drawn as a vector path. The code defines state outlines using SVG path data within a JavaScript object, where each state’s shape is specified as a series of coordinates. Built with React, the visualization leverages D3.js to render the map, using the path data to generate the geographic shapes through the `d3.geoPath` API. The animation-driven rendering brings the map to life, dynamically displaying the state boundaries on the canvas.

00506Zhengyi
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
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
80% match
Loading thumbnail…

US State Map with Interaction

This example presents a choropleth-style map of US states with pan and zoom interaction. Built with D3 v5 and rendered as SVG, it uses `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.zoom` to display state boundaries loaded from a TopoJSON file. State names and election data come from a CSV file, though only the names appear as tooltips via appended `title` elements. Hovering highlights a state in red, while the map supports interactive zooming through event-driven transforms.

Ddanrhymes
80% match