d3.js with leaflet.js

100%

d3.js with leaflet.js

✓ Published0🌍 Public

Last edited Nov 30, 2019

Created on Feb 28, 2014

This example demonstrates how to combine Leaflet.js and d3.js so that SVG circle markers stay fixed to geographic coordinates while maintaining a constant screen size. It loads five point locations from a local circles.json file and displays them as red, semi-transparent circles over an OpenStreetMap tile layer. The code uses Leaflet’s map.latLngToLayerPoint() method to convert geographic positions into pixel coordinates within the viewreset event handler, applying the result as SVG transform translations. The implementation relies on d3.json for data loading and d3 selections to append and update the circles.

AI-generated description

This is a map that uses leaflet.js and d3.js in a way that combines the two so that the d3.js object stays fixed in relation to a geographic point but remains the same size on the screen. It is as used as an example in the book D3 Tips and Tricks.

It is derived from the Pere Roca Ristol example but is simplified somewhat.

mit Licensed

Similar vizzes

Loading thumbnail…

d3.js with leaflet.js

This example shows a map centered on Wellington, New Zealand, with five semi-transparent red circles overlaid at specific coordinates, demonstrating how D3.js can be used to render SVG elements on top of a Leaflet map. The code initializes a Leaflet map with an OpenStreetMap tile layer, then loads geographic data from a `circles.json` file. D3.js selects the map's SVG layer, appends a group, and dynamically creates circle elements for each data point, converting the latitude and longitude coordinates into layer points using Leaflet's `latLngToLayerPoint` method to position them correctly. The circles update their positions in response to the map's `viewreset` event.

BBolarinwa Omoware

85% match

Loading thumbnail…

Fork of d3.js with leaflet.js

This example overlays red SVG circles on an OpenStreetMap tile layer using D3.js and Leaflet.js. It loads geographic coordinates from circles.json and renders each point as a fixed-radius circle positioned via Leaflet’s `latLngToLayerPoint` projection, which updates on map view changes using the `viewreset` event. The visualization demonstrates how to combine D3’s data-binding and SVG manipulation with Leaflet’s interactive map APIs for custom geographic overlays.

SSteve_Nashon

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

77% match

Loading thumbnail…

leaflet and d3.legend

This example demonstrates how to combine Leaflet maps with d3.legend to create interactive circle markers colored by a D3 scale, with separate legends for each data group. It shows three datasets (BK, KK, KI) rendered as SVG circles on a map, each using a different scale type—threshold, quantize, and ordinal—to map values to colors. The code uses Leaflet’s `L.circle` for markers and tile layers, D3 v5 for scales, and the d3-legend plugin’s `d3.legendColor` to generate legends. Data is parsed from hidden HTML `<aside>` elements containing comma-separated values, and a layer control toggles base maps and overlays.

EEE2dev

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

76% match

Loading thumbnail…

leaflet and d3.legend

This example combines Leaflet and d3.legend to place three distinct legends on an interactive map, each corresponding to a separate dataset rendered as SVG circles. It shows how to map numerical, quantized, and categorical values to circle sizes and colors, with data embedded in HTML aside elements. The code uses Leaflet for map tiles and layers, D3 v5 for data parsing and scale construction, and the d3-legend plugin to generate the legends. Three datasets are processed, each with its own scale type (threshold, quantize, and ordinal), and their circles are added to layer groups while legends are positioned in a separate container.

EEE2dev

75% match

Loading thumbnail…

leaflet - Map on D3.js points

This example shows a Leaflet map displaying Japanese land price survey points as red circles over a tile-based base map, with the points positioned using geographic coordinates. The visualization combines Leaflet’s mapping and tile-layer API with D3.js to render the data: D3 is used to select the map’s SVG layer, append a group, and create circle elements from a GeoJSON file. The circles’ positions are updated via `map.latLngToLayerPoint`, which converts latitude and longitude into screen coordinates during map view changes. The example uses leaflet 0.7.7 and D3.v3, loading data from `landprice.geojson`.

HHirosaji

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

74% match