Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
Mmla341
Last edited Jun 23, 2020
Created on Jun 23, 2020
Forked from Nested Logic

This example demonstrates two distinct legend types for data visualization: a color legend mapping categorical fruit names to distinct hues, and a size legend using a square-root scale for numeric values. Animated circles fade in with a two-second transition for the color legend, while the size legend renders static, semi-transparent circles. Both legends use D3 v5 selection methods, including enter/merge/exit patterns, and are built with React. The visualizations are rendered in SVG, with text labels positioned alongside each legend item.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and size legend

This example demonstrates two reusable legend components: a color legend mapping ordinal categories to distinct hues, and a size legend using a square-root scale to encode numeric values through circle radii. The color legend displays fruits with colored circles, while the size legend renders circular markers with labels positioned beyond each circle. Both legends use D3 v5 scales and SVG rendering, with React-styled selection/merge patterns for dynamic updates. The size legend uses `sizeScale.ticks()` to generate evenly spaced values for its circles.

Bbambaleq
94% match
Loading thumbnail…

Color Legend

This example demonstrates two types of legends for mapping data to visual encodings: a color legend for categorical values and a size legend for quantitative values. The color legend displays circles colored via a d3.scaleOrdinal mapping fruit names to colors, while the size legend uses d3.scaleSqrt to represent numeric ticks as varying circle radii. Both legends are rendered as SVG groups with d3-selection, using join patterns to update circle and text elements. The code is built with React and D3 v6, with the legends generated procedurally from scales rather than external data.

Nnsadath
94% match
Loading thumbnail…

Color Size and Legends

This example demonstrates two custom legend components rendered with D3 v5 in a React framework. A categorical color legend maps fruit names to distinct colors using `scaleOrdinal`, while a separate size legend uses `scaleSqrt` to visualize numeric values through circle radii. Both legends animate their circles with a 1-second `transition`, and the code highlights reusable legend-building patterns through D3's data join and enter/merge/exit selections.

BB Sundaresan
93% match
Loading thumbnail…

Color and size legends

This example demonstrates two types of legends for data visualization: a color legend using `scaleOrdinal` for categorical data and a size legend using `scaleSqrt` for quantitative data. The color legend displays four fruit categories with distinct colors, while the size legend shows five ticks with circle radii scaled proportionally to values. Built with React and D3 v5, the SVG rendering uses custom `colorLegend` and `sizeLegend` functions that append groups, circles, and text elements to the chart.

NNkwachi Abel
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom D3.js legends rendered as SVG within a React application. The color legend maps categorical fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to encode numeric tick values as circle radii. Both legends are constructed with D3's data join pattern (`selectAll`, `enter`, `merge`, `exit`), displaying circles and text labels. The color legend places swatches vertically, and the size legend scales circle areas according to the square-root scale, with tick generation via `sizeScale.ticks`.

Vvic126
93% match
Loading thumbnail…

Color and Size Legend

Two custom legend components demonstrate how to encode data through color and size. The color legend uses a D3 ordinal scale with four fruit categories, while the size legend uses a square-root scale with five tick values. Both legends are rendered as SVG groups using reusable functions that handle enter/update/exit selections. The code uses `d3.scaleOrdinal`, `d3.scaleSqrt`, and selection methods like `merge` and `attr` to position circles and text labels with consistent spacing.

Jjeelong
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 Legend

This example demonstrates two legend types for visualizing data: a color legend and a size legend created side by side in an SVG. The color legend maps categorical fruit names (apple, lemon, lime, orange) to distinct colors using a d3.scaleOrdinal, while the size legend uses a range of numeric values to create circles of varying radii. Both legends are rendered through d3 data joins, where each group contains a circle and a text label positioned with transform attributes and spacing constants. The visualization uses d3.v5 and employs the colorLegend and sizeLegend custom functions to generate the reusable legend components.

Ssploitfun
92% match