Skip to main content
SimilarExport ZIP
100%

Fork of Color and Size Legends - Component Experiment

✓ Published0🌍 Public
AAnthony Zornig
Last edited Oct 17, 2021
Created on Oct 17, 2021

This example shows two legends rendered side-by-side in an SVG: one for ordinal color scales and one for square-root size scales. The color legend maps fruit categories to distinct fills, while the size legend displays circular marks scaled by numeric tick values. Both legends are built as reusable component functions that receive parameters via `Object.assign` properties, following the “Towards Reusable Charts” pattern. The code uses d3.v5 APIs including `scaleOrdinal`, `scaleSqrt`, and selection methods like `.call()`, `.enter()`, and `.merge()` to bind data and update the visualization.

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…

Fork of Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend displays circles for apple, lemon, lime, and orange, while the size legend uses a square-root scale with five ticks. Both use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with `selection.merge` to update entries efficiently. The components are defined as JavaScript modules and called via `.call()`, with styling applied through CSS classes.

Vvivianaaai@qq.com
95% match
Loading thumbnail…

Fork of Color and Size Legends

This example demonstrates reusable legend components for both ordinal color scales and quantitative size scales. The color legend renders colored circles with labels for fruit categories, while the size legend displays circles scaled by magnitude using a square-root scale. Both legends are implemented as custom D3 functions that bind data to SVG groups, using `selection.enter()` and `selection.merge()` for updates. The code utilizes `d3.scaleOrdinal`, `d3.scaleSqrt`, and `scale.ticks()` to generate tick values for the size legend.

MMajaha21
95% match
Loading thumbnail…

Fork of Color and Size Legends2

This example demonstrates two reusable legend components for D3 v5: a color legend using an ordinal scale mapping fruit names to colors, and a size legend using a square-root scale with five ticks. Both render as SVG groups with circles and text labels, positioned via transforms. The colorLegend component encodes categorical data with colored circles, while the sizeLegend uses scaled circle radii and offsets text based on each value’s radius. The code imports `scaleOrdinal` and `scaleSqrt` from D3, and uses selection joins to update or remove legend items dynamically.

Jjlspangl
94% match
Loading thumbnail…

Fork of Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG: a color legend mapping fruit categories to distinct hues, and a size legend visualizing a square-root scale from zero to ten with five labeled ticks. The color legend uses `scaleOrdinal`, while the size legend relies on `scaleSqrt` and `ticks()` to generate values. Both components are built with D3 v5’s `selection.enter` and `merge` pattern, applying circle radii, fill colors, and text offsets through `attr` and `text` operations. A video tutorial accompanies the code, showing interactive creation in the browser.

BBlakeMcMurray
94% 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
94% match
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
94% match
Loading thumbnail…

Fork of Color and Size Legends

This example demonstrates reusable legend components for both ordinal color scales and quantitative size scales, rendered as SVG. The color legend uses `d3.scaleOrdinal` to map fruit categories to colors, while the size legend uses `d3.scaleSqrt` to map numeric tick values to circle radii. Both legends are drawn using custom selection-based functions that append SVG groups, circles, and text elements with d3’s selection API. The code runs in d3 v5 and renders within a single SVG element.

Ssrinathsethumadhavan
94% match
Loading thumbnail…

Fork of Color and Size Legends - Component Experiment

This fork of the D3.js legend component experiment passes parameters into chart functions by assigning properties directly onto the functions themselves, following the reusable charts pattern. It renders an SVG with two legends: a color legend using `d3.scaleOrdinal` for fruit categories and a size legend built with `d3.scaleSqrt` for numeric ticks. The code uses `selection.call()` to invoke each component, with styles defined in CSS for tick text and circle strokes.

AAnthony Zornig
94% match