Skip to main content
SimilarExport ZIP
100%

Legends

✓ Published0🌍 Public
SSharvariPhadke
Last edited Jan 24, 2021
Created on Jan 24, 2021
Forked from Object Constancy

This example demonstrates two distinct legend styles: a color legend using an ordinal scale for categorical data and a size legend using a square-root scale for quantitative data. The color legend maps fruit names to distinct colors via `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to translate numeric ticks into varying circle radii. Both legends are rendered as SVG groups using D3's selection and merging API, with circles and text positioned via the `attr('transform', ...)` method. The page integrates custom gradients defined in the SVG defs, though they are not actively applied to the legend marks.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for a D3.js SVG visualization. The first legend uses a categorical color scale (`scaleOrdinal`) to map fruit names to specific colors, with circles and text labels generated by a custom `colorLegend` function. The second legend uses a square-root size scale (`scaleSqrt`) to map numeric values from 0 to 10 to varying circle radii, with ticks and labels created by a `sizeLegend` function. Both legends are built by appending groups and elements to the SVG, using D3's selection and merge methods to handle updates.

NNitin Vadhiya
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct types of legends for data visualization: a color legend and a size legend. The color legend maps categorical fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric values with proportional circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned using `attr('transform', ...)`. The code employs D3 v5's selection and merge methods to efficiently update the legends, and the circles are styled with a black stroke for visual clarity.

MMihir Sawant
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types: a color legend with ordinal categories for fruits and a size legend with a square-root scale mapping numeric values to circle radii. Using D3 v5, it renders SVG circles and text labels, with the color legend employing `scaleOrdinal` and the size legend using `scaleSqrt` with tick generation. The size legend positions circles based on cumulative radius sums with spacing, while both legends use reusable functions (`colorLegend` and `sizeLegend`) called via D3’s selection `.call()` pattern.

GGuillaume Calmettes
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend designs for SVG visualizations: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to represent numeric values through circle radii. The color legend renders four labeled circles with custom spacing, while the size legend generates five ticks with varying circle sizes and text offsets. Both legends are built using D3 v5 data joins, scaleOrdinal, scaleSqrt, and explicit enter/merge/exit patterns, with styling applied through CSS classes on tick groups.

0007ebey
92% match
Loading thumbnail…

COLOR AND SIZE LEGENDS

This example demonstrates two distinct legend styles: a categorical color legend and a quantitative size legend. The color legend uses an ordinal color scale to map fruit names to distinct colors, while the size legend uses a square-root scale to visualize numeric values through circle radii. Both legends are rendered as SVG groups with tick marks, using D3's `selectAll` and `merge` for efficient updates. The code builds legends from reusable functions `colorLegend` and `sizeLegend`, which append circles and text elements to an SVG canvas.

Jjons288
92% match
Loading thumbnail…

COLOR AND SIZE LEGENDS

This example demonstrates two distinct legend styles: a categorical color legend and a quantitative size legend. The color legend uses an ordinal color scale to map fruit names to distinct colors, while the size legend uses a square-root scale to visualize numeric values through circle radii. Both legends are rendered as SVG groups with tick marks, using D3's `selectAll` and `merge` for efficient updates. The code builds legends from reusable functions `colorLegend` and `sizeLegend`, which append circles and text elements to an SVG canvas.

Jjons288
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two legends: a color legend for ordinal data and a size legend for quantitative data. The color legend uses `d3.scaleOrdinal` to map fruit names to colors, while the size legend uses `d3.scaleSqrt` with five ticks to map numeric values to circle radii. Both legends are rendered as SVG groups using reusable functions that handle enter, update, and exit selections. The code relies on D3 v5’s `selection.call`, `selection.merge`, and scale methods to create interactive-looking, standalone legend components.

Ggregosaure
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how D3 legends can encode data through color and size. Two separate legends are rendered with SVG: a color legend uses an ordinal scale to map fruit categories to distinct hues, while a size legend uses a square-root scale to represent numeric values with scaled circle radii. The code builds reusable legend components using D3’s data join pattern, applying scales like `scaleOrdinal` and `scaleSqrt`, with manual spacing and text offsets for tick labels.

Ddaigokawabe
92% match