Skip to main content
SimilarExport ZIP
100%

Viz - Legend - onMouserOver onMouseOut

✓ Published0🌍 Public
NNPashaP
Last edited Jan 13, 2018
Created on Jan 13, 2018

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.

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

Viz - Legend - rows

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.

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

Viz - Bar - stacked - legend - hover

A stacked bar chart displays twenty categories across four value series, with each series assigned a distinct color from an explicit fill map. Hovering over a legend item triggers a transition that isolates the corresponding series by zeroing out the other values, while mouse-out restores the full stack. Built with D3 v4 and the viz.js library, the visualization uses SVG rendering and a 500-millisecond transition on bar attributes to animate the changes.

NNPashaP
79% 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
78% 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
77% 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
77% match