practice11--hover

100%

practice11--hover

✓ Published0🌍 Public

Last edited May 21, 2023

Created on May 21, 2023

A D3.js smiley face made of fruit-shaped circles demonstrates hover interactions, where each circle changes its stroke color when a fruit is selected and returns to normal when the mouse leaves. The visualization shows five apples that shrink, disappear, and transform into a lemon over time, with transitions animating radius and position changes. Using d3-selection, d3-scaleOrdinal, and transition.attr, the code binds data to circles, updates attributes via .merge(), and removes exiting elements with a collapsing radius animation.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hovering

A row of apples animates in size and position using d3 transitions, with one fruit highlighted on hover. The fruitBowl module binds fruit objects to SVG circles, using scaleOrdinal for color and radius mapped to fruit type. Mouse events call setSelectedFruit to toggle a black stroke on the selected circle. Over time, setTimeout triggers data changes—removing a fruit, converting one to a lemon, and filtering another—while d3’s enter/merge/exit pattern animates the updates.

Ccpsshan

86% match

Loading thumbnail…

hover-interactions

Five fruit circles render in an SVG, transitioning between apple and lemon types with color and radius changes. Hovering a circle highlights it with a blue stroke, and removal animations shrink and delete circles. Built with D3 v5, the example uses data joins, `transition()`, and `scaleOrdinal` for color and size, with `mouseover` and `mouseout` events triggering state updates.

AAbhijeet Panda

86% match

Loading thumbnail…

hovering test

Five circles represent fruit in an SVG bowl, using d3.scaleOrdinal for color and radius mapping. Hovering over a circle highlights it with a black stroke via mouseover and mouseout events. Circles animate in and out with a one-second d3 transition, while the dataset changes over time by removing fruit and mutating one apple into a lemon. Rendering uses d3 v5 with the enter, merge, and exit pattern for data joins.

Aabcz1234

86% match

Loading thumbnail…

practice10--click

This example shows a fruit bowl visualization where apples and lemons are rendered as colored circles, and clicking a fruit highlights it with a black stroke while updating a selection state. The code uses D3.js v5 with a data join pattern to bind fruit objects to SVG circles, applying ordinal scales for color and radius, and transitions to animate circles entering, exiting, and changing size. A timer sequence removes apples, replaces one with a lemon, and filters data to demonstrate dynamic updates. The interaction and rendering rely on `d3.select`, `scaleOrdinal`, and `transition` APIs.

DDi Cui

86% match

Loading thumbnail…

Hover to select

A row of apples appears in an SVG canvas, with hover highlighting a fruit by adding a black stroke. As time passes, apples are removed and one becomes a lemon, with D3 transitions animating the circle radii and positions. The example uses `d3.scaleOrdinal` for color and radius mapping, and binds data with key functions to update and exit elements smoothly.

RRoger Yu-Hsiang Lo

86% match

Loading thumbnail…

Hover to Select

This example demonstrates interactive selection in an animated fruit bowl visualization. Rendered as SVG circles with D3 transitions, apples and lemons move and resize smoothly while mouseover events highlight a selected fruit with a black stroke. The code uses D3 v5’s `scaleOrdinal` for color and radius mapping, and `selection.on` handlers with a stateful `selectedFruit` variable to trigger re-rendering via `fruitBowl`. Data updates through timed mutations, including removing and replacing fruits, show enter, update, and exit transitions.

AArriannePandaraoan

86% match

Loading thumbnail…

Hover to Select - Bowl of Fruit

Eight apples and lemons rendered as colored circles in a black SVG bowl demonstrate direct manipulation through hover selection. D3 v5 code uses `scaleOrdinal`, `attr`, and `.on('mouseover')` to interactively highlight the hovered fruit with a white stroke. The `transition().duration()` method animates circular elements as fruit is eaten, added, or changed via timeouts. The example showcases state management through `setSelectedFruit` and data-driven rendering with local module imports.

JJames Malvern

85% match

Loading thumbnail…

Hover to Select, Click apple to convert to lemon and click lemon to delete

An interactive D3 v5 visualization presents a bowl of five apples rendered as SVG circles. Hovering over a fruit selects it with a black stroke. Clicking an apple animates its color and radius to transform into a lemon, while clicking a lemon removes it from the bowl with a shrinking transition. The code uses `scaleOrdinal` for color and radius mappings, and `transition().duration(1000)` for smooth animations, driven by data join with enter/update/exit selections.

Ccsroysudarshan

85% match