Skip to main content
SimilarExport ZIP
100%

SVG image try!

✓ Published0🌍 Public
IIgathi
Last edited Aug 14, 2019
Created on Aug 14, 2019

This example shows three colored circles labeled with fruit names, where hovering over a circle displays a corresponding image and moving the mouse away hides it with a white rectangle overlay. The visualization uses D3.js v4 to bind fruit data to SVG circles and text labels, then attaches `mouseover` and `mouseout` events to trigger custom `redraw` and `eraseRedraw` functions. Images are appended as SVG `<image>` elements using `svg.append("svg:image")`, while the erasing effect is achieved by drawing a white `<rect>` over the displayed image, relying on D3’s selection and data-join methods for static rendering.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

Interaction With Unidirectional Data Flow - Mouse Hover

Five circles representing fruit are rendered as SVG elements inside a 960-by-500 canvas, with each circle’s radius and color determined by its type (orange or lemon) using D3’s `scaleOrdinal`. The visualization demonstrates unidirectional data flow: hovering a circle triggers a `mouseover` event that calls `setSelectedId` to update a selected-id state, which then re-renders the chart, adding a blue stroke to the hovered circle. A `d3.range` generates initial orange fruits, while a lemon is appended, and timed mutations remove fruits and change a type, all handled through D3’s `transition` API for animated updates.

Ccarlos157oliveira
81% match
Loading thumbnail…

hover to select

Five fruit circles rendered in SVG respond to hover by toggling a black stroke around the selected fruit. The example cycles through data updates—removing fruits, changing a plum into a lemon, and filtering the array—while `d3.transition` animates circle radii to zero for exits. Fruit type maps to color and radius via `d3.scaleOrdinal`, and the selection state drives re-rendering through a custom `fruitBowl` function.

Bbencestubnya
80% match
Loading thumbnail…

HTML Starter

This example shows a simple interactive SVG scene with three labeled fruit circles. Hovering over a circle displays its name as text near the cursor. The code uses D3.js v5 selections and event handlers (`on("mouseover")`, `on("mouseout")`) to append and remove text elements. It also includes a static blue circle defined directly in the HTML.

RRomeeCode
80% match
Loading thumbnail…

Hover to Select

Five fruit circles render in an SVG, initially as apples that animate in with a staggered radius transition. Hovering over a circle selects it, adding a black stroke, while mouseout clears the selection. The code uses D3 v6 with a data join, `scaleOrdinal` for color and size, and `transition.attr` to animate enter, update, and exit states. A `setSelectedFruit` callback updates the selection, triggering re-renders that also remove or replace fruit over time.

WWayne716
79% match
Loading thumbnail…

Hovering

Five circles represent fruit as apples and lemons, with size and color encoding fruit type. Hovering a circle highlights it with a black outline, updating the selected fruit state. The example demonstrates data joins with enter, update, and exit selections, using `transition` for animated radius changes when fruits are added, removed, or change type. SVGs are rendered with D3 v5.

Ccpsshan
79% match
Loading thumbnail…

hover to select d3

This example demonstrates an interactive fruit bowl visualization where hovering over circles selects them, highlighting the chosen fruit with a black stroke. The code loads D3 v6 via UNPKG and uses local ES6 modules, with `fruitBowl.js` defining a reusable chart function that leverages `scaleOrdinal` for color and radius mapping. Data comes from `data.csv`, though the visualization primarily uses generated fruit objects. SVG circles transition smoothly between states using `transition().duration(1000)`, while mouse events trigger state changes and re-rendering. The example also shows enter, update, and exit selections as fruits are dynamically removed or modified over time.

RRITUZZ
79% match
Loading thumbnail…

Bowl of Fruit -Hover to Select

This interactive SVG example uses React and D3 v5 to display a bowl of fruit as circles, with apples and lemons represented by red and yellow circles of different sizes. Hovering over any fruit highlights it with a black stroke, and selecting a fruit updates the visualization. The code uses D3's `scaleOrdinal` for color and radius scales, and animates circle radii with `transition().duration()` when fruits are added, removed, or change type. The data is a static array of fruit objects, with timed events removing or modifying fruits.

SScott Rapponotti
79% match