Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Draggable Circles with D3-Drag

Public visualization

Viewing a saved revision (read-only)

17419350d3d04d9bb8446cf70d9fe724

Draggable Circles with D3-Drag

0 stars5🌍 Public
CCurran Kelleher
Last edited Feb 26, 2024
Created on Feb 26, 2024
Forked from Circles with D3

This example demonstrates draggable circles on a light green background. Users can click and drag any of the six colored circles, and their positions update in real time. The visualization uses D3’s `drag` behavior to listen for drag events, updating the `x` and `y` properties of the corresponding data object. Circle positions are rendered with SVG `<circle>` elements, bound to the data via a data join and refreshed through state management. The code imports `select` and `drag` from the D3 library, with initial circle coordinates and radii defined in a hardcoded array.

AI-generated description

Creating circles with D3.

Challenge

  • Fork this example
  • Modify it
  • Maybe make it Halloween themed
  • Maybe make it Christmas themed
  • Be creative

Svelte

Here's a video on how to get started with Svelte as well!