Skip to main content
SimilarExport ZIP
100%

playground

✓ Published0🌍 Public
Ttimothee.peter@mac.com
Last edited Mar 31, 2024
Created on Mar 31, 2024

A draggable blue rounded square with two lines of white text, "Hello," and "World!", is overlaid on a larger SVG canvas. The example demonstrates creating custom SVG elements with D3.js v7 and applying basic interactivity. It uses `d3.drag()` to handle pointer events and update the square's `x` and `y` attributes during a drag. The SVG is built programmatically using DOM manipulation in `index.js`, and styles are defined in a separate CSS file.

AI-generated description

Test

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Playground

This example presents an empty SVG playground built with D3 v6, offering a blank canvas for creating and experimenting with vector graphics. The page loads the D3 library and establishes a CSS-styled body, while the accompanying JavaScript logs "Hello" and the D3 object to the console. It demonstrates a minimal setup for SVG-based data visualization, relying on D3’s core API and CSS for layout, with no pre-defined marks or data bound to the scene.

Ddabrze3@gmail.com
75% match
Loading thumbnail…

D3 Playground

This example presents a minimal D3 playground that sets up an SVG canvas and initializes the D3 library. The main JavaScript file logs a message and the d3 object to the console, while the accompanying CSS defines a basic font size and styling for a line class. The HTML structure loads D3 v6 from a CDN and links to external styles and scripts, demonstrating a simple template for building SVG visualizations with D3 and CSS. The current code does not render any data or visual elements beyond the empty SVG container.

Ddabrze3@gmail.com
74% 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
74% match
Loading thumbnail…

D3 Playground (Full)

A D3 Playground demonstrates fundamental D3.js APIs through interactive SVG manipulation. The example renders a red circle and two arc paths using the d3.arc generator, all positioned within a group element. Method chaining builds the SVG structure, while a two-second transition.attrTween rotates the group, showcasing dynamic animation. The code highlights basic D3 selection, attribute setting, and template literals for coordinate calculations in a simple HTML page.

Ddabrze3@gmail.com
74% match
Loading thumbnail…

Playground

A single unfilled SVG circle sits centered within a 960 by 500 pixel canvas on an otherwise blank HTML page. The page’s title is “Playground,” and the raw SVG markup defines the circle with a radius of 100 pixels but no fill or stroke attributes, so it renders invisibly against the default white background. The example uses no JavaScript libraries, data sets, or interaction; it demonstrates the minimal structure of an inline SVG element within a basic HTML document, as authored in the v3 source.

JJasen Jackson
74% match
Loading thumbnail…

dragPractice

A playful drag-and-drop exercise presents a teardrop-shaped node that users can move across a bordered playing field. The node responds to pointer events, translating to follow the cursor while also rotating based on its movement. Built with D3 v7, the visualization uses SVG for rendering and custom drag handlers to manage both position and rotation updates. A color scale is generated programmatically, and the interface includes a tooltip for additional interaction.

GGabriel Ing
74% match
Loading thumbnail…

Playground

This playground example renders a blank 960×500 SVG canvas and logs a numeric variable to the console. It uses D3 v7 to select the SVG element and outputs the value of `myAge` (35) via `console.log`. The page is styled with CSS that removes margins and hides overflow, and the script is loaded from an external bundle. The visualization itself displays no data or graphics, serving solely as a minimal template for testing D3 setup and console interactions.

Ssh1shk1n
73% match
Loading thumbnail…

Fork of SVG Playground

This example demonstrates a minimal SVG playground built with D3 v6, rendering a single circle element inside an SVG container. The page loads D3 via a CDN script tag and applies basic styling through an external CSS file. The code initializes a simple SVG circle with fixed radius and positioning attributes, while the accompanying JavaScript logs a message and the D3 object to the console. It serves as a template for experimenting with SVG and D3, though it does not yet include interactive or dynamic data-driven behaviors.

WWonjunJang
73% match