Skip to main content
SimilarExport ZIP
100%

Color And Size Legend Ludo

✓ Published0🌍 Public
LLudovicGouverneur
Last edited Dec 5, 2018
Created on Dec 5, 2018
Forked from Color Legend

This example demonstrates two distinct legend designs for mapping data to visual encodings in D3 v5: a qualitative color legend and a combined size and color legend. The qualitative legend assigns categorical colors to fruit names using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to map numeric values to circle radii, with a corresponding `scaleOrdinal` color scale. The code implements reusable legend components (`colorLegend.js` and `sizeLegend.js`) that update via D3's select-merge-append pattern. The size legend animates its circle positions and text labels over 1000 milliseconds using `.transition().duration(1000)`, while both legends render as SVG elements with `<circle>` and `<text>` marks.

AI-generated description

Learn about update pattern - from video

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components for mapping data values to visual encodings: a color legend for ordinal categories and a size legend for quantitative values. The color legend displays colored circles for fruits, while the size legend uses scaled circle radii to represent numeric values. Built with D3 v5, the code defines reusable functions `colorLegend` and `sizeLegend` that use `scaleOrdinal`, `scaleSqrt`, and selection joins to render SVG elements dynamically.

JJason-Manbodh
92% match
Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components for mapping data values to visual encodings: a color legend for ordinal categories and a size legend for quantitative values. The color legend displays colored circles for fruits, while the size legend uses scaled circle radii to represent numeric values. Built with D3 v5, the code defines reusable functions `colorLegend` and `sizeLegend` that use `scaleOrdinal`, `scaleSqrt`, and selection joins to render SVG elements dynamically.

JJason-Manbodh
92% match
Loading thumbnail…

Color and Size Lengends

This example demonstrates how to create separate legends for categorical color encoding and quantitative size encoding. The color legend uses an ordinal scale to map fruit names to distinct colors, while the size legend uses a square-root scale to map numeric values to circle radii. The reusable legend components (colorLegend and sizeLegend) are implemented as D3.js functions that append SVG groups, circles, and text elements, with tick marks generated from the scale's domain and ticks API.

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

COLOR AND SIZE LEGENDS

This example demonstrates two distinct legend styles: a categorical color legend and a quantitative size legend. The color legend uses an ordinal color scale to map fruit names to distinct colors, while the size legend uses a square-root scale to visualize numeric values through circle radii. Both legends are rendered as SVG groups with tick marks, using D3's `selectAll` and `merge` for efficient updates. The code builds legends from reusable functions `colorLegend` and `sizeLegend`, which append circles and text elements to an SVG canvas.

Jjons288
91% match
Loading thumbnail…

COLOR AND SIZE LEGENDS

This example demonstrates two distinct legend styles: a categorical color legend and a quantitative size legend. The color legend uses an ordinal color scale to map fruit names to distinct colors, while the size legend uses a square-root scale to visualize numeric values through circle radii. Both legends are rendered as SVG groups with tick marks, using D3's `selectAll` and `merge` for efficient updates. The code builds legends from reusable functions `colorLegend` and `sizeLegend`, which append circles and text elements to an SVG canvas.

Jjons288
91% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two interactive legends for mapping data to visual channels in D3 v5. A color legend uses `scaleOrdinal` to associate fruit names with distinct hues, while a size legend employs `scaleSqrt` to encode numeric values through circle radii. Both legends animate their tick marks using `transition().duration(3000)` as they enter or update. The code implements custom legend components through D3 selections and data joins, rendering SVG circles and text elements with configurable spacing and offsets.

Cceresfin
91% match
Loading thumbnail…

Color and Size Legends

This example shows two custom legends for visualizing categorical and quantitative data: a color legend mapping fruit names to distinct colors, and a size legend mapping numeric values to circle radii using d3.scaleOrdinal and d3.scaleSqrt. The legends are rendered as SVG groups with circles and text labels, positioned via transform attributes. The code uses d3-selection’s enter/merge/exit pattern to bind data and update elements, with custom functions colorLegend and sizeLegend defining the layout and spacing.

Jjlongwellchc
91% match