Skip to main content
SimilarExport ZIP
100%

Colour and size legends

✓ Published0🌍 Public
MMatan
Last edited Nov 14, 2020
Created on Nov 14, 2020

This example demonstrates how to build custom colour and size legends for a scatterplot using D3.js version 5. It uses `d3.scaleOrdinal` and `d3.scaleSqrt` to map categorical and numerical data, respectively, with the legends rendered as SVG groups of circles and text labels. The colour legend shows apples and lemons with distinct red and yellow fills, while the size legend displays five tick values from 0 to 10 with increasing circle radii. The code imports modular functions `colourLegend` and `sizeLegend` and updates DOM elements via D3’s selection join pattern.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates how to build both a color legend and a size legend using D3.js v5. The color legend maps ordinal categories (Apple, Lemon, Lime, Orange) to distinct colors via `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numerical values from 0 to 10 as circle radii. Both legends implement a general update pattern with `selection.merge()` for enter and exit transitions, rendering circles and text labels in SVG. The ticks for the size legend are generated using `sizeScale.ticks()`, with all elements styled via CSS classes.

Fframptonb
92% match
Loading thumbnail…

Colour and size legends

This example demonstrates two types of legends for scatterplots: a color legend using `d3.scaleOrdinal` and a size legend with `d3.scaleSqrt`, both rendered as SVG groups with `circle` and `text` elements. The color legend maps fruit names to distinct colors, while the size legend uses `scaleSqrt` with `ticks()` and `reverse()` to display descending circle radii. The reusable `colorLegend` and `sizeLegend` functions handle enter, update, and exit selections via `selection.merge()`, with spacing and text offsets configured through props. Styling for tick labels and circles comes from CSS classes defined in `styles.css`.

Kkaviya-ds
91% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate color and size legends using D3 v5. The color legend maps ordinal categories (apple, lemon, lime, orange) to distinct colors via `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric values with proportional circle radii. Both legends are built with reusable functions that accept `selection` and `props`, appending SVG groups with circles and text labels. The size legend filters out zero values and reverses tick order, displaying five ticks with semi-transparent black circles.

FFlying ACE
91% match
Loading thumbnail…

Colour and Size Legends

This example demonstrates two distinct legend types for mapping data to visual encodings. A color legend displays ordinal categories—apple, lemon, lime, and orange—paired with distinct hues using `d3.scaleOrdinal`. Adjacent to it, a size legend uses `d3.scaleSqrt` to map a continuous numeric domain from 0 to 10 to circle radii, filtering out zero and reversing tick order for display. Both legends are built with reusable D3 functions that append SVG groups, circles, and text elements, with tick styling applied via CSS classes.

Ccornshoots
91% match
Loading thumbnail…

Color and Size Legends

This example illustrates two distinct legend types for scatterplots using D3 v5 and SVG rendering. It combines a categorical color legend with an ordinal scale, showing fruit names mapped to distinct hues, and a quantitative size legend using a square-root scale for proportional circles. The size legend generates ticks from the scale and positions text offset by each circle’s radius. Both legends are built with reusable functions that append and update `g` elements, demonstrating a consistent pattern for interactive legend components.

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

Color and Size Legends

This example demonstrates two custom legend components built with D3 v5: a color legend using an ordinal scale for categorical data (apple, lemon, lime, orange) and a size legend using a square-root scale for continuous numeric values. The color legend renders colored circles with text labels, while the size legend generates circles whose radii correspond to tick values, filtering out zero. Both legends are implemented as reusable functions that append SVG groups, using `scaleOrdinal` and `scaleSqrt` to map data domains to visual properties, with spacing and text offsets controlled by configuration props.

PPhilRG
91% match
Loading thumbnail…

Colour and Size Legends

This example demonstrates two types of legend components rendered as SVG in D3 v5: a colour legend using `scaleOrdinal` with discrete fruit categories, and a size legend built on `scaleSqrt` for continuous numeric values. The colour legend maps domain values to colored circles with labels, while the size legend displays tick marks with circle radii proportional to data values. Both legends reuse enter/merge/exit selections for dynamic updates, with tick text and circles styled via CSS. The code defines reusable `colourLegend` and `sizeLegend` functions, called with custom spacing, offsets, and tick counts.

FFhouston17
91% match