Skip to main content
SimilarExport ZIP
100%

Fork of Color and Size Legends

✓ Published0🌍 Public
Nnikki81140
Last edited Oct 3, 2022
Created on Oct 3, 2022

This example demonstrates two custom legend components rendered side-by-side in a single SVG: a categorical color legend and a quantitative size legend. The color legend uses `scaleOrdinal` to map fruit names to colors, while the size legend uses `scaleSqrt` and its `ticks` method to generate five radius values. Both legends are built through reusable `colorLegend` and `sizeLegend` functions that append `g` elements with circles and text, with styling applied via the CSS class `tick`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Color and Size Legends

This example shows custom legends for both ordinal color scales and quantitative size scales, rendered as SVG groups. The color legend maps fruit names to distinct hues, while the size legend uses a square-root scale to map numeric values to circle radii, with ticks generated by `scaleSqrt.ticks()`. Both legends are built by entering and merging `g.tick` elements, positioning circles and text with `attr('transform')` and `attr('x')`. The code uses d3 v5 APIs including `scaleOrdinal`, `scaleSqrt`, and selection methods like `merge` and `exit().remove()`.

BBlakeMcMurray
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. 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
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

This example demonstrates two reusable legend components rendered side by side in SVG: a color legend using an ordinal scale for fruit categories and a size legend using a square-root scale for numeric values. The color legend maps categorical data to colored circles, while the size legend scales circle radii proportionally and filters out zero values. Both legends use D3 v7 selection joins with enter/merge/exit patterns, and the size legend leverages `sizeScale.ticks()` to generate tick values for display.

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

Fork of Color and Size Legends

This example demonstrates two reusable legend components rendered side-by-side: a color legend for ordinal data (apple, lemon, lime, orange, kivi) and a size legend for a square-root scale ranging from 0 to 10. The color legend displays colored circles with labels, while the size legend uses semi-transparent black circles of varying radii. Both are built with D3 v5’s `scaleOrdinal`, `scaleSqrt`, and `selection.call()`, generating SVG groups with circle and text elements styled via CSS classes.

RRolftest
93% match