Skip to main content
SimilarExport ZIP
100%

Color and size legends

✓ Published0🌍 Public
1123fischer
Last edited Dec 2, 2020
Created on Dec 2, 2020

A color legend maps fruit types to both color and size, displaying apples in red and lemons in yellow. Two sets of text labels appear, one above the circles and one below, using d3.scaleOrdinal for color encoding and a custom radius scale for sizing. The example builds SVG circles and text elements with D3 v5, using data joins and merge operations to update the legend.

AI-generated description

body{ margin: 0px; overflow: hidden; }

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and size legends

A legend displays a color scale for four fruit categories—apple, lemon, lime, and orange—as colored circles with matching text labels. Built with D3 v5, the example uses `scaleOrdinal` to map domain values to specific colors and a custom `colorLegend` function that binds data to SVG groups via `selection.selectAll` and `enter()`. The legend is rendered with circle radius, spacing, and text offset as configurable props, demonstrating reusable legend components in SVG.

Xxiaoma1002
94% match
Loading thumbnail…

Color and size legends

A vertical color legend displays four fruit categories—apple, lemon, lime, and orange—as colored circles, with each fruit’s name placed to the right. The legend is generated using D3 v5’s `scaleOrdinal` for color mapping and a custom `colorLegend` function that binds data to SVG groups, appending circles and text elements with computed spacing and offsets. All shapes are rendered as SVG elements within a 960×500 viewport, with styling defined in an external CSS file.

CClara Hu
94% match
Loading thumbnail…

Colour and Size Legends

Animated fruit icons show how ordinal color and size scales encode categorical data. In this D3 v5 example, apples and lemons appear as red and yellow circles whose radius reflects a separate size scale. The `colorLegend` function uses the data join pattern, animating new circles from radius zero through `transition().duration(1000)`, while exits are removed. SVG rendering and the `scaleOrdinal` API handle the legend mappings.

WWarren-Fitzhenry
92% match
Loading thumbnail…

Color and size legend horizontal

A horizontal legend displays ordinal color and size encoding for two fruit categories, apple and lemon, using distinct red and yellow circles. Built with D3 v6, the visualization applies `scaleOrdinal` to map domain values to colors and a custom `colorLegend` function to position each legend item along the x-axis. SVG groups contain circles and text labels, with spacing and offsets controlled by passed properties, while the legend updates cleanly through enter/merge/exit selections.

JJoachim Klug
92% match
Loading thumbnail…

Color and Size Legends

Two fruits, an apple and a lemon, are drawn inside a rounded rectangle bowl using D3 v7 and SVG. The example maps fruit type to both a categorical color scale and a categorical radius scale, using `scaleOrdinal` with explicit domains and ranges. Circle elements receive fill and radius attributes from these scales, while text labels appear below each fruit. The positions are computed from the array index, and the bowl itself is a styled rectangle behind the fruit groups.

Ggabrielribeirob
92% match
Loading thumbnail…

Color and Size legends

This example demonstrates how a legend can encode both color and size for categorical data, using a row of fruits and a separate legend of circles to map each fruit type to a specific hue and radius. Built with D3 v5 and rendered as SVG, the `colorLegend` function defines reusable, data-bound groups and circles, while `index.js` applies an ordinal color scale mapping 'apples' and 'lemon' to red and a muted yellow-green. The visualization updates dynamically as data changes, with the legend and circles responding to the same color and radius scales for consistent encoding.

SShane Carey
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how color and size can encode categorical differences in data, using a simple fruit bowl visualization. It shows apples and lemons as circles, where color distinguishes fruit type and radius encodes size, with legends implied through the shapes themselves. The code uses d3.scaleOrdinal for both color and radius mappings, and builds the SVG scene with d3-selection methods. The visualization is rendered using D3 v5, with fruit data drawn as circles and text labels inside a rounded rect bowl.

Hhugomell
92% match
Loading thumbnail…

Color and Size Legends

Two fruits, apples and lemons, appear as colored circles inside a rounded bowl, with size and color encoding fruit type. D3’s `scaleOrdinal` maps apples to red and a 50-pixel radius, lemons to yellow and 30 pixels. New fruit groups animate in, growing from radius zero via a one-second `transition`, while exiting groups are removed. The static SVG renders the 600-by-300 bowl as a rounded rectangle, with labels positioned below each circle.

Ddanielchamone
91% match