Boxes

100%

✓ Published0🌍 Public

Last edited Jun 11, 2023

Created on Jun 11, 2023

This example displays two static circles on an otherwise blank SVG canvas, titled “Living on the edge.” Built with D3 version 7, the code uses the `select` function to access the body element and writes a text string, while the SVG circles are placed using hard-coded `cx`, `cy`, and `r` attributes. No data source is loaded, and no dynamic behavior or interaction occurs; the visualization simply demonstrates a minimal, initial D3 setup with basic SVG shapes.

AI-generated description

A demonstration of how to start using D3 version 6.

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

81% match

Loading thumbnail…

Circles!

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.

Rrigt

80% 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

80% match

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

78% match

Loading thumbnail…

Circles_1

A D3.js visualization renders four static shapes on an SVG canvas: two circles and two rectangles, each with hardcoded coordinates and fill colors. The circles appear at the top-left, followed by the rectangles further right and downward, demonstrating how to bind data arrays to SVG elements. The code uses d3.select, append, data, and enter to create the shapes, grouping circles into a dedicated SVG group element (`g`) before setting their positional and styling attributes via function callbacks. The example uses d3.v4 from the official CDN and displays no interactivity or animation.

MMettiHoof

78% match

Loading thumbnail…

test

This example demonstrates a minimal D3 version 6 setup by rendering two concentric SVG circles on a blue-bordered canvas. It imports the `select` function from D3 and uses it to set the body text to "Hello D3 version 7," while the circles are styled directly via CSS classes `outline_eyes` and `inline_eyes` for fill and stroke. The SVG markup defines the circles with fixed radii and coordinates, showcasing basic static shapes without data binding or interactions. A YouTube video in the README provides additional guidance on getting started with D3 v6.

Eexdus3156

78% match

Loading thumbnail…

Shapes with SVG

This example shows two colored circles in an SVG canvas, with a single black line positioned below them. The circles use solid fills of orange and blue, while the line spans from an upper-left to a lower-right coordinate. The visualization is rendered entirely through inline SVG markup in the HTML body, with no dynamic data or interaction. The code imports the `select` function from D3.js to update a message div, and an ES6 module exports a greeting string.

SSaki

78% match

Loading thumbnail…

hello

This example shows a static SVG canvas containing basic geometric shapes—a circle, a stroked rectangle, a blue line, and a black path—placed at fixed coordinates. The page demonstrates a minimal D3 setup by using the `select` API from D3 version 6 to replace the body text with a greeting. The visual output is hand-coded in HTML, with no data binding or dynamic behavior, and rendering is done via inline SVG elements. The accompanying README references a YouTube tutorial for starting with D3.

HHeet Bhatt

78% match