Skip to main content
SimilarExport ZIP
100%

Colour and Size Legends

✓ Published0🌍 Public
JJoseph Popoola
Last edited Feb 13, 2020
Created on Feb 11, 2020

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.

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

Colour and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend displaying an ordinal scale with fruit names and assigned colors, and a size legend using a square-root scale to map numeric values to circle radii. The code uses D3 v5 APIs including `scaleOrdinal`, `scaleSqrt`, and `selection.call` to bind the legend functions. Each legend updates through data joins, with circles and text elements positioned using transform attributes and spacing constants.

Jjrodg
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to build custom legends for both ordinal color scales and quantitative size scales using D3 v5 within a React application. The color legend maps fruit categories (apple, lemon, lime, orange) to corresponding colors, while the size legend uses `scaleSqrt` to represent numeric values from 0 to 10 with proportional circle radii. Both legends employ the general update pattern with data joins on SVG groups, using `selection.enter()`, `merge()`, and `exit()` to handle dynamic updates. The code also showcases `sizeScale.ticks()` to generate clean tick values for the size legend.

SSybil Jas
92% 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
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 two distinct legend types: a color legend with ordinal categories for fruits and a size legend with a square-root scale mapping numeric values to circle radii. Using D3 v5, it renders SVG circles and text labels, with the color legend employing `scaleOrdinal` and the size legend using `scaleSqrt` with tick generation. The size legend positions circles based on cumulative radius sums with spacing, while both legends use reusable functions (`colorLegend` and `sizeLegend`) called via D3’s selection `.call()` pattern.

GGuillaume Calmettes
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate color and size legends using D3 v5. A color legend maps ordinal categories to distinct colors, while a size legend uses a square root scale to represent numeric values with varying circle radii. The code defines reusable `colorLegend` and `sizeLegend` functions that handle tick creation, circle rendering, and text labels, then calls them with `selection.call()`. Both legends render as SVG groups with styled text and outlined circles, using `scaleOrdinal` and `scaleSqrt` from the d3 module.

Ccodexmon
92% 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
91% match