Skip to main content
SimilarExport ZIP
100%

Color and size legends

✓ Published0🌍 Public
Aarths-glitch
Last edited May 28, 2020
Created on May 28, 2020

This example demonstrates two legends for mapping data to visual encodings. A color legend uses a d3.scaleOrdinal scale to map categorical fruit names to distinct colors, while a size legend uses a d3.scaleSqrt scale to map a numeric range to circle radii. The legends are custom reusable components, created with d3.selection and appended to an SVG canvas, with each tick rendered as a group containing a circle and a text label.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and size legends

This example demonstrates the use of two separate legends to map data values to visual encodings. A color legend shows categorical fruit names with a d3.scaleOrdinal scale, while a size legend represents numbers from 0 to 10 with a d3.scaleSqrt scale that maps values to circle radii. The legends are rendered as SVG groups using custom reusable functions, with circles and text labels arranged vertically. The underlying data scales and spacing are defined in the JavaScript code, with fruit categories and numeric ranges specified directly.

Ggorfoula
96% match
Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components for mapping data values to visual encodings: a color legend for ordinal categories and a size legend for quantitative values. The color legend displays colored circles for fruits, while the size legend uses scaled circle radii to represent numeric values. Built with D3 v5, the code defines reusable functions `colorLegend` and `sizeLegend` that use `scaleOrdinal`, `scaleSqrt`, and selection joins to render SVG elements dynamically.

JJason-Manbodh
95% match
Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components for mapping data values to visual encodings: a color legend for ordinal categories and a size legend for quantitative values. The color legend displays colored circles for fruits, while the size legend uses scaled circle radii to represent numeric values. Built with D3 v5, the code defines reusable functions `colorLegend` and `sizeLegend` that use `scaleOrdinal`, `scaleSqrt`, and selection joins to render SVG elements dynamically.

JJason-Manbodh
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend patterns for encoding data. A color legend uses a d3.scaleOrdinal to map categorical fruit names to colored circles, while a size legend employs d3.scaleSqrt to represent numeric values through circle radius, with tick marks generated via sizeScale.ticks. Both legends are built with D3 v5 data joins, appending SVG groups, circles, and text elements with configurable spacing and offsets, rendering in a standalone SVG canvas.

Jjay
94% match
Loading thumbnail…

Color and Size Legends

This example shows two custom legends for visualizing categorical and quantitative data: a color legend mapping fruit names to distinct colors, and a size legend mapping numeric values to circle radii using d3.scaleOrdinal and d3.scaleSqrt. The legends are rendered as SVG groups with circles and text labels, positioned via transform attributes. The code uses d3-selection’s enter/merge/exit pattern to bind data and update elements, with custom functions colorLegend and sizeLegend defining the layout and spacing.

Jjlongwellchc
94% match
Loading thumbnail…

Color Legend

This example demonstrates two types of legends for mapping data to visual encodings: a color legend for categorical values and a size legend for quantitative values. The color legend displays circles colored via a d3.scaleOrdinal mapping fruit names to colors, while the size legend uses d3.scaleSqrt to represent numeric ticks as varying circle radii. Both legends are rendered as SVG groups with d3-selection, using join patterns to update circle and text elements. The code is built with React and D3 v6, with the legends generated procedurally from scales rather than external data.

Nnsadath
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two legend styles for D3 visualizations: a color legend mapping ordinal categories to colors, and a size legend mapping a square-root scale to circle radii. The color legend displays four fruit labels next to colored circles, while the size legend shows five tick values with circles whose areas scale with the data. Both legends are built as reusable SVG components using D3's selection API, with `scaleOrdinal` and `scaleSqrt` defining the mappings. The code uses `.call()` to invoke the legend functions and `merge()` to handle updates efficiently.

Aannadehtiarova
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate color and size legends for a visualization. The color legend uses a categorical ordinal scale to map fruit names to distinct colors, while the size legend uses a square-root scale to map a numeric domain to circle radii. Both legends are implemented as reusable functions that append groups of circles and text labels to an SVG canvas using D3 v5 methods like `scaleOrdinal`, `scaleSqrt`, and `selection.enter().append`. Data is encoded purely through visual channels, with no underlying dataset.

Ssiddharth171
94% match