D3 + Leaflet

100%

✓ Published0🌍 Public

Last edited Oct 15, 2017

Created on Oct 15, 2017

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.

AI-generated description

Built with blockbuilder.org

Utilising marker's option: *L.marker(latlng, { options });* to bind data that we can access it with event.target.options when hoove on markes. That is the perfect way of binding data I can think of.

When move your mouse over the marker, there will be a D3js created pie chart over it.

mit Licensed

Similar vizzes

Loading thumbnail…

D3 + Leaflet: Pie

This example shows six pie charts overlaid on a Leaflet map, each encoded at a geographic coordinate and sized with a red-and-gray split representing an `achieve` value between 0 and 1. The code uses Leaflet’s `latLngToLayerPoint` to convert geographic positions into SVG screen coordinates, and d3.v3’s `d3.svg.arc` and `d3.layout.pie` to generate the pie paths. The SVG layer is attached to the map via `map._initPathRoot()`, and the chart positions update on the map’s `viewreset` event. The source data is a hardcoded array of lat/lng pairs with achievement ratios.

11Cr18Ni9

87% match

Loading thumbnail…

Making an Interactive Pie Chart

A donut chart displays income categories with a tooltip showing percentage on hover. The visualization uses D3 v5’s `pie`, `arc`, `scaleOrdinal`, and `csv` functions to load income data and render SVG paths. Labels are positioned using the `labelArc.centroid` method, while tooltips appear via mouseover events and are hidden on mouseout, with interaction handling for both slices and the tooltip itself.

Nneetusingla12(Neetu Singla)

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

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

77% match

Loading thumbnail…

D3 Piechart - with labels

This example shows a pie chart of fruit quantities, with each slice labeled by its fruit name. The chart uses the `d3.pie()` generator to compute arc data, and `d3.arc()` with inner and outer radii to create a donut-like shape. Slice paths are rendered in orange with white strokes, and labels are positioned at each arc’s centroid using `arcGenerator.centroid(d)`. Data is hard-coded in the JavaScript, and the visualization is drawn as SVG within an HTML page, styled by CSS.

SSubhendu Karmakar

77% match

Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes income breakdown across three categories—Sales, Dividends, and Interest—using repeated rows from a CSV file. Built with D3 v5, it renders an SVG donut with labeled slices and a hover tooltip displaying each category’s percentage. The code leverages `d3.pie` for arc calculation, `d3.arc` for path geometry, and `d3.scaleOrdinal` for color mapping. Hovering highlights a slice and dynamically positions a tooltip using mouse coordinates.

RRochelle

77% match

Loading thumbnail…

D3: Pie layout

This example shows a donut chart built with D3.js, displaying six numeric values as colored arc segments arranged around a central hole. Each segment is labeled with its corresponding value, positioned at the centroid of the arc. The visualization uses the `d3.pie()` layout to compute the angles and `d3.arc()` to generate the SVG path shapes, with an ordinal color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`) assigning colors. Data is hardcoded as an array, and all rendering is done via SVG elements in d3.v4.

深深度碎片

77% match

Loading thumbnail…

D3

This example demonstrates an animated pie and bar chart using the D3.js v3 library. The pie chart visualizes an array of six numeric values with arc segments, while the bar chart displays a separate dataset with an elastic growth animation. The charts are rendered as SVG elements, with the bar chart featuring interactive hover effects that change bar colors and display tooltips. The code utilizes D3 APIs including `d3.layout.pie`, `d3.svg.arc`, `d3.scale.ordinal`, and `d3.scale.linear` for data binding, scaling, and animation transitions.

Mmrharis1

77% match