Color and Size Legends

100%

Color and Size Legends

✓ Published0🌍 Public

Last edited Jun 13, 2021

Created on Jun 13, 2021

Forked from Bowl of Fruit - General Update Pattern

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

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

96% 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

94% 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

94% 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

94% match

Loading thumbnail…

Color Size and Legends

This example demonstrates two custom legend components rendered with D3 v5 in a React framework. A categorical color legend maps fruit names to distinct colors using `scaleOrdinal`, while a separate size legend uses `scaleSqrt` to visualize numeric values through circle radii. Both legends animate their circles with a 1-second `transition`, and the code highlights reusable legend-building patterns through D3's data join and enter/merge/exit selections.

BB Sundaresan

93% match

Loading thumbnail…

Color and size legends

This example demonstrates two types of legends for data visualization: a color legend using `scaleOrdinal` for categorical data and a size legend using `scaleSqrt` for quantitative data. The color legend displays four fruit categories with distinct colors, while the size legend shows five ticks with circle radii scaled proportionally to values. Built with React and D3 v5, the SVG rendering uses custom `colorLegend` and `sizeLegend` functions that append groups, circles, and text elements to the chart.

NNkwachi Abel

93% 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

93% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG in D3 v5. The color legend uses `d3.scaleOrdinal` to map categorical fruit names to a custom color range, displaying each swatch with a fixed circle radius and text offset. The size legend uses `d3.scaleSqrt` to map numeric values from 0 to 10 to proportional circle radii, with tick marks generated via `sizeScale.ticks()`. Both legends are positioned within a single SVG and styled through shared CSS classes, highlighting how D3’s data joins and merge patterns update legend elements dynamically.

ZZhang Shengli

92% match