MIAGE base

100%

✓ Published34🌍 Public

Last edited Mar 20, 2023

Created on Sep 18, 2022

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.

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…

Fork of MIAGE base

This example demonstrates interactive SVG rendering with D3 v5, showing three colored circles that respond to user input. It imports D3 modules like `select` and `csv`, along with a local ES6 module exporting a text message. The code creates circles with mouseover and mouseout handlers, plus a clickable rectangle that triggers a `transition()` animation moving the red circle. Styling is applied through CSS hover effects, and the visualization displays a prominent message from `myMessage.js`.

SSam-010

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

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

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

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

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

85% match

Loading thumbnail…

MIAGE base

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.

MMathieuZenone

85% match

Loading thumbnail…

Fork of MIAGE base-TD1

An interactive D3.js example displays a cluster of colored circles on an SVG canvas, with a button and rectangle that trigger animation and mouseover effects. The circles, including a red one that turns black on hover, respond to user interaction, while a yellow circle changes color on mouseover. The code imports from D3 and local ES6 modules, uses SVG attributes for positioning, and demonstrates transitions with `transition().duration()` for animated movement.

GGinnWG

85% match