Color and size legends

100%

Color and size legends

✓ Published0🌍 Public

Last edited May 31, 2022

Created on May 31, 2022

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.

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 legend components: a color legend for ordinal data and a size legend for quantitative data. The color legend displays four fruit categories with distinct colors, while the size legend maps numeric values to circle radii. Both legends use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with reusable functions `colorLegend` and `sizeLegend` that bind data to SVG groups. Circles and text labels are positioned via transforms, with tick values generated by `sizeScale.ticks(numTicks)`. The SVG rendering includes configurable spacing, text offsets, and fill styles.

SSophia Murage

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types for different data encodings: a color legend with categorical swatches for fruits and a size legend with scaled circles for numeric values. Built with D3 v5, it renders SVG elements using reusable functions `colorLegend` and `sizeLegend`. The color legend uses `scaleOrdinal` with discrete colors, while the size legend employs `scaleSqrt` and generates ticks via `sizeScale.ticks()`. Both legends position circles and text labels with explicit spacing and offset values.

CCassie

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

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

93% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two methods for building interactive legends in D3.js v5: a categorical color legend and a quantitative size legend. The color legend uses `scaleOrdinal` to map fruit names to distinct colors, while the size legend uses `scaleSqrt` to map a numeric range to circle radii. Both legends are rendered as SVG groups with circles and text labels, positioned via `translate` transforms. The reusable legend functions (`colorLegend` and `sizeLegend`) accept configuration objects specifying spacing, circle radius, and tick counts, allowing flexible customization within a single SVG canvas.

KKarkG

93% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two methods of creating legends in a D3.js visualization: a categorical color legend showing fruit types with distinct colors, and a quantitative size legend representing numeric values with scaled circles. The SVG-based visualization uses D3 v5's scaling functions, specifically `scaleOrdinal` for the color mapping and `scaleSqrt` for the size mapping, with custom legend constructors `colorLegend` and `sizeLegend` building the tick marks, circles, and labels.

Ppin84

93% match

Loading thumbnail…

Color and size legends

This example demonstrates two types of legend encodings for data visualization: a color legend mapping ordinal categories to hues, and a size legend scaling circles according to a square-root scale. The color legend displays fruit names with distinct colors, while the size legend shows numeric ticks with proportional circle radii. Built with D3 v5, the visualization uses `selectAll` and `.enter().append()` to construct SVG groups, circles, and text elements. Custom `colorLegend` and `sizeLegend` functions control the layout, with positioning handled via `attr('transform', ...)` and scales defined by `scaleOrdinal` and `scaleSqrt`.

VVaggelisKlt

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