Skip to main content
SimilarExport ZIP
100%

Color and Size Legends !

✓ Published0🌍 Public
SShareSha
Last edited Apr 14, 2020
Created on Apr 14, 2020
Forked from Color Legends !

This example demonstrates customizable color and size legends for scatterplot-style data visualization. The color legend maps fruit names to distinct hues using d3.scaleOrdinal, while the size legend uses d3.scaleSqrt to translate numeric values into circle radii. Both legends are rendered as SVG groups, with reusable functions colorLegend and sizeLegend managing tick placement, circle attributes, and text labels. The implementation leverages D3 v5 data joins to update the legend elements dynamically.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components for scatterplot-style visualizations: a color legend for ordinal categories and a size legend for quantitative values. The color legend maps fruit names to distinct hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to encode numeric ticks as proportional circle radii. Both legends are rendered as SVG groups via data joins, with circles and text labels. The code uses `d3-selection` methods like `selectAll`, `enter`, and `merge` to manage updates, and `d3.ticks` to generate tick values.

NNaveenaS12
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for scatterplot-like data. A color legend uses an ordinal scale to map fruit names to distinct colors, displayed with evenly spaced circles and labels. A size legend uses a square-root scale to map numeric values to circle radii, showing larger circles at the top with tick marks. Both legends are built with D3 v6 selections, using `.enter().append()`, `.merge()`, and `.exit()` to manage groups, with SVG circles and text rendered in an HTML page.

EEllednera
94% 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
94% 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
94% 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
94% 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 legend

This example demonstrates two reusable legend components for scatterplots: a color legend using an ordinal scale and a size legend using a square-root scale. The color legend maps fruit names to red, yellow, green, and orange circles, while the size legend displays five circular ticks sized proportionally to values from 0 to 10. Both are built with D3 v5, using `d3.scaleOrdinal`, `d3.scaleSqrt`, and the enter-merge-exit pattern to bind SVG groups, circles, and text elements.

Ppplomith
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to build separate color and size legends for data visualization. The color legend maps categorical fruit names to distinct colors using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to represent numeric values through circle radius. Both legends are rendered as SVG groups, with the color legend positioned on the left and the size legend on the right. The code leverages reusable legend functions that handle enter, update, and exit selections to manage the SVG elements dynamically.

AArriannePandaraoan
93% match