Skip to main content
SimilarExport ZIP
100%

dc-leaflet legend feature (creates a static legend based on range of the data)

✓ Published0🌍 Public
KKatiRG
Last edited Sep 23, 2015
Created on Sep 23, 2015

This example demonstrates how to add a static legend to a dc.leafletChoroplethChart, displaying color ranges based on the data’s domain. A Leaflet control is created and updated during the chart’s preRedraw event, calculating color grades from the chart’s colorDomain and color palette. The legend appears only after all six linked dc charts have been cycled, using the YlGn colorbrewer palette and a d3.extent calculation. The code shows the dc.js and Leaflet integration, including custom legend lifecycle methods.

AI-generated description

Similar vizzes

Loading thumbnail…

Modification to dc.leaflet.js to a) plot colorscale in choropleth in the right order and b) to accept colorbrewer.js scales

This example modifies `dc.leaflet.js` to enhance its choropleth rendering. It adjusts the color calculation function to correctly order colors from a `colorbrewer.YlGn` palette, and it accepts min/max values from the chart’s `colorDomain()` to map data values to colors. The code defines a `_colorCalculator` that divides the value range by the palette length to select a color, and it integrates a custom `colorAccessor`. The visualization uses the `dc.colorChart` and `dc.leafletChart` APIs to render geographic features.

KKatiRG
75% 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
72% 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
70% match
Loading thumbnail…

Legend

This example demonstrates a reusable categorical color legend with colored circles and matching text labels for fruit categories. Using D3 v5, the `colorLegend` function creates a group per domain value, binds circles and text, and positions them with a vertical spacing transform. A `scaleOrdinal` maps the domain to a color range, with the legend called via `selection.call()`. The SVG rendering applies styled ticks and circle strokes from an external stylesheet.

Rrigt
69% match
Loading thumbnail…

Color Legends

This example shows a reusable color legend component that maps ordinal categories to colored circles with labels. Using d3.scaleOrdinal, it defines a domain of fruit types and a range of colors, rendering each category as a red or yellow circle positioned horizontally with a text label below. The code exports a colorLegend function that leverages D3’s enter, merge, and exit selections to update groups dynamically, while the SVG is populated via d3.select and custom xPosition and height-based transforms.

AAli Ahmed
69% match
Loading thumbnail…

Color and Sized Legends with D3.js

This example demonstrates how to build a color legend with D3.js, using a categorical scale to map named domains like “apple” and “lemon” to red and yellow circles. The code leverages `scaleOrdinal`, `selection.merge`, and custom legend functions to position groups with spacing, adding text labels offset from each circle. It renders as SVG with a static dataset defined inline, showing the legend’s interactivity through enter, update, and exit selections. The visualization also includes sample population data from a CSV file, though it is not actively displayed in the main legend.

Yyouer
69% 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
68% match
Loading thumbnail…

Color Legends

A color legend maps ordinal categories to hues, displaying two large circular swatches for "apple" and "lemon" against a white background. The `d3.scaleOrdinal` assigns red and yellow, while a custom `colorLegend` function binds the scale's domain to SVG groups. Circles and text labels are appended and updated via enter/merge/exit selections, with transform positions calculated from array index and a fixed height. The example demonstrates reusable D3 v5 code for building legends with dynamic scaling.

AAli Ahmed
68% match