Skip to main content
SimilarExport ZIP
100%

Fork of Color and Size Legends

✓ Published0🌍 Public
Jjay-goone
Last edited Jan 14, 2022
Created on Jan 14, 2022

Two reusable legend components render side by side in a single SVG canvas. The color legend uses d3.scaleOrdinal to map fruit names to discrete colors, drawing color-coded circles with labels, while the size legend uses d3.scaleSqrt to encode numeric values as circle radii. Both legends are built from SVG groups, with circles and text offset by a spacing variable, and update via enter/merge/exit selections in d3 v5.

AI-generated description
MIT Licensed

Similar vizzes

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 fork demonstrates reusable D3 legend components for both ordinal color scales and sequential size scales. Two separate legend modules render circles and labels in SVG, with colorScale mapping fruit names to colors and sizeScale using d3.scaleSqrt for proportional areas. The color legend displays four categorical items, while the size legend applies d3.ticks to generate five numeric breaks. Both components use enter/merge/exit selections to update groups dynamically.

Mmartajimpac
94% match
Loading thumbnail…

Fork of Color and Size Legends

Two reusable custom legends are rendered in an SVG. A color legend maps the ordinal fruit categories to distinct colors, while a size legend uses a square-root scale to encode the numeric values 2, 4, 6, 8, and 10 with varying circle radii. Both legends are built using D3 v5’s selection API with `selectAll`, `enter`, `merge`, and `exit`, and rely on `scaleOrdinal` and `scaleSqrt`. The size legend’s circles use a semi-transparent black fill and black outlines.

TTrashBoatDora
94% 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
94% 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
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
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 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