Skip to main content
100%

'Mickey Mouseover' menu

✓ Published0🌍 Public
Aallardw
Last edited Dec 29, 2015
Created on Dec 9, 2015

A circular menu of three colored buttons—red, yellow, and green—surrounds a large grey circle. Hovering over the central circle animates the buttons outward along their radial positions, and clicking a button changes the central circle’s fill to that color. Built with D3 v3, the SVG elements use `selection.on` for mouse events, `transition.attr` for smooth movement, and a `data` join to bind the button labels. The buttons rotate and translate via `attr('transform')`, with a delayed transition on mouseout to retract them.

AI-generated description

Similar vizzes

Loading thumbnail…

MouseOver

This example demonstrates interactive mouse events on an SVG scatterplot built with D3 v3. Circles change color to orange and grow in radius on mouseover, then revert on mouseout. Clicking the background converts pixel coordinates to data values using inverted linear scales, adds a new point to the dataset, and appends a new circle. The code uses `d3.scale.linear`, `d3.svg.axis`, and `.on("mouseover")` handlers to manage the visual feedback and dynamic data updates.

BBAvlino
76% match
Loading thumbnail…

MouseOverMyColorIS

Twenty semi-transparent circles scatter randomly across an SVG canvas, each filled with a distinct color from D3’s `d3.scale.category20` palette. Hovering over any circle triggers a native browser tooltip via an appended SVG `<title>` element, displaying that circle’s specific color name. The example uses D3’s data join to bind randomly generated coordinates and radii, then appends circles and their tooltips. It demonstrates adding interactive title elements directly within D3 selections, with no additional libraries beyond the core `d3.js` script.

BBAvlino
74% match
Loading thumbnail…

Mouse click

Three circles, bound to the array `[50,40,60]`, render in steel blue on an SVG canvas. Hovering turns a circle red, and clicking turns it black, while a zoom behavior attached via `d3.behavior.zoom` allows panning and scaling the entire group with the mouse wheel or drag. The example demonstrates basic event handling and zoomable SVG rendering using D3 v3, with the data hardcoded in the script.

IIgathi
74% match
Loading thumbnail…

Fork of MIAGE base

A static SVG scene shows three colored circles arranged horizontally inside a 960×500 viewport, with interactive hover and click behaviors. The green circle turns black on hover via CSS, while the red circle changes fill on mouseover and triggers a two-stage D3 transition sequence when a rectangle button is clicked. The code uses D3 v5 selection methods and `transition()` with `duration()` to animate the red circle’s position, alongside native SVG elements and JavaScript event handlers.

EElodie31190
73% match
Loading thumbnail…

Circles

Five blue circles appear in a row, drawn as SVG elements. Clicking the button triggers a `mouseleave` event on all of them, causing each to turn red and then fade back to blue over one second. Built with React, it uses D3 v5’s selection and transition API to animate the fill attribute.

Jjijou31
72% match
Loading thumbnail…

Mouseover Example

This example demonstrates a mouseover interaction on a single circle rendered in an SVG. A tooltip appears near the cursor when the circle is hovered, displaying a custom HTML message that includes text and an image, and it disappears when the mouse leaves. The visualization is built with D3.js v6, using `d3.select` to append the SVG and tooltip elements and `.on()` event listeners for `mouseover`, `mousemove`, and `mouseleave` to control tooltip visibility and positioning. The tooltip is styled inline with CSS properties such as `position: absolute` and `visibility: hidden`.

Yyuting89830@gmail.com
72% match
Loading thumbnail…

TD1

Three circles—green, blue, and red—sit in a row on a gray SVG canvas. Clicking a rectangle starts a two-second animated transition that moves the red circle diagonally downward, followed by a second transition returning it horizontally. The red circle also turns black on mouseover, while the green circle responds to hover via a CSS class. Built with D3 v5, the example demonstrates selections, event handlers, and chained `transition.attr` calls, with no external data source.

LLauranJade
71% match
Loading thumbnail…

MIAGE base

This visualization demonstrates basic D3.js interactions and animations with SVG elements. It renders three colored circles (green, blue, and red) within an SVG canvas, where the red circle responds to mouseover and mouseout events by changing color, and a rectangular click target triggers a two-stage transition that moves the red circle along a translated path. The code imports `select` and `csv` from D3 v5, uses local ES6 modules for message text, and combines CSS hover styling with programmatic event handlers and `transition().duration()` chains to show multiple ways of controlling element appearance and motion.

TTimothyMiage
71% match