Circles!

100%

✓ Published0🌍 Public

Last edited Oct 15, 2018

Created on Oct 15, 2018

A minimal SVG canvas displays a solid grey rounded rectangle and the text "hello" on a page styled with GoMono font. The code imports `select` from `d3` and `d3Force`, though the force simulation is disabled. A commented-out block shows intended data binding for circles, while the active script defines static attributes for width and height based on the viewport, rendering the background and text via D3 v5's DOM manipulation.

AI-generated description

Circles

MIT Licensed

Similar vizzes

Loading thumbnail…

Circles with D3

This example uses D3 to draw a static set of colorful circles on a white background. The `select` function creates an SVG container, and the code binds an array of data objects to `circle` elements, setting each circle’s position, radius, and fill color via attributes. The circles vary in size and color, with an opacity of 0.708, arranged in a scattered pattern across the canvas. The implementation relies on D3’s data join method to render the shapes.

MM Hema

81% match

Loading thumbnail…

Fork of Circles with D3

This example showcases five static, semi-transparent circles scattered across an SVG canvas, each with a distinct size, position, and color. The code uses D3 v3’s `select` and data joins to bind an array of circle objects to SVG elements. Rendering is driven by setting attributes like `cx`, `cy`, `r`, and `fill` directly from the data, with a fixed opacity value of 0.5. The visualization is a minimal demonstration of D3’s declarative approach to creating simple geometric shapes from a hardcoded dataset.

DDonald Bagwell

81% match

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

81% match

Loading thumbnail…

D3_coding

A single dark circle fills the center of an SVG canvas, its radius and position computed directly from the viewport dimensions. The example demonstrates minimal D3 v5 selection and attribute manipulation, using `d3.select` to target the `svg` element and `circle.attr` to set `r`, `cx`, and `cy` based on hard-coded height and width values. Rendering occurs entirely through SVG, with no data binding or interaction. The code also links an external stylesheet and loads D3 from a CDN.

JJoshuoYang

81% match

Loading thumbnail…

Test D3

This example displays a single circle centered within an SVG canvas, sized to half the height of the 960×500 viewport. It demonstrates minimal D3.js v5 usage, where the `select` function targets the existing SVG element and `append` creates the circle shape. The circle’s radius, x-coordinate, and y-coordinate are set via the `attr` method, using the hard-coded dimensions for height and width. The page is styled with CSS, setting a monospace font and removing margins, while the circle itself is rendered with default black fill.

Aannoab

81% match

Loading thumbnail…

Circles

A field of 1,000 small circles drifts randomly across an SVG canvas, wrapping around the edges when they exit the viewport. A text label in the corner displays a live frames-per-second counter. The animation uses `d3.timer` to update each circle's `cx` and `cy` attributes every frame, with positions stored in a data array generated from `d3.range(1000)` and `Math.random`. The code runs on D3 v3 and renders purely with SVG elements.

Mmbostock

81% match

Loading thumbnail…

My Circles with D3

This example displays seven circles of varying sizes and neon colors, each with a fixed position and radius, rendered on a light background. The final state is a static composition, though the code suggests a D3 join operation to create the SVG elements. It uses the `select` API and the `join` method from D3 v7.8.5 to bind data arrays to circle elements, setting `cx`, `cy`, `r`, and `fill` attributes directly. The circle data is hardcoded, and no animation or interaction is present.

Iissam.benabid@gmail.com

80% match

Loading thumbnail…

Circles

A single grey SVG canvas displays one yellow circle centered within a red-bordered frame. The circle is drawn using the SVG `<circle>` element with a green stroke and a radius of 200 pixels, positioned relative to the canvas width and height. The example demonstrates basic SVG shape rendering in a plain HTML page using CSS for styling and inline SVG markup, with no JavaScript libraries or frameworks involved.

AAlim Bolar

80% match