Color and size legend horizontal

100%

Color and size legend horizontal

✓ Published1🌍 Public

Last edited Sep 28, 2020

Created on Sep 28, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

92% match

Loading thumbnail…

Color and size legend

This example demonstrates a custom color legend for ordinal data, showing categories as colored circles with matching labels. The legend displays two fruit categories, apple and lemon, each assigned a distinct color via `d3.scaleOrdinal`. The visualization uses D3 v5 with an SVG rendering approach, where the `colorLegend` function appends circle and text elements to the SVG canvas. Labels are positioned below the circles, and all elements are centered vertically using the SVG height attribute. The code also includes transition handling for updating the legend dynamically.

ZZhengyan Yu

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

90% match

Loading thumbnail…

Color and size legends

This example demonstrates a color legend with two categorical entries, “apple” and “lemon,” each represented by a colored circle and a text label. Using D3.js v5, the `scaleOrdinal` API maps the categories to distinct colors, while a custom `colorLegend` function positions the circles and labels horizontally across the SVG canvas. The visualization is rendered as SVG elements, with the legend items spaced based on an offset calculation and the height parameter passed from the parent SVG.

VVaggelisKlt

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

89% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how to build a color legend using D3 v5, displaying categories apple, lemon, limes, and orange with distinct colors and circular markers. The visualization uses a custom `colorLegend` function that binds ordinal scale domain values to groups, appending circles and text labels with specified spacing and offsets. The code imports `select` and `scaleOrdinal` from D3, applies the legend to an SVG canvas, and sets explicit styling for text, circles, and background in CSS.

Jjay

89% match