Skip to main content
SimilarExport ZIP
100%

Legend experimenting

✓ Published0🌍 Public
MMaciek Sitkowski
Last edited Sep 4, 2020
Created on Sep 4, 2020

This example demonstrates how to build reusable color and size legends for D3 visualizations. It shows a color legend using d3.scaleOrdinal with fruit categories mapped to distinct colors, alongside a size legend using d3.scaleSqrt. The legends are rendered as SVG groups, with the color legend drawing rectangles and the size legend drawing circles. The code uses D3 v5’s selection.join pattern, custom legend components exported from separate modules, and explicit spacing and offset parameters to control layout within an SVG canvas.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create reusable color and size legends in D3 v5. It uses two custom functions, `colorLegend` and `sizeLegend`, to render ordinal color scales and square-root size scales as SVG groups. The color legend maps fruit categories to distinct fills, while the size legend displays tick values with proportional circle radii. Both legends use D3’s selection joins and scale APIs (`scaleOrdinal`, `scaleSqrt`) to update efficiently.

Ooptimizeresume
92% match
Loading thumbnail…

d3 Color and Size Legends

This example demonstrates how to build reusable legend components for both color and size scales. Two separate legends are rendered in an SVG: one showing fruit categories as colored circles using a d3 scaleOrdinal, and another displaying a d3 scaleSqrt with five tick values as scaled circles. The colorLegend and sizeLegend functions manage enter/update/exit selections, appending circle and text elements with attributed transforms and offsets. The code relies on d3-selection methods like selectAll, merge, and exit, with styling applied through external CSS classes.

JJohnPaulPagelerJr
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with D3 v5: a color legend for ordinal scales and a size legend for square-root scales. The color legend maps fruit categories to distinct colors, while the size legend visualizes numeric values using scaled circle radii. Both components use D3 selections and data joins to update legends dynamically. The code relies on `scaleOrdinal`, `scaleSqrt`, `scale.ticks`, and custom group elements with SVG circles and text labels, styled via CSS classes.

MMinwoo Pak
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how D3 legends can encode data through color and size. Two separate legends are rendered with SVG: a color legend uses an ordinal scale to map fruit categories to distinct hues, while a size legend uses a square-root scale to represent numeric values with scaled circle radii. The code builds reusable legend components using D3’s data join pattern, applying scales like `scaleOrdinal` and `scaleSqrt`, with manual spacing and text offsets for tick labels.

Ddaigokawabe
92% match
Loading thumbnail…

Color and Size Legends

The example demonstrates two reusable legend components rendered in SVG: a color legend built with `d3.scaleOrdinal` mapping fruit names to categorical colors, and a size legend using `d3.scaleSqrt` for continuous numeric values with circular markers. Both legends are generated through custom functions that bind data to groups, with the color legend encoding categories via circle fill and the size legend varying circle radius. The code relies on D3 v5 selections, `.enter()`, and `.merge()` patterns to update the legends dynamically.

Zzhangfa
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create custom color and size legends for D3 visualizations. The color legend displays four categorical fruits using a d3.scaleOrdinal with distinct color ranges, while the size legend uses d3.scaleSqrt to map numeric values from 0 to 10 to circle radii. Both legends are built using reusable functions with enter/merge/exit patterns, rendering SVG groups with circles and text labels. The code uses D3 v5 selection methods and scales to position legend items with configurable spacing and text offsets.

CClaudio Barone
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create custom color and size legends for D3 visualizations. The color legend displays four categorical fruits using a d3.scaleOrdinal with distinct color ranges, while the size legend uses d3.scaleSqrt to map numeric values from 0 to 10 to circle radii. Both legends are built using reusable functions with enter/merge/exit patterns, rendering SVG groups with circles and text labels. The code uses D3 v5 selection methods and scales to position legend items with configurable spacing and text offsets.

CClaudio Barone
92% match
Loading thumbnail…

Color and Size Legends

The example demonstrates two reusable legend components rendered as SVG: a color legend mapping fruit names to ordinal colors, and a size legend using a square-root scale with circular marks. Both legends are built with D3 v5, using `scaleOrdinal`, `scaleSqrt`, data joins with `selection.enter()`, and merge operations to update tick groups. The color legend draws lines labeled with fruit names, while the size legend displays circles sized by the scale with tick text offset by radius. Styling is applied via CSS classes for tick text and circle strokes.

Sshawnsrk
92% match