MIAGE base

100%

✓ Published0🌍 Public

Last edited Sep 19, 2022

Created on Sep 19, 2022

Three circles appear on an SVG canvas, each with a random fill color, positioned around the center. Hovering over a circle triggers a two-second d3.transition that randomly repositions it within the canvas bounds, changes its radius between 0 and 200 units, and assigns a new random hexadecimal color. The example uses D3 v5 selection and transition APIs, loaded via UNPKG, with a simple ES6 message module logging to the console.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

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

85% match

Loading thumbnail…

Fork of MIAGE base

This example displays three colored circles and a rectangle in an SVG canvas. A green circle responds to mouseover and mouseout events by changing its fill, while the red and blue circles change color on hover via CSS. Clicking the rectangle triggers a transition that moves the green circle using chained `transition` and `attr` methods. The code imports D3 v5 functions like `select`, and a local ES6 module exports a custom message displayed on the page.

Ffkara09

84% 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

82% match

Loading thumbnail…

Fork of Fork of MIAGE base

Three SVG circles, colored pink, purple, and initially unfilled, sit within a transformed group. A pink rectangle acts as a control button; clicking it triggers a two-stage animation using D3's `.transition()` and `.duration()` methods, moving the first circle and changing its fill to black on mouseover via D3 selectors. The static chart, rendered with D3 v5, also displays a text message from a local ES6 module.

JJuliette

81% match

Loading thumbnail…

Fork of MIAGE base

This example demonstrates basic D3.js v5 capabilities using SVG rendering. It creates a 960x500 SVG canvas and draws three colored circles—green, pink, and blue—positioned at different horizontal coordinates. The green circle responds to mouse hover by changing its fill color via D3 event handlers, while the pink circle uses CSS hover styling. The visualization imports D3 selection utilities and a local ES6 module that displays a "Hello MIAGE!" message in an HTML div, showcasing modular code organization with d3.select and attribute manipulation.

AAnissa Belkelfa

81% match

Loading thumbnail…

Fork of MIAGE base

This example demonstrates interactive SVG circles that change color on hover and move when a rectangle is clicked. It loads D3 v5 via UNPKG and uses `import` statements for both D3 functions like `select` and local ES6 modules. The code appends a group of three colored circles, applies CSS hover styles, and triggers a two-stage `transition` animation on the red circle. A message from a local module is displayed in the page.

RRomain

81% match

Loading thumbnail…

Fork of MIAGE base TD1

This example demonstrates fundamental D3.js interactions and animations with SVG circles and a rectangle. It shows mouseover color changes, click-triggered transitions, and CSS hover effects on shapes arranged across a 900x400 canvas. The code imports the `select` function from D3 v5 via UNPKG, appends circles and a rectangle, and uses `transition().duration()` to animate a light green circle's position when the black rectangle is clicked. A local ES6 module exports a message, though it is not displayed in the visualization.

PPLD3508A

80% match

Loading thumbnail…

Fork of MIAGE base

This example uses D3.v5 to render an interactive SVG scene with three circles and a clickable rectangle. It demonstrates importing D3’s `select` API and a custom ES6 module (`myMessage.js`) to display text. Circle interactions include a mouseover/mouseout fill change and a two-stage `transition()` animation triggered by clicking the rectangle, moving the green circle along a translated path. The chart is static data-less, with rendering handled through SVG attributes and CSS hover styles.

MMaeva B

80% match