Fork of Fork of Fork of Color and Size Legends

Fork of Color and Size Legends

This example demonstrates two types of legends using D3.js version 5.6.0, rendered as SVG elements. The first legend uses `scaleOrdinal` to map fruit names to colors, displayed as labeled circles. The second legend uses `scaleSqrt` to map a numeric domain to circle radii, with labeled tick marks. Both legends are created using custom reusable functions, `colorLegend` and `sizeLegend`, which manage the enter/update/exit lifecycle for the SVG groups, circles, and text elements.

SSumayaar

Fork of Color and Size Legends

This example demonstrates reusable legend components for both ordinal color scales and quantitative size scales. The color legend renders colored circles with labels for fruit categories, while the size legend displays circles scaled by magnitude using a square-root scale. Both legends are implemented as custom D3 functions that bind data to SVG groups, using `selection.enter()` and `selection.merge()` for updates. The code utilizes `d3.scaleOrdinal`, `d3.scaleSqrt`, and `scale.ticks()` to generate tick values for the size legend.

MMajaha21

Fork of Fork of Color and Size Legends

This example displays both a color legend and a size legend in a single SVG. The color legend maps ordinal fruit names to colors using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to encode numeric values as circle radii. Both legends are rendered with SVG groups, circles, and text elements, with reusable functions for each legend type. The code uses D3 v5 and demonstrates custom legend components with configurable spacing, circle radius, and tick counts.

SSumayaar

Fork of Color and Size Legends

This example demonstrates reusable legend components for both ordinal color scales and quantitative size scales, rendered as SVG. The color legend uses `d3.scaleOrdinal` to map fruit categories to colors, while the size legend uses `d3.scaleSqrt` to map numeric tick values to circle radii. Both legends are drawn using custom selection-based functions that append SVG groups, circles, and text elements with d3’s selection API. The code runs in d3 v5 and renders within a single SVG element.

Ssrinathsethumadhavan

Fork of Color and Size Legends

This example shows custom legends for both ordinal color scales and quantitative size scales, rendered as SVG groups. The color legend maps fruit names to distinct hues, while the size legend uses a square-root scale to map numeric values to circle radii, with ticks generated by `scaleSqrt.ticks()`. Both legends are built by entering and merging `g.tick` elements, positioning circles and text with `attr('transform')` and `attr('x')`. The code uses d3 v5 APIs including `scaleOrdinal`, `scaleSqrt`, and selection methods like `merge` and `exit().remove()`.

BBlakeMcMurray

Fork of Color and Size Legends2

This example demonstrates two reusable legend components for D3 v5: a color legend using an ordinal scale mapping fruit names to colors, and a size legend using a square-root scale with five ticks. Both render as SVG groups with circles and text labels, positioned via transforms. The colorLegend component encodes categorical data with colored circles, while the sizeLegend uses scaled circle radii and offsets text based on each value’s radius. The code imports `scaleOrdinal` and `scaleSqrt` from D3, and uses selection joins to update or remove legend items dynamically.

Jjlspangl

Fork of Color and Size Legends

This example demonstrates reusable D3.js legend components for ordinal color scales and sequential size scales. The color legend displays four fruit categories (apple, lemon, lime, orange) as colored circles, while the size legend visualizes numeric ticks from 0 to 10 as scaled circles. Both legends use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with custom legend modules handling circle positioning and text offsets. The SVG rendering includes styled ticks and text, with circles given black stroke outlines for visual separation.

IIsigned

Fork of Color and Size Legends

This fork demonstrates two reusable legend components in D3 v5: a color legend for ordinal scales and a size legend for square-root scales. The color legend maps fruit categories to colored circles, while the size legend translates numeric values into varying circle radii. Both use SVG rendering and employ D3’s selection joins (`selection.selectAll`, `.enter()`, `.merge()`, `.exit()`) to bind data and update groups. Styling is applied via CSS classes for tick text and circle strokes.

GGerman Dimitrov