Skip to main content
SimilarExport ZIP
100%

Fork of MIAGE base

✓ Published0🌍 Public
PPedram
Last edited Dec 1, 2022
Created on Nov 19, 2022
Forked from MIAGE base

This example demonstrates a draggable HTML div alongside an interactive SVG scene built with React and D3 v5. The SVG contains colored circles that animate on click and double-click events, and a separate rectangle that appends new colored rectangles as the mouse moves across the body. The React component tracks mouse position to render a circle, while D3 functions handle SVG manipulation and transitions. The page includes a draggable header, using CSS and JavaScript for the drag behavior, and displays a message element updated with D3 selectors.

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

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
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
84% 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
84% 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
84% 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
83% 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
83% 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
82% match