Skip to main content
SimilarExport ZIP
100%

Color and size legends

✓ Published1🌍 Public
VVaggelisKlt
Last edited May 18, 2020
Created on May 18, 2020
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Color and Size Legends

This example demonstrates how color and size legends can be created using D3.js v6, displaying three categorical items (apple, lemon, lime) mapped to distinct colors. It shows two legends: one for color encoding using a categorical color scale and another for size representation through circle radius. The implementation uses a custom `colorLegend` function that leverages D3's selection API with `selectAll`, `enter`, `merge`, and `exit` patterns to manage SVG groups of circles and text labels. The legend items are vertically spaced and annotated with text labels, with the entire SVG rendered using vector graphics.

BBKirst3
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how D3 legends can visually encode data through both color and size. It uses a D3 ordinal color scale to map the categories "apple" and "lemon" to red and yellow swatches, while fixed circle radii and text offsets in the custom `colorLegend` function control the legend’s spatial layout. The SVG-based visualization is rendered using D3 v5, with the legend positioned via an SVG transform and styled through external CSS.

Pprincit
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct custom legends for both color and size encodings in D3 v5 with SVG rendering. The color legend displays four ordinal categories—apple, lemon, lime, and orange—using d3.scaleOrdinal, while the size legend uses d3.scaleSqrt to map numeric tick values to circle radii. Both legends use reusable functions that bind data to groups, append circles and text, and position them with translate transforms.

CCurran Kelleher
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
92% 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
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types rendered side by side in SVG. A color legend uses `d3.scaleOrdinal` to map fruit categories—apple, lemon, lime, and orange—to distinct hues, with each entry displayed as a filled circle and label. A size legend uses `d3.scaleSqrt` to encode a numeric domain from 0 to 10 through varying circle radii, generating tick values via `sizeScale.ticks`. Both legends are constructed with reusable D3 functions that bind data to groups, updating circle and text elements on enter and merge.

WWarren-Fitzhenry
92% match