Skip to main content
SimilarExport ZIP
100%

Colour and size legends

✓ Published0🌍 Public
Kkaviya-ds
Last edited Aug 19, 2020
Created on Aug 19, 2020
Forked from Bowl of fruit-3

This example demonstrates two types of legends for scatterplots: a color legend using `d3.scaleOrdinal` and a size legend with `d3.scaleSqrt`, both rendered as SVG groups with `circle` and `text` elements. The color legend maps fruit names to distinct colors, while the size legend uses `scaleSqrt` with `ticks()` and `reverse()` to display descending circle radii. The reusable `colorLegend` and `sizeLegend` functions handle enter, update, and exit selections via `selection.merge()`, with spacing and text offsets configured through props. Styling for tick labels and circles comes from CSS classes defined in `styles.css`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components for scatterplot-style visualizations: a color legend for ordinal categories and a size legend for quantitative values. The color legend maps fruit names to distinct hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to encode numeric ticks as proportional circle radii. Both legends are rendered as SVG groups via data joins, with circles and text labels. The code uses `d3-selection` methods like `selectAll`, `enter`, and `merge` to manage updates, and `d3.ticks` to generate tick values.

NNaveenaS12
94% match
Loading thumbnail…

Colour and Size Legends

This example demonstrates two types of legend components rendered as SVG in D3 v5: a colour legend using `scaleOrdinal` with discrete fruit categories, and a size legend built on `scaleSqrt` for continuous numeric values. The colour legend maps domain values to colored circles with labels, while the size legend displays tick marks with circle radii proportional to data values. Both legends reuse enter/merge/exit selections for dynamic updates, with tick text and circles styled via CSS. The code defines reusable `colourLegend` and `sizeLegend` functions, called with custom spacing, offsets, and tick counts.

FFhouston17
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…

colour and size legends

This example demonstrates two separate SVG legends: a color legend using an ordinal scale mapping fruit names to distinct colors, and a size legend using a square-root scale with circular marks whose radii encode numeric values. The color legend renders colored circles for each category, while the size legend displays five ticks with proportional circle sizes and labels offset by the scaled radius. Both legends use reusable functions (`colorLegend` and `sizeLegend`) built with D3 v5, leveraging `selectAll`, `enter`, `merge`, and `exit` for data joins, with SVG elements styled via CSS.

KKurt J Nilsen
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for scatterplot-like data. A color legend uses an ordinal scale to map fruit names to distinct colors, displayed with evenly spaced circles and labels. A size legend uses a square-root scale to map numeric values to circle radii, showing larger circles at the top with tick marks. Both legends are built with D3 v6 selections, using `.enter().append()`, `.merge()`, and `.exit()` to manage groups, with SVG circles and text rendered in an HTML page.

EEllednera
93% match
Loading thumbnail…

Color and Size Legends !

This example demonstrates customizable color and size legends for scatterplot-style data visualization. The color legend maps fruit names to distinct hues using d3.scaleOrdinal, while the size legend uses d3.scaleSqrt to translate numeric values into circle radii. Both legends are rendered as SVG groups, with reusable functions colorLegend and sizeLegend managing tick placement, circle attributes, and text labels. The implementation leverages D3 v5 data joins to update the legend elements dynamically.

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

Color and Size legend

This example demonstrates two reusable legend components for scatterplots: a color legend using an ordinal scale and a size legend using a square-root scale. The color legend maps fruit names to red, yellow, green, and orange circles, while the size legend displays five circular ticks sized proportionally to values from 0 to 10. Both are built with D3 v5, using `d3.scaleOrdinal`, `d3.scaleSqrt`, and the enter-merge-exit pattern to bind SVG groups, circles, and text elements.

Ppplomith
92% match