Color and Size Legends

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

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

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

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

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

Color and Size Legends

CClaudio Barone

Color and Size Legends

This example demonstrates two common legend types for D3 visualizations: an ordinal color legend for categories and a square-root size legend for quantitative values. The color legend maps fruit names to distinct colors, while the size legend encodes numeric values using proportional circle radii. Both legends are rendered as SVG groups using reusable functions that leverage D3's `scaleOrdinal`, `scaleSqrt`, and `selection.join` pattern for enter/update/exit handling.

Ssakhabutdinov

Color and size legends

This example demonstrates two types of legend encodings for data visualization: a color legend mapping ordinal categories to hues, and a size legend scaling circles according to a square-root scale. The color legend displays fruit names with distinct colors, while the size legend shows numeric ticks with proportional circle radii. Built with D3 v5, the visualization uses `selectAll` and `.enter().append()` to construct SVG groups, circles, and text elements. Custom `colorLegend` and `sizeLegend` functions control the layout, with positioning handled via `attr('transform', ...)` and scales defined by `scaleOrdinal` and `scaleSqrt`.

VVaggelisKlt