Fork of Color and Size Legends

100%

Fork of Color and Size Legends

✓ Published0🌍 Public

Last edited Mar 25, 2021

Created on Mar 25, 2021

Two reusable D3 v5 legend components demonstrate categorical color mapping and quantitative size scaling in SVG. The color legend uses `scaleOrdinal` with domains like apple, lemon, lime, and orange, while the size legend employs `scaleSqrt` to map a 0–10 range to circle radii, with ticks generated via `sizeScale.ticks`. Both render grouped circles and labels, with the size legend filtering out zero values. A video tutorial link accompanies the code, and the styling includes custom font sizes and stroke opacity.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

93% match

Loading thumbnail…

Fork of Color and Size Legends

This example demonstrates two reusable legend components built with D3 v5: a color legend using `scaleOrdinal` for categorical data and a size legend using `scaleSqrt` for quantitative values. The SVG rendering shows each legend as a series of labeled circles, with the size legend filtering out zero values and reversing tick order. The code defines exportable functions `colorLegend` and `sizeLegend` that accept scales and layout props, using D3’s data joins and `selection.merge` for enter-update-exit patterns. Styling comes from CSS classes, with the size legend using a semi-transparent circle fill.

ZZach2826

93% match

Loading thumbnail…

Fork of Color and Size Legends

This example demonstrates two reusable legend components created with D3.js v5: a color legend mapping categorical names to colored circles, and a size legend using a square-root scale to encode numeric values through circle radius. The SVG output renders the legends with custom styling, including font size, spacing, and semi-transparent fill colors. The code defines modular JavaScript functions, `colorLegend` and `sizeLegend`, which are called with configuration objects to dynamically generate the legend groups, circles, and text labels based on the specified scale and tick values.

Llrakla

92% match

Loading thumbnail…

Fork of Color and Size Legends

This fork demonstrates two reusable legend components in D3 v5: a color legend for ordinal scales and a size legend for square-root scales. The color legend maps fruit categories to colored circles, while the size legend translates numeric values into varying circle radii. Both use SVG rendering and employ D3’s selection joins (`selection.selectAll`, `.enter()`, `.merge()`, `.exit()`) to bind data and update groups. Styling is applied via CSS classes for tick text and circle strokes.

GGerman Dimitrov

92% match