Skip to main content
SimilarExport ZIP
100%

Color and size legends

✓ Published0🌍 Public
PPeter S
Last edited Sep 18, 2019
Created on Aug 24, 2019

Two reusable D3 v5 legends illustrate color and size encoding side by side in a React-based VizHub example. The color legend maps an ordinal scale with fruit categories to red, yellow, green, and orange circles, while the size legend uses a square-root scale to map numeric ticks to proportional circle radii. Both legends are built with SVG selections, enter/merge/exit patterns, and custom parameters like spacing and text offsets. The page also demonstrates asynchronous data loading with a Promise, filtering car listings to generate a formatted report.

AI-generated description

An example showing the capabilities of VizHub - color legend

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and size legend

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.

Bbambaleq
91% 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
91% 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
91% 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
90% 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
90% 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
90% match
Loading thumbnail…

Colour and size legends

This example demonstrates two custom SVG legends built with D3 v5 and React, rendered on a single 960x500 pixel canvas. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend employs `scaleSqrt` to encode numeric tick values as proportional circle radii. Both legends are generated through reusable functions that manipulate SVG groups, circles, and text elements, with spacing controlled via `transform` translations and dynamic text offsets. The visualization illustrates how to compose and position independent legend components side by side within a single SVG container.

Eevapavlinek
90% 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
90% match