Fork of MIAGE base TD1

100%

Fork of MIAGE base TD1

✓ Published0🌍 Public

Last edited Sep 19, 2022

Created on Sep 19, 2022

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.

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

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

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

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

91% match

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

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

90% match

Loading thumbnail…

Fork of MIAGE base

This fork demonstrates a modular D3 v5 setup with local ES6 imports and interactive SVG animations. Three circles are positioned around a central group, with hover effects via CSS and mouseover/out handlers, plus a clickable rectangle that triggers a chained `transition.attr` animation moving the red circle. It uses `d3.select`, `d3.csv` (unused), and `transition` APIs, with the message imported from `myMessage.js` and rendered into an HTML div.

Llanphuonglenguyen

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

88% match