Color and Size Legends

100%

Color and Size Legends

✓ Published0🌍 Public

Last edited Jun 29, 2019

Created on Jun 29, 2019

A D3.js visualization demonstrates two separate legends for encoding data. The color legend maps categorical fruit names to distinct colors through an ordinal scale, displaying circles with text labels. The size legend uses a square-root scale to relate numeric values to circle radii, showing five evenly spaced ticks. Both legends are rendered as SVG groups, with circles and text positioned using translate transformations, and the size legend filters out zero values.

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

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

Two customizable legends demonstrate how D3 v5 encodes data through color and size. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend employs `scaleSqrt` to represent numerical values through circle radii. Both legends are constructed through reusable functions that bind data to SVG groups, with legends rendered as circles and text labels. The color legend applies `attr("fill", colorScale)`, while the size legend filters zero values from its ticks and spaces circles vertically.

Jjay

94% match

Loading thumbnail…

Color and Size Legends

Two legends created with D3 v5 are rendered as SVG. The color legend uses a categorical ordinal scale to map fruit categories to colored circles. The size legend uses a square-root scale to map data ticks to circle radii, with a reversed tick order to display larger values first. Both legends are built dynamically using D3's selection and merge APIs within `colorLegend` and `sizeLegend` functions.

MMajaha21

94% match

Loading thumbnail…

Color and Size Legend

Two reusable D3 legends demonstrate how to encode data through color and size. The color legend uses `d3.scaleOrdinal` to map fruit names to categorical colors, while the size legend uses `d3.scaleSqrt` to map numeric values to circle radii. Both legends are implemented as custom D3 functions that append SVG circles and text elements, using `.merge()` for efficient updates and `.exit().remove()` for cleanup. The rendering is entirely SVG-based within a single `<svg>` element, styled with CSS classes.

EEdoardoRegini

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 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

94% match

Loading thumbnail…

Color and size legends

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.

Aarths-glitch

93% match