Color legend

100%

✓ Published0🌍 Public

Last edited Jun 29, 2020

Created on Jun 29, 2020

This example demonstrates two reusable legend components for D3 visualizations: an ordinal color legend for categorical data and a quantitative size legend for numeric scales. The color legend maps fruit names to distinct colors, while the size legend uses a square-root scale to map values from 0 to 10 to circle radii. Both legends are rendered as SVG using d3.select, append, and merge operations, with the color legend applying a scaleOrdinal and the size legend using scaleSqrt. The code uses D3 v5 APIs including selection.call, data, and attr to construct the tick groups dynamically.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with D3 v5: a color legend for ordinal scales and a size legend for square-root scales. The color legend maps fruit categories to distinct colors, while the size legend visualizes numeric values using scaled circle radii. Both components use D3 selections and data joins to update legends dynamically. The code relies on `scaleOrdinal`, `scaleSqrt`, `scale.ticks`, and custom group elements with SVG circles and text labels, styled via CSS classes.

MMinwoo Pak

95% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two legend styles for D3 visualizations: a color legend mapping ordinal categories to colors, and a size legend mapping a square-root scale to circle radii. The color legend displays four fruit labels next to colored circles, while the size legend shows five tick values with circles whose areas scale with the data. Both legends are built as reusable SVG components using D3's selection API, with `scaleOrdinal` and `scaleSqrt` defining the mappings. The code uses `.call()` to invoke the legend functions and `merge()` to handle updates efficiently.

Aannadehtiarova

94% match

Loading thumbnail…

Color Legend

This example demonstrates a versatile legend system for data visualizations, showing both a color legend for categorical data and a size legend for quantitative data. The color legend maps fruit names to distinct colors, while the size legend represents numeric tick values with proportionally scaled circles. The visualization uses D3 v5's scaleOrdinal and scaleSqrt APIs to generate the respective scales. The code constructs SVG groups for each legend item, positioning circles and text vertically with configurable spacing and offsets, and employs enter/exit animations for dynamic updates.

CChristine Lanser

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays fruit categories (apple, lemon, lime, orange) as colored circles, while the size legend uses a square-root scale to map numeric values to circle radii. Both legends are built with D3 v5, using `scaleOrdinal` and `scaleSqrt`, with custom functions that handle enter/merge/exit selections. The code imports `select` from D3 and renders the legends via the `call` method.

MMichał Szumnarski

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components in D3 v5: a color legend for ordinal scales and a size legend for quantitative scales. The color legend maps fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric ticks as proportional circle radii. Both legends are rendered as SVG groups with circles and text, using `.call()` to apply the component functions. The size legend filters out zero values and reverses tick order to display larger circles first.

Nnkohdatavis

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two common legend types for D3 visualizations: an ordinal color legend for categories and a square-root size legend for quantitative values. The color legend maps fruit names to distinct colors, while the size legend encodes numeric values using proportional circle radii. Both legends are rendered as SVG groups using reusable functions that leverage D3's `scaleOrdinal`, `scaleSqrt`, and `selection.join` pattern for enter/update/exit handling.

Ssakhabutdinov

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable D3.js legend components: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays four fruit categories with distinct colors, while the size legend uses a square-root scale with four reversed ticks. Both legends are implemented as custom D3.js functions that accept an SVG group and configuration props, using d3.scaleOrdinal and d3.scaleSqrt. The SVG rendering includes labeled circles with custom spacing and text offsets, styled via CSS with sans-serif fonts and black stroke outlines.

LLeora Wenger

94% match

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