Fork of MIAGE base

100%

Fork of MIAGE base

✓ Published0🌍 Public

Last edited Sep 28, 2022

Created on Sep 19, 2022

This example demonstrates how to build interactive SVG graphics using D3.js v5, showing basic shape drawing, styling, and event handling. Three separate exercises display circles with different colors and positions, while a fourth adds mouseover interaction that changes a circle's fill color. The visualization loads population data from a CSV file using D3's `csv` function and logs country names and population values to the console. The code imports D3 functions like `select` and `csv` from local ES6 modules, and uses D3's DOM manipulation methods to create and modify SVG elements.

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

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

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

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

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

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

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

84% match

Loading thumbnail…

Fork of MIAGE base

This example loads a CSV file of global population data, showing a bar chart where each country is represented by a static rectangle of fixed width and height. It imports D3 v5 functions like `select` and `csv` and renders shapes in an SVG. The code builds a single group element with rectangles, while the console logs each country’s name and 2022 population, demonstrating basic data import and SVG rendering with D3.

Aabdeldev504

83% match