d3 testground

100%

✓ Published0🌍 Public

Last edited Feb 28, 2021

Created on Feb 28, 2021

This example demonstrates a static SVG face created with D3 version 6, showing three circles arranged as a large yellow head with two smaller black eyes. The rendering uses plain SVG elements inside an HTML page, with D3 loaded via CDN and the `select` API imported from `d3`. The code includes a YouTube tutorial link, indicating its purpose as a learning sandbox. No interactive behavior or data binding occurs; the visualization relies solely on hardcoded circle attributes.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 Testing

A hand-drawn-style face constructed from three SVG circles, rendered via static HTML and CSS within a D3-less page title. The code directly specifies circle positions, radii, and styling attributes—a yellow head with a thick black stroke, plus two black eyes—without using any D3 APIs or JavaScript logic. The example serves as a minimal visual test of SVG shape rendering and basic geometry layout, with the viewport set to 960 by 500 pixels and overflow hidden.

AArne Bab

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

86% match

Loading thumbnail…

D3 textbook

This example shows a simple SVG face built from two circles with a black border and eye, rendered on a yellow background. It demonstrates basic D3 v7 selection and attribute-setting methods, using `select` on the existing SVG element and appending circle shapes with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The code reads the SVG’s height and width attributes to position the shapes relative to the viewport center. The visualization relies entirely on static SVG markup created programmatically, with no data binding or interactive behavior.

Ppinlin0816157

85% match

Loading thumbnail…

Fork of D3 Starter

A simple SVG face built from three circles—a yellow head with two smaller black eyes—demonstrates basic D3 version 7 usage. The markup is drawn directly in the HTML, not generated by data joins. The accompanying JavaScript imports `select` from the `d3` package and sets static text on the page, while a YouTube tutorial explains D3 fundamentals. The example shows minimal setup without interactive or animated behavior, focusing on initializing a D3 project and rendering static SVG shapes.

DDaljeetSingh1320

83% match

Loading thumbnail…

Hello D3 Version 6

This example shows a yellow SVG circle with blinking eyes and a mouth, created as an introductory demonstration of D3 version 6. It renders a face at the center of an SVG canvas using `d3.select` to append circles and a path. The eyes use chained `transition().duration(2000)` calls to animate their radius between 20 and 5 pixels, while the mouth is drawn with `d3.arc` using specified inner and outer radii and angles. The page also includes a separate `index.js` file that uses `select` from the D3 module to set body text.

Bbini-i

83% match

Loading thumbnail…

D3

This example renders a simple static SVG illustration of a yellow face with two eyes, directly defined in an HTML document. It uses no external libraries or datasets, only raw SVG elements (`<svg>`, `<circle>`) styled with CSS properties like `fill`, `stroke`, and `stroke-width`. The circles are positioned absolutely via `cx` and `cy` attributes, and the page sets `overflow:hidden` to suppress scrollbars. The visualization demonstrates basic vector graphics composition without any JavaScript or dynamic data processing.

KKrishna

83% match

Loading thumbnail…

Face D3.js

This example renders a simple face using SVG circles. A large yellow circle forms the head, with a smaller black circle serving as the left eye, positioned at the center of the canvas. The code uses D3.js version 5's selection and append methods to create and style the shapes, reading the SVG’s width and height attributes to center elements. The styling is supplemented by an external CSS file that defines stroke and color properties for the shapes.

Iimoutidi

83% match

Loading thumbnail…

Face D3

A yellow circle on a gray SVG canvas represents a simple face. Rendered as a static SVG graphic, the example demonstrates basic D3.js selection and manipulation using `d3.select` and `d3.append`. The circle is centered within a 960 by 500 viewport and styled with a yellow fill via the `.style` method. This minimal visualization highlights core D3 v5 API usage for creating and positioning SVG shapes without any interactive or animated behavior.

Ggromyaex

82% match