Untitled

100%

✓ Published0🌍 Public

Last edited Oct 24, 2022

Created on Oct 24, 2022

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Untitled

A single black circle is rendered on a blank gray background, centered horizontally near the top of a 960 by 500 SVG canvas. The circle has a fixed radius of 100 pixels and a solid dark fill. The example demonstrates basic SVG shape creation using a direct `<circle>` element written in HTML, without any JavaScript or D3.js logic in the rendering itself. The accompanying code imports D3’s `select` function and a local ES6 module, but those are not used to draw the graphic.

Kksra7900

86% match

Loading thumbnail…

Untitled

This example shows a single, large circle rendered on a blank SVG canvas, with no interaction or animation. The visualization relies on an inline SVG element sized to 960 by 500 pixels, containing a circle with a radius of 100. The code uses plain JavaScript and CSS within an HTML page, with the SVG’s `circle` element as the only visual mark, and the page is set up with a hidden overflow. No external data or libraries are used, and the styling is minimal, focusing on the bare structure of an SVG graphic.

HHaris Vidimlic

86% match

Loading thumbnail…

Untitled

This example demonstrates a simple D3.js visualization that poses the question “Is this a circle?” and confirms the presence of a circle rendered in an SVG. The page includes a fixed circular shape with a radius of 20 pixels, positioned on an SVG canvas, alongside HTML text elements. Using d3.v3, the script selects the paragraph element and updates its text content to “This is the output from D3!”, showcasing basic DOM manipulation through D3’s selection API. The rendering relies on SVG elements defined directly in the markup.

支支良

85% match

Loading thumbnail…

Untitled

A single orange circle is rendered inside a small SVG canvas, demonstrating basic D3.js selection and manipulation. The example uses `d3.select` to target the circle element by its ID, then modifies its radius, stroke, and fill color via the `attr` and `style` methods. The code shows how D3 can directly update SVG attributes and CSS styles on existing DOM elements, with the circle initially defined in static HTML markup.

Sshabdullah05

85% match

Loading thumbnail…

Untitled

This example shows a nested set of concentric circles centered on a 550 by 550 SVG canvas, with the two largest circles filled in pale pink and thinner grey outlines marking the inner radii. The visualization uses only static SVG elements—specifically `circle` tags with explicit pixel coordinates—so no JavaScript libraries or data-binding frameworks are involved. The rendering approach relies on basic SVG attributes like `fill`, `stroke`, and `r` to create a simple radial hierarchy, suggesting a possible target for force-directed or layered layout experimentation, though no dynamic behavior is present.

AAdrSieber

85% match

Loading thumbnail…

Untitled

This example renders two overlapping circles inside an SVG container on a blank HTML page. The first circle uses default black fill, while the second is drawn with a red fill, demonstrating layering and basic SVG shape styling. The code relies solely on native SVG elements and attributes, with no external JavaScript libraries or frameworks, and is embedded directly within the HTML markup.

Nnitichote

84% match

Loading thumbnail…

Untitled

This example demonstrates basic SVG shape construction on a static HTML page, combining a diagonal line, a rounded rectangle, and a vibrant green circle within a translated group. The visualization labels the shapes as "Rectangle" and "Circle" using monospaced text, while a larger title announces "d3.js 学习 Day01" (D3.js Learning Day 01). The code relies on raw SVG elements—`line`, `rect`, `circle`, `g`, and `text`—styled with inline CSS and attributes like `transform`, `fill`, and `stroke`. No JavaScript libraries are imported; it is a pure HTML/CSS/SVG composition.

Jjexchan

84% match