Untitled

100%

✓ Published0🌍 Public

Last edited Nov 1, 2019

Created on Nov 1, 2019

Two hardcoded circles are drawn on an SVG canvas from an array of radius, center, and color values. D3.js binds the data and appends the circle elements via `selectAll` and `enter`, setting their attributes for position and fill. A “Randomize” button, when clicked, recomputes the `cx` and `cy` coordinates using `Math.random()`, shifting the circles within the 300-by-300 pixel space. The visualization demonstrates basic D3 data joins and event-driven updates without external data sources.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example demonstrates basic SVG rendering with D3 version 7, showing two static circles positioned on a 960×500 canvas. The code directly embeds SVG circle elements in the HTML, using attributes like `cx`, `cy`, and `r` to control placement and size, with the second circle given a red fill. While it includes an empty D3 import and a commented-out text selection, the visualization primarily relies on native SVG markup rather than D3’s data-joining or selection APIs. The page loads d3.min.js from the unpkg CDN, though no dynamic data or interactive behavior is currently active.

JJules Docx

83% match

Loading thumbnail…

Untitled

This example draws a single circle in an SVG using D3.js v5. The circle is appended to the root `<svg>` element and positioned with hard-coded values for its center and radius, using the `select` and `append` APIs. The circle’s radius is set to half the SVG’s height, and its x- and y-coordinates are both set to half the SVG’s height, resulting in a face-like shape centered vertically. The page loads D3 from an unpkg CDN and includes minimal CSS that hides overflow.

SShahAlvi

81% match

Loading thumbnail…

Untitled

Three circles of different sizes and colors are rendered in an SVG, each labeled with its corresponding node name and filled with a diagonal stripe pattern. The visualization uses D3 version 3 to bind data from a JSON array containing node positions, radii, labels, and colors. The code appends a pattern definition to the SVG defs and creates two overlapping circles per node: a solid color base and a striped overlay, with text positioned relative to each circle’s radius.

MMokshithabhi

81% match

Loading thumbnail…

Untitled

A constant stream of randomly generated scatter plots replaces itself every three seconds, with each frame plotting fifty circles at random coordinates, sizes, and colors. The visualization uses D3’s `select` and `join` methods to update circle and text elements in an SVG canvas. A static title and rotated axis labels accompany the shifting data, demonstrating dynamic data binding and animation via `setInterval`.

UUVarshaReddy

81% match

Loading thumbnail…

Untitled

Three semi-transparent circles overlap on a dark SVG canvas, with brown, steelblue, and green fills at 50% opacity. The circles are positioned so their intersections create blended secondary colors, demonstrating basic transparency and layering effects. The visualization uses D3.js v3 to append SVG circle elements directly to the document body, with fixed pixel coordinates for the center points and radii. The rendering is entirely client-side, with no external data source, and the geometric composition is hardcoded in the script.

YYashasvi Koul

81% match

Loading thumbnail…

Untitled

Two circles move left to right across an SVG canvas, tracing a sine wave vertically as they travel. A black line connects their current positions, forming a dynamic segment that shifts with each animation frame. The visualization uses D3’s `select`, `range`, and `join` methods to update circle attributes, while `setInterval` drives the animation loop and a custom `drawLine` function appends and removes the connecting line. Randomly generated array manipulation is also present but unused in the final rendering.

Ssubratanp

81% match

Loading thumbnail…

Untitled

A scatter plot displays 100 randomly generated points within a fixed coordinate space. Each point is rendered as a red circle on an SVG canvas, with axes labeled from 0 to 500. The visualization uses D3 v4’s `d3.scaleLinear` for scaling, `d3.axisBottom` and `d3.axisLeft` to draw the axes, and appends circles via `selectAll` and `enter`. The data is synthetic, created with `Math.random` in a loop.

Ssaipaidipalli

81% match

Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar

80% match