Skip to main content
SimilarExport ZIP
100%

Color Legend Practice

✓ Published0🌍 Public
Ccpsshan
Last edited Jul 16, 2019
Created on Jul 16, 2019

This visualization demonstrates two reusable legend components: a color legend for categorical data and a size legend for quantitative data. The color legend maps fruit names to colored circles, while the size legend uses a square-root scale to represent numeric values through circle radius. Built with d3.js v5, the example shows how SVG groups can be efficiently updated using the `selectAll` and `merge` pattern for incremental rendering. Both legends are created as modular functions that accept a selection and configuration properties, highlighting a flexible approach to legend creation.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color Legend

This example demonstrates a versatile legend system for data visualizations, showing both a color legend for categorical data and a size legend for quantitative data. The color legend maps fruit names to distinct colors, while the size legend represents numeric tick values with proportionally scaled circles. The visualization uses D3 v5's scaleOrdinal and scaleSqrt APIs to generate the respective scales. The code constructs SVG groups for each legend item, positioning circles and text vertically with configurable spacing and offsets, and employs enter/exit animations for dynamic updates.

CChristine Lanser
94% match
Loading thumbnail…

Color legend

This example demonstrates two reusable legend components for D3 visualizations: an ordinal color legend for categorical data and a quantitative size legend for numeric scales. The color legend maps fruit names to distinct colors, while the size legend uses a square-root scale to map values from 0 to 10 to circle radii. Both legends are rendered as SVG using d3.select, append, and merge operations, with the color legend applying a scaleOrdinal and the size legend using scaleSqrt. The code uses D3 v5 APIs including selection.call, data, and attr to construct the tick groups dynamically.

AAnShed
93% 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
92% 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
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 two distinct legend styles: a categorical color legend and a quantitative size legend. The color legend uses an ordinal color scale to map fruit names to distinct colors, while the size legend uses a square-root scale to visualize numeric values through circle radii. Both legends are rendered as SVG groups with tick marks, using D3's `selectAll` and `merge` for efficient updates. The code builds legends from reusable functions `colorLegend` and `sizeLegend`, which append circles and text elements to an SVG canvas.

Jjons288
92% match
Loading thumbnail…

COLOR AND SIZE LEGENDS

This example demonstrates two distinct legend styles: a categorical color legend and a quantitative size legend. The color legend uses an ordinal color scale to map fruit names to distinct colors, while the size legend uses a square-root scale to visualize numeric values through circle radii. Both legends are rendered as SVG groups with tick marks, using D3's `selectAll` and `merge` for efficient updates. The code builds legends from reusable functions `colorLegend` and `sizeLegend`, which append circles and text elements to an SVG canvas.

Jjons288
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays four fruit categories with distinct colored circles, while the size legend shows five circular markers scaled by magnitude using `d3.scaleSqrt`. Both components render as SVG groups with nested circles and text labels, utilizing D3 v5 data joins. The legends are positioned manually within an SVG canvas, with text offset from circle centers for readability.

JJuyeonee
91% match