Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
PPenguin-jpg
Last edited Sep 18, 2023
Created on Sep 18, 2023

This example demonstrates how to create a dual-legend visualization for categorical data, using both color and size to encode fruit type. It shows apples and lemons as scaled circles arranged in a bowl-shaped container rendered in an SVG. The implementation uses d3.v5’s `select` and `scaleOrdinal` APIs, with `colorLegend` defining the legend’s layout and `radiusScale` implicitly controlling circle sizes. The data is a hardcoded array of fruit types, and the rendering relies on SVG shapes with styled strokes and fills.

AI-generated description
MIT Licensed

Similar vizzes

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
93% 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
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates a reusable legend component for mapping ordinal color scales to categorical data. The visualization renders four fruit categories—apple, lemon, lime, and orange—as colored circles, with each circle’s fill derived from a `scaleOrdinal` and its position spaced vertically via a custom `colorLegend` function. The code uses D3 v5’s `select`, `scaleOrdinal`, and data join pattern to create SVG `<g>` groups containing circles and text labels. The legend is styled with CSS classes for tick elements, and the SVG container includes a border for visual framing.

AApoorv Agnihotri
92% match
Loading thumbnail…

Color and Size Legend

This example demonstrates two legend types for visualizing data: a color legend and a size legend created side by side in an SVG. The color legend maps categorical fruit names (apple, lemon, lime, orange) to distinct colors using a d3.scaleOrdinal, while the size legend uses a range of numeric values to create circles of varying radii. Both legends are rendered through d3 data joins, where each group contains a circle and a text label positioned with transform attributes and spacing constants. The visualization uses d3.v5 and employs the colorLegend and sizeLegend custom functions to generate the reusable legend components.

Ssploitfun
91% match
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
91% match
Loading thumbnail…

Color and size legends

A standalone SVG legend demonstrates how to encode categorical and quantitative data through color and size. The color legend maps fruit names (apple, lemon, lime, orange) to distinct hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to map a numeric domain from 0 to 10 to circle radii. Both legends are rendered as reusable components via the `colorLegend` and `sizeLegend` functions, positioned with appended SVG groups and `d3.select`. The example relies on D3 v5 and custom tick formatting.

SSagar Malviya
91% match
Loading thumbnail…

Color and size legends

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.

1123fischer
91% match
Loading thumbnail…

Color and Size Legends

This example demonstrates reusable legend components for both categorical color scales and quantitative size scales. It renders four fruit categories (apple, lemon, lime, orange) using a d3.scaleOrdinal with distinct colors, alongside a d3.scaleSqrt size legend with five ticks. Both legends are built with SVG groups, circles, and text elements, using d3 selections and the .call() method to invoke the custom colorLegend and sizeLegend functions. The size legend filters out zero values and reverses tick order for visual clarity.

MMukund Khandelwal
91% match