Skip to main content
SimilarExport ZIP
100%

color and size lengend

✓ Published0🌍 Public
HHillKinsh
Last edited Jan 3, 2021
Created on Jan 3, 2021
Forked from 动画

This example demonstrates two legends: a categorical color legend for fruits like apples and lemons, and a quantitative size legend for population data. The color legend uses `d3.scaleOrdinal` to assign fixed colors, while the size legend uses `d3.scaleSqrt` to map numeric ticks to circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned via translation. The code uses `selection.selectAll` and `.merge` for incremental updates, and the size legend filters out the zero tick. The data source is a CSV listing country populations, though only the legend scales are visualized here.

AI-generated description

color and size legend.

MIT Licensed

Similar vizzes

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
93% match
Loading thumbnail…

color and size legends -1

This example demonstrates two distinct legends: one mapping categorical colors to fruits, and another mapping numerical values to circle sizes. The color legend uses `scaleOrdinal` with red, yellow, green, and orange for apples, lemons, limes, and oranges. The size legend uses `scaleSqrt` to scale circle radii from 0 to 50 for ticks between 1 and 10. Both legends render SVG text and circles, with the size legend's circles having a semi-transparent fill and stroke opacity. The code uses D3 v5 API calls like `selection.selectAll`, `attr`, and `.merge`.

Jjblaskovich
92% match
Loading thumbnail…

Color and size legends

This example demonstrates two separate legends: a color legend for categorical data (plum, lemon, limes, oranges) and a size legend for quantitative data on a square-root scale. The color legend maps ordinal domains to fixed palette values, while the size legend generates five tick values using `scaleSqrt` and filters out zero. Both legends are built with reusable D3 v5 functions that append SVG groups containing circles and text, with spacing and text offsets passed as props. The rendering uses `selection.enter` and `selection.merge` to manage dynamic updates.

Bbencestubnya
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 distinct legend techniques for encoding data values. The color legend maps ordinal categories like "apple" and "lemon" to distinct colors using `d3.scaleOrdinal`. The size legend uses `d3.scaleSqrt` to translate a continuous numeric range from 0 to 10 into proportional circle radii, with tick labels derived from the scale's `.ticks()` method. Both legends are built as custom SVG components that render groups of circles and text, with the size legend's circles using a semi-transparent fill. The code relies on D3 v5's selection and merge APIs, and the `d3.select` function, to efficiently create and update the SVG elements.

RRubens
91% match
Loading thumbnail…

Color and size legends

This example demonstrates two distinct legend types for data visualization: a color legend and a size legend, both rendered as SVG. The color legend maps categorical values (apple, lemon, limes, orange) to distinct colors using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to map a numeric range (0–10) to circle radii, showing a proportional relationship. Both legends are built with the D3 library (v5) and its selective update pattern via `selection.merge`.

Rrintisch
91% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend maps categorical values like "apple" and "lemon" to distinct colors, while the size legend uses d3.scaleSqrt to encode numeric ticks as proportional circle radii. Both legends are built with D3 v5 data joins, using selection.enter and merge to update groups, circles, and text. The code exports modular functions from colorLegend.js and sizeLegend.js, with styling applied via CSS classes like .tick.

VVineel Gannu
91% match