Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published1🌍 Public
Hhanulik.ondrej@gmail.com
Last edited Aug 24, 2021
Created on Aug 12, 2021
Forked from mujSmile

A legend example displays categorical color scales using D3 v6’s scaleOrdinal, rendering SVG circles and text labels. Each circle’s fill is mapped directly from the color scale’s domain, while a text offset places labels beside the markers. The colorLegend function accepts a color scale and spacing properties, using selection.merge and enter/update patterns to manage the DOM. Data originates from a hardcoded array of fruit names, with no external dataset loaded.

AI-generated description

start 8:05:00 průběžně 8:21:30 konec 8:33:00

<b>Functions are Objects</b><br> The typeof operator in JavaScript returns "function" for functions.

But, JavaScript functions can best be described as objects.

JavaScript functions have both properties and methods.

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and size legends

This example demonstrates how to construct reusable legends for categorical color scales in D3 v5. A color legend maps fruit names to distinct colors using `scaleOrdinal`, rendering circles with corresponding fills and text labels. The legend is implemented as a custom function that leverages D3’s data-join pattern with `selection.merge` to handle updates efficiently. The SVG output positions each legend item vertically with configurable spacing, circle radius, and text offset.

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

Color and Size Legends

This example demonstrates how legends can visualize both ordinal color scales and quantitative size scales. A color legend maps fruit names to distinct hues using `d3.scaleOrdinal`, while a size legend translates a numeric range into varying circle diameters via `d3.scaleSqrt`. Both legends are constructed as reusable functions that append SVG `<g>` groups and circles, using D3’s selection and merge patterns to handle updates. Text labels accompany each circle, positioned relative to the circle’s radius.

NNita
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two legend styles rendered side by side in SVG. A color legend uses a d3.scaleOrdinal to map categorical fruit names to distinct hues, with circles and offset labels. A size legend employs d3.scaleSqrt to map a continuous numeric domain to circle radii, generating ticks via sizeScale.ticks. Both legends are built with reusable functions that bind data to SVG groups, circles, and text elements, with styling applied through CSS classes.

Ccaydener
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 patterns for encoding data. A color legend uses a d3.scaleOrdinal to map categorical fruit names to colored circles, while a size legend employs d3.scaleSqrt to represent numeric values through circle radius, with tick marks generated via sizeScale.ticks. Both legends are built with D3 v5 data joins, appending SVG groups, circles, and text elements with configurable spacing and offsets, rendering in a standalone SVG canvas.

Jjay
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create custom color and size legends for D3 visualizations. The color legend displays four categorical fruits using a d3.scaleOrdinal with distinct color ranges, while the size legend uses d3.scaleSqrt to map numeric values from 0 to 10 to circle radii. Both legends are built using reusable functions with enter/merge/exit patterns, rendering SVG groups with circles and text labels. The code uses D3 v5 selection methods and scales to position legend items with configurable spacing and text offsets.

CClaudio Barone
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to create custom color and size legends for D3 visualizations. The color legend displays four categorical fruits using a d3.scaleOrdinal with distinct color ranges, while the size legend uses d3.scaleSqrt to map numeric values from 0 to 10 to circle radii. Both legends are built using reusable functions with enter/merge/exit patterns, rendering SVG groups with circles and text labels. The code uses D3 v5 selection methods and scales to position legend items with configurable spacing and text offsets.

CClaudio Barone
92% match