Skip to main content
SimilarExport ZIP
100%

Fork of Fork of Color and Size Legends

✓ Published0🌍 Public
BBlakeMcMurray
Last edited Feb 1, 2021
Created on Feb 1, 2021

Two adjustable legends, one for color and one for size, are rendered in a single SVG. The color legend maps a categorical scale to a column of labeled circles, while the size legend uses a square-root scale to show proportionally sized bubbles with tick values. The reusable `colorLegend` and `sizeLegend` functions drive the SVG generation, leveraging d3's scale functions and selection merging to update the display.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Color and Size Legends

This fork of the color and size legends example displays separate reusable legend components, each implemented as a D3.js module. The color legend maps a categorical ordinal scale to colored circles, while the size legend (present but commented out) maps a quantitative square-root scale to varying circle radii. Both use D3 v5’s selection API and `scaleOrdinal`/`scaleSqrt` with an SVG `g`-based tick layout, with text labels offset from the shapes.

AAndy Chang
92% 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

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

Fork of Color and Size Legends

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.

Jjay-goone
92% 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
92% 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
91% 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
91% match