Skip to main content
100%

Leaflet with D3 popups

✓ Published0🌍 Public
Aandrew-reid
Last edited May 8, 2018
Created on May 8, 2018

A Leaflet map responds to user clicks by opening a D3-generated popup at the clicked location. The popup contains a 10×10 grid of colored rectangles, using a linear color scale from yellow to steelblue. The example integrates D3 4.13 for SVG creation and Leaflet 1.3.1 for map and popup management, setting the popup content via `setContent` with a D3-created DOM node.

AI-generated description

Similar vizzes

Loading thumbnail…

Leaflet with D3 popups

A map of London displays two polygon regions, each opening a popup containing an animated bar chart built with D3. The charts summarize monthly data—such as swan bite injuries—using `d3.scaleLinear` and `d3.scaleBand` axes, with bars transitioning from zero height over one second. The example combines Leaflet’s `L.geoJSON` layer and `bindPopup` with a D3-created SVG, returning the popup content via a custom `chart` function that generates the visualization on demand.

Aandrew-reid
80% match
Loading thumbnail…

Leaflet with D3 popups

A Leaflet map centered on London displays two GeoJSON polygons, each opening a D3-generated popup upon clicking. The popup renders an animated bar chart from the feature's `data` property, with axes, rotated tick labels, and color-coded bars. The code uses Leaflet's `L.geoJSON` and `bindPopup` to integrate the custom chart, while D3 v4 creates the SVG, scales, axes, and transitions. Tile imagery comes from OpenStreetMap via WMFLabs.

TThomasG77
78% match
Loading thumbnail…

D3 + Leaflet

This example combines D3 v3 and Leaflet to show interactive pie charts on a map. Hovering over a Leaflet marker creates a D3-generated donut chart in a tooltip div, displaying the percentage bound to that marker’s options via `L.marker(latlng, { achieve: d.achieve })`. The map offers OSM, Thunderforest, and USGS tile layers, with marker data accessed through `event.target.options`. D3’s `d3.svg.arc` and `d3.layout.pie` render the SVG chart.

11Cr18Ni9
71% match
Loading thumbnail…

leaflet example

This example shows multiple datasets overlaid as circles on an interactive Leaflet map, with each dataset visualized using a different scale type. It uses the Leaflet library for map tiles and layers, while D3 v5 parses CSV data embedded in `<aside>` elements and binds it to SVG circle markers. The code assigns numerical or categorical attributes to color scales (threshold, quantize, or ordinal) and renders a legend for each group. Map layers for streets, satellite, and grayscale are togglable, and tooltips display an optional address attribute from the data.

EEE2dev
69% match
Loading thumbnail…

Fork of Let's make a map with D3 with popup.js!

A world map rendered with D3.js displays country values from a CSV file, changing country color to red on hover while showing a tooltip with the country ID and value. Using d3.geoNaturalEarth1 projection and d3.geoPath, the visualization loads TopoJSON world data and CSV data via Promise.all. Mouseover events position an HTML tooltip near the cursor, while d.csv provides the id-value pairs that populate the tooltip text.

Kklumng
69% match
Loading thumbnail…

Simple Leaflet Map

This example displays a simple interactive map with four settlement markers, each opening a popup with its label. The map is built with Leaflet 0.7, using an OpenStreetMap tile layer. The code initializes a map centered on the first settlement and adds markers from a hardcoded array of coordinates, demonstrating basic Leaflet map creation, tile loading, and marker popup functionality in a plain HTML page.

Ccharliemok
68% match
Loading thumbnail…

d3 bootstrap popovers (exhibit A)

A grid of circles fills an SVG, each with a randomized radius. Hovering over a circle triggers a Bootstrap-style popover containing a title and a dynamically generated SVG rectangle whose width corresponds to the circle's radius. The example demonstrates a custom tooltip plugin for d3.v2 that integrates jQuery and Bootstrap CSS, supporting multiple placement and detection modes for interactive data annotation.

GGerHobbelt
68% match
Loading thumbnail…

Leaflet and D3 Map

This example combines Leaflet and D3 to render a blue GeoJSON rectangle polygon that pans and zooms with an OpenStreetMap tile layer. It uses D3’s `d3.geo.path` with a custom `projectPoint` function that calls Leaflet’s `latLngToLayerPoint`, while a `viewreset` handler recalculates the SVG overlay’s bounds and transform. The map is centered on Wellington, New Zealand, and the rectangle’s path is drawn as SVG elements within Leaflet’s overlay pane.

Dd3noob
68% match