Skip to main content
SimilarExport ZIP
100%

leaflet and d3.legend

✓ Published0🌍 Public
EEE2dev
Last edited Jun 24, 2018
Created on Jun 17, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
95% 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
87% 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
78% match
Loading thumbnail…

Legend experimenting

This example demonstrates how to build reusable color and size legends for D3 visualizations. It shows a color legend using d3.scaleOrdinal with fruit categories mapped to distinct colors, alongside a size legend using d3.scaleSqrt. The legends are rendered as SVG groups, with the color legend drawing rectangles and the size legend drawing circles. The code uses D3 v5’s selection.join pattern, custom legend components exported from separate modules, and explicit spacing and offset parameters to control layout within an SVG canvas.

MMaciek Sitkowski
78% match
Loading thumbnail…

Legends

This example demonstrates two distinct legend styles: a color legend using an ordinal scale for categorical data and a size legend using a square-root scale for quantitative data. The color legend maps fruit names to distinct colors via `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to translate numeric ticks into varying circle radii. Both legends are rendered as SVG groups using D3's selection and merging API, with circles and text positioned via the `attr('transform', ...)` method. The page integrates custom gradients defined in the SVG defs, though they are not actively applied to the legend marks.

SSharvariPhadke
77% match
Loading thumbnail…

d3 Color and Size Legends

This example demonstrates how to build reusable legend components for both color and size scales. Two separate legends are rendered in an SVG: one showing fruit categories as colored circles using a d3 scaleOrdinal, and another displaying a d3 scaleSqrt with five tick values as scaled circles. The colorLegend and sizeLegend functions manage enter/update/exit selections, appending circle and text elements with attributed transforms and offsets. The code relies on d3-selection methods like selectAll, merge, and exit, with styling applied through external CSS classes.

JJohnPaulPagelerJr
76% match
Loading thumbnail…

d3.js with leaflet.js

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.

Dd3noob
76% match
Loading thumbnail…

Legend and colors

This example demonstrates how to build reusable legends for mapping data values to visual encodings. A color legend uses an ordinal scale with fruit names and distinct hues, while a size legend applies a square-root scale to represent numeric ticks with circles of varying radii. The code defines `d3.scaleOrdinal()` and `d3.scaleSqrt()` with SVG rendering, and updates legends through enter/merge/exit selections. Both legends are generated as reusable functions called via `.call()`, with circles and text positioned using `spacing` and `textOffset` parameters.

Ppaularl
76% match