D3 Legend Example

Legend

This example shows a simple categorical color legend using two circular swatches labeled "OW2DWL" and "OW2DSWL," rendered as SVG within a 960-by-500 pixel canvas. The legend is built with the D3 v5 library, using `scaleOrdinal` to map the two domain categories to orange and blue fills. A reusable `colorLegend` function appends groups, circles, and text elements, positioning them vertically with a spacing offset and applying a text offset for labels. The visualization demonstrates a straightforward, declarative approach to creating a static legend with a minimal data set.

SShane Carey

Fork of D3 D3 Color and Size Legends

This example demonstrates how to build color and size legends for D3 visualizations using modular JavaScript functions. It shows a color legend with circles representing different fruit types, encoded through an ordinal color scale. The code defines a reusable `colorLegend` component that binds data to SVG groups, appending circles and text labels. Using D3 v7’s `scaleOrdinal`, the example maps categorical domains to specific colors, while SVG rendering handles the visual output. The implementation highlights a clean separation between the legend component and the main script’s render logic.

Ccaedcagt76@gmail.com

Color Legends

A color legend maps ordinal categories to hues, displaying two large circular swatches for "apple" and "lemon" against a white background. The `d3.scaleOrdinal` assigns red and yellow, while a custom `colorLegend` function binds the scale's domain to SVG groups. Circles and text labels are appended and updated via enter/merge/exit selections, with transform positions calculated from array index and a fixed height. The example demonstrates reusable D3 v5 code for building legends with dynamic scaling.

AAli Ahmed

D3 Color and Size Legends

This example demonstrates how to build custom legend components for D3 visualizations using SVG. It shows two distinct legends: a color legend using an ordinal scale with categorical fruit labels, and a size legend using a square root scale with filtered ticks. The reusable legend functions, `colorLegend` and `sizeLegend`, are invoked via the `.call()` method and handle enter/merge/exit selections. The code uses `d3.scaleOrdinal`, `d3.scaleSqrt`, and D3 v7's selection methods to update and render the legend elements.

Ccaedcagt76@gmail.com

Color Legends !

This example presents a reusable color legend component built with D3 v5. The visualization displays four categorical color swatches—apple, lemon, lime, and orange—using circles filled via a `scaleOrdinal` color scale. The `colorLegend` function, exported from `colorLegend.js`, appends grouped circle and text elements to an SVG, with spacing, text offset, and circle radius configured through its props. The legend is transformed into position using a `translate` attribute and rendered with the d3 `select` and `call` methods.

SShareSha

Legend experimenting

This example demonstrates how to build reusable color and size legends for D3 visualizations. It shows a color legend using d3.scaleOrdinal with fruit categories mapped to distinct colors, alongside a size legend using d3.scaleSqrt. The legends are rendered as SVG groups, with the color legend drawing rectangles and the size legend drawing circles. The code uses D3 v5’s selection.join pattern, custom legend components exported from separate modules, and explicit spacing and offset parameters to control layout within an SVG canvas.

MMaciek Sitkowski

Color and Size Legends

This example demonstrates how D3 legends can visually encode data through both color and size. It uses a D3 ordinal color scale to map the categories "apple" and "lemon" to red and yellow swatches, while fixed circle radii and text offsets in the custom `colorLegend` function control the legend’s spatial layout. The SVG-based visualization is rendered using D3 v5, with the legend positioned via an SVG transform and styled through external CSS.

Pprincit

Color and Size Legends

This example demonstrates how D3 legends can encode data through color and size. Two separate legends are rendered with SVG: a color legend uses an ordinal scale to map fruit categories to distinct hues, while a size legend uses a square-root scale to represent numeric values with scaled circle radii. The code builds reusable legend components using D3’s data join pattern, applying scales like `scaleOrdinal` and `scaleSqrt`, with manual spacing and text offsets for tick labels.

Ddaigokawabe