Color and Size Legends

100%

Color and Size Legends - Component Experiment

✓ Published5🌍 Public

Last edited Jun 9, 2019

Created on Sep 29, 2018

A color legend and a size legend appear side by side in an SVG, each listing categorical or quantitative values with corresponding visual encodings. The color legend uses d3.scaleOrdinal to map fruit names to colors, while the size legend uses d3.scaleSqrt to map numeric values to circle radii. Both legends are implemented as reusable component functions that take their configuration via Object.assign, following the Towards Reusable Charts pattern. The code uses D3 v5 selection methods like .call, .merge, and .attr to update the DOM.

AI-generated description

An experiment in passing parameters into "components" by setting properties on the component functions. This is closer to the Towards Reusable Charts pattern, in that you can set state once and invoke the component elsewhere. With this approach you can't tap into the getters and setters though.

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends - Component Experiment

This example demonstrates two reusable legend components that visualize ordinal color scales and quantitative size scales using SVG rendering. The color legend displays fruit categories as colored circles, while the size legend uses d3.scaleSqrt to encode numeric values through varying circle radii. Both components are implemented as functions that receive configuration through property assignment, following the reusable chart pattern. The code uses d3.scaleOrdinal, d3.scaleSqrt, selection.merge, and selection.call to update and render the legends dynamically.

NNilla

96% match

Loading thumbnail…

Color and Size Legends - Component Experiment

This example demonstrates two custom legend components—one for a categorical color scale and one for a quantitative size scale—rendered as SVG within a D3 v5 visualization. The color legend uses `scaleOrdinal` to map fruit names to colors, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends are implemented as reusable functions that receive their parameters via `Object.assign`, following the "Towards Reusable Charts" pattern. The code explicitly sets properties on the component functions before invoking them with `.call()`, and each legend updates its groups, circles, and text elements through D3's select, enter, merge, and exit operations.

Ccodexmon

95% match

Loading thumbnail…

Color and Size Legends - Component Experiment

This example demonstrates two reusable legend components rendered with SVG: an ordinal color legend for categorical fruit data and a square-root size legend for a numeric 0–10 scale. Using d3.scaleOrdinal and d3.scaleSqrt, it assigns colors and circle radii, while the legends derive their tick marks from the scale’s domain and d3’s `ticks` method. The code follows the “Towards Reusable Charts” pattern by assigning configuration properties directly onto each component function before invoking it with `selection.call`. The resulting graphic shows both legends side-by-side with distinct spacing, text offsets, and transparent circle fills.

Vvaynexie

93% match

Loading thumbnail…

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

93% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend using an ordinal scale mapping fruit categories to distinct colors, and a size legend using a square-root scale to encode numeric values through circle area. The color legend displays evenly spaced colored circles with labels, while the size legend computes ticks via `sizeScale.ticks()`, filters out zero, and reverses their order. Both components are built with D3 v5, using `selection.merge()`, `enter()`, and `exit()` patterns to handle dynamic updates, and accept configuration props such as spacing, text offset, and circle styling.

JJames Malvern

93% match

Loading thumbnail…

Color and Size Legends

The example demonstrates two reusable legend components rendered in SVG: a color legend built with `d3.scaleOrdinal` mapping fruit names to categorical colors, and a size legend using `d3.scaleSqrt` for continuous numeric values with circular markers. Both legends are generated through custom functions that bind data to groups, with the color legend encoding categories via circle fill and the size legend varying circle radius. The code relies on D3 v5 selections, `.enter()`, and `.merge()` patterns to update the legends dynamically.

Zzhangfa

93% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG in D3 v5. The color legend uses `d3.scaleOrdinal` to map categorical fruit names to a custom color range, displaying each swatch with a fixed circle radius and text offset. The size legend uses `d3.scaleSqrt` to map numeric values from 0 to 10 to proportional circle radii, with tick marks generated via `sizeScale.ticks()`. Both legends are positioned within a single SVG and styled through shared CSS classes, highlighting how D3’s data joins and merge patterns update legend elements dynamically.

ZZhang Shengli

93% match

Loading thumbnail…

Color and Size Legends

Two reusable legend components demonstrate color and size encoding in D3 v5. The color legend uses `scaleOrdinal` to map fruit categories to distinct colors with fixed-radius circles, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends render as SVG groups with tick marks, using D3’s data join pattern and `.call()` to apply each component. The size legend filters out zero values and reverses tick order, with text offset dynamically calculated from each circle’s radius.

KKaavya Lakshmanan

93% match