Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
Ccathykan
Last edited Jun 1, 2020
Created on Jun 1, 2020

A static SVG legend demonstrates categorical color mapping and fixed circle sizing using D3 v5 and React. The `colorLegend` function renders colored circles for fruit categories (`apple`, `lemon`, `lime`, `orange`) via `scaleOrdinal`, with text labels positioned by `textOffset`. The code uses D3 selections (`selectAll`, `enter`, `merge`, `exit`) to bind data, setting circle fills from the color scale and spacing items vertically. The legend appears at a translated SVG coordinate, with font size and anchor attributes applied to text elements.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and size legends

A legend displays a color scale for four fruit categories—apple, lemon, lime, and orange—as colored circles with matching text labels. Built with D3 v5, the example uses `scaleOrdinal` to map domain values to specific colors and a custom `colorLegend` function that binds data to SVG groups via `selection.selectAll` and `enter()`. The legend is rendered with circle radius, spacing, and text offset as configurable props, demonstrating reusable legend components in SVG.

Xxiaoma1002
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom D3.js legends rendered as SVG within a React application. The color legend maps categorical fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to encode numeric tick values as circle radii. Both legends are constructed with D3's data join pattern (`selectAll`, `enter`, `merge`, `exit`), displaying circles and text labels. The color legend places swatches vertically, and the size legend scales circle areas according to the square-root scale, with tick generation via `sizeScale.ticks`.

Vvic126
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create separate color and size legends using D3 v6 in a React application, rendering with SVG. The color legend uses `d3.scaleOrdinal` to map fruit names to colors, while the size legend uses `d3.scaleSqrt` to represent numerical values through circle radii. Both legends are built with reusable functions that append groups, circles, and text elements, highlighting the pattern of entering and merging selections for dynamic updates.

MMatthew Rubino
92% match
Loading thumbnail…

Color and Size legends

This example demonstrates how a legend can encode both color and size for categorical data, using a row of fruits and a separate legend of circles to map each fruit type to a specific hue and radius. Built with D3 v5 and rendered as SVG, the `colorLegend` function defines reusable, data-bound groups and circles, while `index.js` applies an ordinal color scale mapping 'apples' and 'lemon' to red and a muted yellow-green. The visualization updates dynamically as data changes, with the legend and circles responding to the same color and radius scales for consistent encoding.

SShane Carey
91% match
Loading thumbnail…

Color and Size Legends

The example demonstrates two reusable legend components rendered in SVG: a color legend built with `d3.scaleOrdinal` mapping fruit names to categorical colors, and a size legend using `d3.scaleSqrt` for continuous numeric values with circular markers. Both legends are generated through custom functions that bind data to groups, with the color legend encoding categories via circle fill and the size legend varying circle radius. The code relies on D3 v5 selections, `.enter()`, and `.merge()` patterns to update the legends dynamically.

Zzhangfa
91% match
Loading thumbnail…

Color and size legends

A standalone SVG legend demonstrates how to encode categorical and quantitative data through color and size. The color legend maps fruit names (apple, lemon, lime, orange) to distinct hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to map a numeric domain from 0 to 10 to circle radii. Both legends are rendered as reusable components via the `colorLegend` and `sizeLegend` functions, positioned with appended SVG groups and `d3.select`. The example relies on D3 v5 and custom tick formatting.

SSagar Malviya
91% match
Loading thumbnail…

Color and Size Legends

A legend example displays categorical color scales using D3 v6’s scaleOrdinal, rendering SVG circles and text labels. Each circle’s fill is mapped directly from the color scale’s domain, while a text offset places labels beside the markers. The colorLegend function accepts a color scale and spacing properties, using selection.merge and enter/update patterns to manage the DOM. Data originates from a hardcoded array of fruit names, with no external dataset loaded.

Hhanulik.ondrej@gmail.com
91% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components built with D3 v5 and rendered as SVG. A color legend uses `scaleOrdinal` to map fruit categories to distinct circle fills, while a size legend employs `scaleSqrt` with `ticks()` to encode numeric values as varying circle radii. Both legends bind data to grouped `<g>` elements, applying enter/merge/exit selections for dynamic updates. The code defines reusable functions `colorLegend` and `sizeLegend`, called via `.call()`, with text labels positioned using `textOffset`.

AAndreas Loew
91% match