Viz - Legend - rows

100%

Viz - Legend - rows

✓ Published0🌍 Public

Last edited Jan 13, 2018

Created on Jan 13, 2018

This example demonstrates a simple SVG legend that arranges ten categorical items in five rows. A legend instance is created with the `viz.legend()` API, receives the data array, and sets its row count to five. The legend renders using `legend.circle` markers and is attached to an SVG group element via `d3.select("g").call(legend)`, producing a grid of labeled circles.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Viz - Legend - draw

This example demonstrates a simple legend with circular symbols for a categorical dataset containing ten items labeled "A" through "J". The visualization uses the custom viz.legend API to generate the legend items, drawing each symbol with the legend.circle method. The legend is created with data from a JavaScript array and rendered into an SVG group using d3.select and the .call function, with D3 v4 handling the SVG element selection and layout.

NNPashaP

87% match

Loading thumbnail…

Viz - Legend - width

This example demonstrates a categorical legend with ten items arranged in two rows, constrained to a maximum width of 300 pixels. The visualization uses the `viz.legend()` API from the Viz.js library, which builds the legend as an SVG group. The code initializes a D3 v4 selection on an SVG `<g>` element and applies the legend via the `.call()` method. Data is a simple array of letters from "A" to "J", with the legend’s layout parameters (rows and width) explicitly configured.

NNPashaP

85% match

Loading thumbnail…

Viz - Legend - default

This example demonstrates automatic legend generation for categorical data. A default legend is created with ten labeled items, "A" through "J", using the `viz.legend()` API from the Viz.js library and rendered as SVG inside a D3 v4 selection. The legend is appended to a `<g>` element through D3's `.call()` method, relying on the Viz library’s built-in styling and layout. The code does not show any custom interaction or modification beyond the default appearance.

NNPashaP

84% match

Loading thumbnail…

Viz - Legend - paddingLabel

This example demonstrates how to create a simple legend for categorical data using the viz.js library’s `viz.legend()` function, with ten labels from A to J. The legend is rendered as an SVG group via D3 v4’s selection.call(), and the `paddingLabel(20)` method sets a 20-pixel gap between each label. The code loads viz.js from a CDN, binds the legend to a `<g>` element translated to (50,50), and relies on the library’s built-in rendering for the legend layout.

NNPashaP

81% match

Loading thumbnail…

Viz - Legend - onMouserOver onMouseOut

This example demonstrates an interactive SVG legend with ten categorical items labeled A through J. Hovering over a legend item displays its corresponding letter in a text element above, while moving the mouse away clears the text. Built with D3 v4 and the viz.js library, it uses the `viz.legend()` API with `.onMouseOver()` and `.onMouseOut()` callbacks to update the display. The legend is rendered as a group of SVG elements inside a 960x500 canvas.

NNPashaP

80% match

Loading thumbnail…

Viz - Legend - fill

This example demonstrates a D3.js legend with custom fill colors mapped from categorical data. It shows three legend items labeled A, B, and C, each assigned a distinct color (red, blue, yellow) via an object lookup. The visualization uses the viz.legend() API from vizjs.org, combined with d3.selection.call to attach the legend to an SVG group. The data is a simple hardcoded array, and the rendering approach is SVG with a manual translate transform positioning the legend at coordinates (50,50).

NNPashaP

79% match

Loading thumbnail…

Viz - Legend - size

A size legend maps categorical labels A through J to circular symbols of varying diameter using D3 v4 and the viz.js legend API. The example renders an SVG, where `viz.legend()` is configured with a `.size(30)` accessor and bound to a `g` element via `d3.select("g").call(legend)`. The legend visually encodes each data item as a distinct circle whose radius reflects the assigned size value, demonstrating a static, non-interactive legend layout without axes or scales.

NNPashaP

79% match

Loading thumbnail…

Viz - Legend - paddingInner

This example demonstrates a D3 legend with adjustable inner padding between its color swatches, using the `viz.legend()` API from the viz.js library. Ten categorical labels (A through J) are passed as data, and `paddingInner(0.1)` sets a narrow gap between each swatch, making the legend compact. The visualization renders as an SVG element, with the legend generated by calling the legend component on a selected `<g>` group. The code relies on D3 v4 for selection and SVG manipulation, while the legend’s layout and styling come from viz.js.

NNPashaP

75% match