Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Oct 20, 2022

Created on Oct 20, 2022

This example demonstrates interactive draggable circles on an SVG canvas using D3.js v5. Seven data points are rendered as translucent green circles with purple strokes, and users can drag them around the 500x500 pixel space. The code imports D3 modules via ES6 syntax, uses `d3.drag()` for interaction, and `d3.pointer()` to track mouse coordinates. It also showcases local module imports and DOM selection through `select()`.

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…

Hello VizHub

This example demonstrates interactive circles on an SVG canvas, where users can drag each circle to reposition it or click to trigger a temporary scale-and-color animation. The visualization highlights D3 v5’s drag behavior and transition system, using chained transitions to enlarge circles to black and then restore their original size and color. It generates 20 randomly positioned circles with a fixed radius, colored via the `d3.schemeCategory10` palette. The code relies on `d3.create`, `d3.range`, `d3.drag`, and `selectAll().join()` to manage dynamic elements and event handling.

Hhvindshoej

88% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates basic SVG rendering and interactive dragging in D3 v7. It uses `d3.select` to append an SVG canvas and randomly positions 20 circles across a 960×500 coordinate space. The circles are rendered with `data` joins and the `join("circle")` method. Drag behavior is implemented with `d3.drag()`, which handles the `start`, `drag`, and `end` events to update circle positions via `event.x` and `event.y`. The code imports helpers such as `range`, `select`, and `drag` from the D3 module.

NNarottam Medhora

84% match

Loading thumbnail…

Fork of Hello VizHub

A single static circle is rendered in the center of an SVG canvas, sized at 480, 250, with a radius of 250. The visualization uses D3 v5 to select the root SVG element and append a circle shape, setting its position and size through chained `attr` calls. The SVG canvas is fixed at 960 by 500 pixels, and the page includes minimal CSS to remove body margins and hide overflow. The example demonstrates basic SVG manipulation with D3, printing the canvas width to the console.

AAbhi1410-lab

83% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a minimal D3.js visualization that draws two thick lines on an SVG canvas—a black line from (100,100) to (200,200) and a blue path from (200,200) to (400,450). It also displays the text “Hello VizHub!” centered in a div using D3’s `select` function. The code imports D3 v5 from UNPKG and a local ES6 module, showcasing modular JavaScript and basic SVG shape rendering.

SStolasIn

83% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub projects combine D3.js with local ES6 modules and external CDN resources. The page renders an SVG container with a single static circle element, while D3’s `select` function from the `d3` package is imported to manipulate the DOM. The code loads D3 v5 via UNPKG, links a local stylesheet, and references a custom `myMessage.js` module, illustrating modular project structure. The visualization itself is minimal, showing only the circle shape without data mapping or interactive behavior.

Kkishan-97

83% match

Loading thumbnail…

Fork of Hello VizHub

This example displays two large SVG circles and a text message reading "Hello VizHub!" It demonstrates how to set up a VizHub project using D3 v5, loaded from UNPKG. The code imports the `select` function from D3 to update the text of an HTML div, and also imports a local ES6 module to supply the message string. It shows a basic SVG rendering approach with static shapes.

Ggaryz1997

83% match

Loading thumbnail…

Fork of Fork of Fork of Hello VizHub : Making circles 1

This example displays 150 randomly generated circles scattered across an SVG canvas. The code uses D3 v5 APIs such as `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` to map data values to positions and colors. Each circle’s radius, x-coordinate, and y-coordinate are derived from the random data multiplied by additional random factors. The circles are rendered with semi-transparent fills and strokes using RGB strings, demonstrating basic data binding and SVG element creation.

Iiamsrihari28

82% match

Loading thumbnail…

Fork of Hello VizHub 3

A fork example demonstrates VizHub 3's live-editing capabilities: circles representing CSV data (x, y, radius, color) animate into place with staggered delays, while blue squares form a static row above. D3 7.6.1 handles the SVG rendering; `select`, `transition`, and `easeLinear` drive the enter/update/exit animations, and `mix-blend-mode` in CSS multiplies overlapping shapes.

NNita

82% match