Skip to main content
SimilarExport ZIP
100%

Color and size legend

✓ Published0🌍 Public
Bbambaleq
Last edited Feb 24, 2020
Created on Feb 24, 2020

This example demonstrates two reusable legend components: a color legend mapping ordinal categories to distinct hues, and a size legend using a square-root scale to encode numeric values through circle radii. The color legend displays fruits with colored circles, while the size legend renders circular markers with labels positioned beyond each circle. Both legends use D3 v5 scales and SVG rendering, with React-styled selection/merge patterns for dynamic updates. The size legend uses `sizeScale.ticks()` to generate evenly spaced values for its circles.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend using an ordinal scale mapping fruit categories to distinct colors, and a size legend using a square-root scale to encode numeric values through circle area. The color legend displays evenly spaced colored circles with labels, while the size legend computes ticks via `sizeScale.ticks()`, filters out zero, and reverses their order. Both components are built with D3 v5, using `selection.merge()`, `enter()`, and `exit()` patterns to handle dynamic updates, and accept configuration props such as spacing, text offset, and circle styling.

JJames Malvern
94% match
Loading thumbnail…

Color and Size Legend

Two custom legend components demonstrate how to encode data through color and size. The color legend uses a D3 ordinal scale with four fruit categories, while the size legend uses a square-root scale with five tick values. Both legends are rendered as SVG groups using reusable functions that handle enter/update/exit selections. The code uses `d3.scaleOrdinal`, `d3.scaleSqrt`, and selection methods like `merge` and `attr` to position circles and text labels with consistent spacing.

Jjeelong
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types for data visualization: a color legend mapping categorical fruit names to distinct hues, and a size legend using a square-root scale for numeric values. Animated circles fade in with a two-second transition for the color legend, while the size legend renders static, semi-transparent circles. Both legends use D3 v5 selection methods, including enter/merge/exit patterns, and are built with React. The visualizations are rendered in SVG, with text labels positioned alongside each legend item.

Mmla341
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with D3 v5: a color legend for ordinal scales and a size legend for square-root scales. The color legend maps fruit categories to distinct colors, while the size legend visualizes numeric values using scaled circle radii. Both components use D3 selections and data joins to update legends dynamically. The code relies on `scaleOrdinal`, `scaleSqrt`, `scale.ticks`, and custom group elements with SVG circles and text labels, styled via CSS classes.

MMinwoo Pak
94% match
Loading thumbnail…

Color and Size Legend

Two reusable D3 legend components render side by side in an SVG: a color legend for a categorical scale (scaleOrdinal with apple, lemon, orange, kiwi) and a size legend for a square-root scale (scaleSqrt for 0–10). Each legend positions circles and text with data-driven transforms, and the size legend filters out zero ticks and uses D3’s `ticks()` to generate intervals. The React-wrapped code updates selections via enter/merge/exit patterns, with styling from external CSS.

Ddacoylo
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two legend styles for D3 visualizations: a color legend mapping ordinal categories to colors, and a size legend mapping a square-root scale to circle radii. The color legend displays four fruit labels next to colored circles, while the size legend shows five tick values with circles whose areas scale with the data. Both legends are built as reusable SVG components using D3's selection API, with `scaleOrdinal` and `scaleSqrt` defining the mappings. The code uses `.call()` to invoke the legend functions and `merge()` to handle updates efficiently.

Aannadehtiarova
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components for D3 visualizations: a color legend matching ordinal categories to specific colors, and a size legend using a square-root scale to map numeric values to circle radii. The color legend renders labeled circles for fruits like apple and lemon, while the size legend displays five tick marks with proportional circle sizes. Both legends are built using D3 v7’s selection-merging API, appending SVG `<g>` groups to position circles and text labels with translated transforms.

Yyejichun@naver.com
93% match
Loading thumbnail…

Colour and Size Legends

This example demonstrates two kinds of legends side by side: a color legend mapping ordinal categories to distinct hues, and a size legend using a square-root scale to encode quantitative values. Both legends animate their circle radii over one second using D3’s `transition`. The code uses `d3.scaleOrdinal`, `d3.scaleSqrt`, `selection.call`, and React is loaded for the framework, while all rendering is done via SVG. The size legend uses `sizeScale.ticks` to generate labeled values, excluding zero.

JJoseph Popoola
93% match