svg

100%

✓ Published1🌍 Public

Last edited Oct 11, 2020

Created on Oct 10, 2020

This example shows a simple SVG face composed of a large yellow circle with a black outline and a smaller black circle representing an eye, centered on a 960×500 canvas. The code uses D3 v6’s `select` and `append` methods to create SVG elements, reading dimensions from the `width` and `heigth` attributes of the root `<svg>` element. The `heigth` attribute is misspelled in the HTML, but the JavaScript accesses it consistently, demonstrating basic SVG drawing with D3 selections and attribute chaining.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

HTML Starter

This example shows a simple yellow face drawn on an SVG canvas, with a large circle for the head and two smaller black circles for eyes. Using D3 v6 and React, the code selects the SVG element and appends circles with attributes for position, radius, and fill color. The dimensions are read from the SVG’s width and height attributes, and styling is applied via an external CSS file.

Vvvs1680

88% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a simple face using basic SVG shapes with D3.js. It creates a yellow circle as the head, positioned in the center of the canvas, and adds two black circles for eyes, placed symmetrically around the center. The code uses D3’s `select` and `append` APIs to manipulate the SVG elements, setting attributes like radius and fill directly. The rendering relies on D3 v6 through a bundled JavaScript file, with the SVG canvas defined at 960 by 500 pixels.

Zzhangweihua1

87% match

Loading thumbnail…

Lets make a face

This example shows a simple face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes, positioned on a blank canvas. Using D3 v5, the code selects the root SVG element and appends each circle via `select` and `append`, setting attributes like `r`, `cx`, `cy`, `fill`, and `stroke` directly. The rendering happens entirely in SVG, with static positioning rather than any data-driven or interactive behavior. The example demonstrates basic D3 selection and shape creation within a React project setup.

Jjanine-loureiro

87% match

Loading thumbnail…

D3.js Face

This example uses D3.js and React to render a simple, stylized face in an SVG. It draws a large yellow circle for the head, two black circles for the eyes, and a smiling mouth created with the `d3.arc` path generator, all centered within a 960×500 viewport. The code explicitly sets the head’s radius based on the SVG’s height, while the eyes and mouth use fixed pixel offsets and arc angles. The visualization demonstrates basic SVG shape creation and geometric positioning with D3’s `select` and `attr` methods.

Ssamwatersw15

87% match

Loading thumbnail…

D3.js

This example uses SVG and D3.js v5 to render a simple face composed of a yellow circle, two black eye circles, and a mouth drawn with an arc path. The circle is centered using a translated group element, while the eyes are positioned relative to the SVG’s width and height. The mouth is generated with D3’s `arc()` helper, specifying inner and outer radii and start and end angles. The code relies on d3-selection and d3-shape APIs, with data-driven attributes set explicitly rather than bound to a dataset.

Bbilalaamer

86% match

Loading thumbnail…

face

This example renders a simple, static face as a single yellow circle with a black outline, centered within an SVG canvas. The visualization uses D3 version 6 to select the SVG element, read its width and height attributes, and append a circle with absolute positioning. The circle’s radius, center coordinates, fill, and stroke are all set via chained `attr` calls. The underlying data is generated programmatically rather than sourced from an external file, relying on hardcoded dimensions from the SVG element itself.

李李文韬

86% match

Loading thumbnail…

Shapes with svg

This example uses D3.js to draw a yellow circle with a black stroke on an SVG canvas, representing a face with a single black eye. The code appends SVG circle elements using D3 selections, setting attributes like radius, center coordinates, and fill colors directly. The circle’s size and position are derived from the SVG’s width and height attributes, while the eye is positioned relative to those dimensions. The visualization demonstrates basic SVG shape creation and attribute manipulation through D3’s `select` and `append` methods.

TTrustPaul

86% match

Loading thumbnail…

face making with D3.js

A face composed of basic SVG shapes appears on a yellow circle with black outlined strokes, including two circular eyes and an arc-shaped mouth. The code uses D3.js v6 to select the SVG element, append circles with fixed radius and center coordinates, and construct a mouth path using the `d3.arc()` function. The rendering occurs entirely through SVG attributes, with the face centered within a 960 by 500 viewport.

Nnexus1058

86% match