Skip to main content
SimilarExport ZIP
100%

color and size legends -1

✓ Published0🌍 Public
Jjblaskovich
Last edited May 10, 2020
Created on May 9, 2020

This example demonstrates two distinct legends: one mapping categorical colors to fruits, and another mapping numerical values to circle sizes. The color legend uses `scaleOrdinal` with red, yellow, green, and orange for apples, lemons, limes, and oranges. The size legend uses `scaleSqrt` to scale circle radii from 0 to 50 for ticks between 1 and 10. Both legends render SVG text and circles, with the size legend's circles having a semi-transparent fill and stroke opacity. The code uses D3 v5 API calls like `selection.selectAll`, `attr`, and `.merge`.

AI-generated description
MIT Licensed

Similar vizzes

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

Color and Size Legends

This example demonstrates two distinct legend types rendered side by side in SVG. A color legend uses `d3.scaleOrdinal` to map fruit categories—apple, lemon, lime, and orange—to distinct hues, with each entry displayed as a filled circle and label. A size legend uses `d3.scaleSqrt` to encode a numeric domain from 0 to 10 through varying circle radii, generating tick values via `sizeScale.ticks`. Both legends are constructed with reusable D3 functions that bind data to groups, updating circle and text elements on enter and merge.

WWarren-Fitzhenry
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct types of legends for data visualization: a color legend and a size legend. The color legend maps categorical fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric values with proportional circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned using `attr('transform', ...)`. The code employs D3 v5's selection and merge methods to efficiently update the legends, and the circles are styled with a black stroke for visual clarity.

MMihir Sawant
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate color and size legends for ordinal and quantitative scales. The color legend maps categorical fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` with `ticks` to display five circle radii. Both legends are built with reusable functions that append SVG `<g>` groups, circles, and text elements. The code uses D3 v5 APIs including `selection.call`, `selection.merge`, and `selection.exit` to update legend components dynamically.

YYF
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for a D3.js SVG visualization. The first legend uses a categorical color scale (`scaleOrdinal`) to map fruit names to specific colors, with circles and text labels generated by a custom `colorLegend` function. The second legend uses a square-root size scale (`scaleSqrt`) to map numeric values from 0 to 10 to varying circle radii, with ticks and labels created by a `sizeLegend` function. Both legends are built by appending groups and elements to the SVG, using D3's selection and merge methods to handle updates.

NNitin Vadhiya
93% match
Loading thumbnail…

color and size legends

This example demonstrates two distinct legend types for mapping data to visual channels. A color legend displays a categorical scale with ordinal values (apple, lemon, lime, orange) mapped to distinct hues, while a size legend uses a square-root scale to encode quantitative values from 0 to 10 through circle radius. Both legends are rendered as SVG groups using D3 v5’s `scaleOrdinal`, `scaleSqrt`, and data-join patterns, with ticks generated via `sizeScale.ticks()`. Orange circles and text labels are positioned with translated group elements.

AAndrew Fletcher
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two legends: a color legend for ordinal data and a size legend for quantitative data. The color legend uses `d3.scaleOrdinal` to map fruit names to colors, while the size legend uses `d3.scaleSqrt` with five ticks to map numeric values to circle radii. Both legends are rendered as SVG groups using reusable functions that handle enter, update, and exit selections. The code relies on D3 v5’s `selection.call`, `selection.merge`, and scale methods to create interactive-looking, standalone legend components.

Ggregosaure
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend techniques for encoding data values. The color legend maps ordinal categories like "apple" and "lemon" to distinct colors using `d3.scaleOrdinal`. The size legend uses `d3.scaleSqrt` to translate a continuous numeric range from 0 to 10 into proportional circle radii, with tick labels derived from the scale's `.ticks()` method. Both legends are built as custom SVG components that render groups of circles and text, with the size legend's circles using a semi-transparent fill. The code relies on D3 v5's selection and merge APIs, and the `d3.select` function, to efficiently create and update the SVG elements.

RRubens
93% match