Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
Llrakla
Last edited Dec 29, 2021
Created on Dec 29, 2021

Five apples are rendered as red circles, with a black outline indicating the currently selected fruit. Clicking a fruit updates the selection state. Built with React and D3 v5, the example uses `scaleOrdinal` to map fruit types to both fill colors and circle radii, creating a color and size legend. The visualization is rendered as SVG elements with React components.

AI-generated description
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
88% match
Loading thumbnail…

Color and Size Legends

A row of fruit shapes demonstrates how D3.js ordinal scales map categorical data to visual channels. The `scaleOrdinal` function assigns colors and radii to apples and lemons, while circles and text labels update through data joins. As the simulation runs, fruits are removed or replaced, triggering enter, update, and exit transitions that animate position, size, and color changes. Clicking a fruit selects it, highlighting it with a black stroke. The example uses D3 v5 and renders with SVG elements and transitions.

Iinroadings
88% 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
88% match
Loading thumbnail…

Color and size legends with D3.js!

This example demonstrates how to build custom color and size legends using D3.js v5 in a React application. It shows an ordinal color scale mapping fruit names to distinct colors, alongside a square-root size scale with five ticks rendered as proportionally sized circles. The code defines reusable legend components that use selection joins with `merge()` and `exit().remove()` to manage SVG groups dynamically. Both legends render as SVG, with circles and text positioned using transform attributes and spacing parameters.

Fforcox43
88% match
Loading thumbnail…

Color and Size Legends

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.

Ccathykan
88% match
Loading thumbnail…

D3 Color and Size Legends

This example demonstrates D3 color and size legends through an interactive fruit bowl visualization. Apple and lemon icons are rendered as SVG circles with red and yellow fills via `d3.scaleOrdinal`, while their radii vary between 50 and 25 pixels. The code uses a general update pattern with enter/merge/exit selections to animate changes in the fruit array over time, including removals and type substitutions. Static legends for color and size scales are created alongside the visualizations.

Ccaedcagt76@gmail.com
88% 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
88% match
Loading thumbnail…

Color and size legends

A color legend maps fruit types to both color and size, displaying apples in red and lemons in yellow. Two sets of text labels appear, one above the circles and one below, using d3.scaleOrdinal for color encoding and a custom radius scale for sizing. The example builds SVG circles and text elements with D3 v5, using data joins and merge operations to update the legend.

1123fischer
88% match