Skip to main content
SimilarExport ZIP
100%

D3 Course Code Along - Colour and Size Legend

✓ Published0🌍 Public
Rrenenadorp
Last edited Jul 2, 2020
Created on Jun 30, 2020

This visualization demonstrates two interactive legends built with D3 v5: a color legend mapping categorical fruit names to distinct hues, and a size legend using a square-root scale to represent numeric values. The SVG rendering animates circle radii and colors using `transition().duration(1000)`, while legends update dynamically through enter/merge/exit selections. Code is organized as reusable modules (`colorLegend.js`, `sizeLegend.js`) invoked via `selection.call()`, with data sourced from CSV files.

AI-generated description

https://www.youtube.com/watch?v=_8V5o2UHG0E

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Course 9: Color and Size Legends

This example demonstrates interactive color and size legends built with D3 v5, rendered as SVG. It shows categorical color encoding for fruit types (apple, lemon, lime, orange) using `scaleOrdinal`, and quantitative size encoding for values 0–10 using `scaleSqrt`. The legends are created as reusable components via `colorLegend` and `sizeLegend` functions, which compute tick values from the size scale and position circles with text labels. Styling is applied through external CSS, with the SVG canvas sized at 960×500.

GGabrz
90% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two interactive legends for mapping data to visual channels in D3 v5. A color legend uses `scaleOrdinal` to associate fruit names with distinct hues, while a size legend employs `scaleSqrt` to encode numeric values through circle radii. Both legends animate their tick marks using `transition().duration(3000)` as they enter or update. The code implements custom legend components through D3 selections and data joins, rendering SVG circles and text elements with configurable spacing and offsets.

Cceresfin
90% match
Loading thumbnail…

Color and Size Legends

This example presents two interactive legends built with D3.js v5. A categorical color legend maps fruit names—apple, lemon, orange, and lime—to distinct colors using `d3.scaleOrdinal()`, while a sequential size legend uses `d3.scaleSqrt()` to represent numeric values from 0 to 10 with varying circle radii. The code employs D3's `transition()` method to animate the circles’ radii from zero to their final sizes, and both legends are rendered as SVG groups with tick marks, circles, and text labels.

EEdward-Elric233
89% match
Loading thumbnail…

Color and Size Legends

This example shows two custom legends for visualizing categorical and quantitative data: a color legend mapping fruit names to distinct colors, and a size legend mapping numeric values to circle radii using d3.scaleOrdinal and d3.scaleSqrt. The legends are rendered as SVG groups with circles and text labels, positioned via transform attributes. The code uses d3-selection’s enter/merge/exit pattern to bind data and update elements, with custom functions colorLegend and sizeLegend defining the layout and spacing.

Jjlongwellchc
89% match
Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components for mapping data values to visual encodings: a color legend for ordinal categories and a size legend for quantitative values. The color legend displays colored circles for fruits, while the size legend uses scaled circle radii to represent numeric values. Built with D3 v5, the code defines reusable functions `colorLegend` and `sizeLegend` that use `scaleOrdinal`, `scaleSqrt`, and selection joins to render SVG elements dynamically.

JJason-Manbodh
89% match
Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components for mapping data values to visual encodings: a color legend for ordinal categories and a size legend for quantitative values. The color legend displays colored circles for fruits, while the size legend uses scaled circle radii to represent numeric values. Built with D3 v5, the code defines reusable functions `colorLegend` and `sizeLegend` that use `scaleOrdinal`, `scaleSqrt`, and selection joins to render SVG elements dynamically.

JJason-Manbodh
89% match
Loading thumbnail…

color and size legends

Two legends demonstrate how to encode data with color and size in D3 v5. The color legend maps fruit categories to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric values with scaled circle radii. Each legend is built as a reusable component that appends SVG groups with circles and text labels, spacing them vertically and offsetting text from the markers. The code uses selection joins to update the legends’ marks and labels, with `enter()` handling new elements.

Zzenoe
89% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types for data visualization: a color legend mapping categorical fruit names to distinct hues, and a size legend using a square-root scale for numeric values. Animated circles fade in with a two-second transition for the color legend, while the size legend renders static, semi-transparent circles. Both legends use D3 v5 selection methods, including enter/merge/exit patterns, and are built with React. The visualizations are rendered in SVG, with text labels positioned alongside each legend item.

Mmla341
89% match