Hello VizHub

100%

✓ Published0🌍 Public

Last edited Oct 19, 2019

Created on Oct 10, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

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()`.

Ccindy203cc

88% match

Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

EEfratVil

85% match

Loading thumbnail…

Hello VizHub!

This example displays a single blue circle centered on an SVG canvas, demonstrating the basic workflow of creating and positioning shapes with D3. The code imports the `select` function from D3 v5, appends a `circle` element to the SVG, and sets its radius and center coordinates using the `attr` method. The SVG is sized at 960 by 500, matching the viewport dimensions used for the circle's position. The visualization serves as a minimal, foundational template for D3-based projects, with styling defined in a separate CSS file that imports the Ubuntu font.

Aabreudude

84% match

Loading thumbnail…

Circle Dragging I

This example shows a set of colored circles scattered across an SVG canvas, which users can drag with the mouse. Each circle’s position is stored as x and y properties in its data object, and those values update live during the drag. The code uses d3.select and d3.drag from the d3-drag module to handle the interaction, attaching event handlers for start, drag, and end. At drag start, the circle is raised to the foreground with `.raise()` and gets a black stroke via the `.active` class; the stroke is removed on release. The circles are rendered as SVG `<circle>` elements, colored with a categorical scheme from `d3.scaleOrdinal` and `d3.schemeCategory20`, with random initial positions computed from the SVG’s dimensions.

Mmbostock

83% match

Loading thumbnail…

Hello VizHub 3

This example demonstrates a dynamic scatter plot rendered using D3 version 7.8.5, where circles appear one by one with an animated radius expansion. The visualization reads data from a CSV file containing circle positions, sizes, and colors, and uses the D3 `transition` API with `easeLinear` for both slow entrance animations and fast updates. A grid of ten blue squares animates across the top of the canvas, while the circles use `mix-blend-mode: multiply` for overlapping color effects. The SVG is sized to the container’s dimensions and the entire scene animates on a yellow-green background.

CCurran Kelleher

83% match

Loading thumbnail…

Hello VizHub

A minimal D3.js example demonstrates how to render a single purple circle into an SVG canvas using d3.select and append operations. The page loads D3 v5 from a CDN, imports a local ES6 module for a message, and displays a static 50x50 pixel circle with a 25 pixel radius centered in the viewport. The visualization shows basic DOM manipulation and SVG element creation without data binding or interaction.

NNolin29

83% match

Loading thumbnail…

Circle Dragging II

This example shows a canvas-based visualization where users can drag any of twenty randomly positioned circles. It uses the d3.drag module with a custom subject function for hit-testing, checking if the pointer falls within a circle’s radius. During a drag, the circle is reordered to the foreground, marked with a temporary stroke, and its position updates, triggering a redraw via render listeners. The implementation relies on D3 v4’s event handling, Canvas’s 2D context, and d3.scaleOrdinal with the schemeCategory20 palette for circle fill colors, producing smooth, interactive feedback.

Mmbostock

82% match

Loading thumbnail…

Hello VizHub

A single yellow circle with a black outline fills the center of an SVG canvas, demonstrating the basic setup of a D3.js visualization. The example uses the `d3.select` API to target the SVG element, then appends a circle element with radius and center coordinates derived from the SVG's width and height attributes. The visualization renders through SVG, with the circle's fill and stroke set via `.attr()`. It serves as a minimal template for creating interactive web graphics with D3 version 5.

Hhtt102

82% match