Color and Size Legends

100%

Color and Size Legends

✓ Published0🌍 Public

Last edited Nov 7, 2018

Created on Oct 1, 2018

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.

AI-generated description

MIT Licensed

Similar vizzes

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

95% 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

95% 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

95% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct separate color and size legends for a visualization. The color legend uses a categorical ordinal scale to map fruit names to distinct colors, while the size legend uses a square-root scale to map a numeric domain to circle radii. Both legends are implemented as reusable functions that append groups of circles and text labels to an SVG canvas using D3 v5 methods like `scaleOrdinal`, `scaleSqrt`, and `selection.enter().append`. Data is encoded purely through visual channels, with no underlying dataset.

Ssiddharth171

95% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how to create separate legends for ordinal color scales and quantitative size scales in D3 v5. The color legend uses a `scaleOrdinal` with fruit names mapped to distinct colors, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends are rendered as SVG groups using custom reusable functions that bind data to enter/merge/exit selections, positioning circles and text labels with transform attributes and spacing offsets.

MMounikaBeerelly

95% 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

95% match

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

95% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends built with D3 v5: a color legend for an ordinal scale and a size legend for a square-root scale. The color legend maps fruit names to distinct colors, while the size legend uses `sizeScale.ticks` to generate five circle radii. Both legends are rendered as SVG groups, with circles and text positioned using `spacing` and `textOffset` parameters from custom `colorLegend` and `sizeLegend` modules.

Aanuj1450

94% match