Skip to main content
SimilarExport ZIP
100%

let's make a face

✓ Published1🌍 Public
Sshb02192
Last edited Sep 12, 2020
Created on Sep 12, 2020
Forked from HTML cars report

This example displays a simple yellow circle with a black outline centered inside an SVG canvas, accompanied by a static list of cars below it. The visualization uses D3 v6’s `select` function to locate the SVG element and `append` a circle, with its radius and position derived from the viewport’s height and width. The circle’s fill and stroke are set via attribute chaining, while the page’s layout and typography are styled through standard CSS. The underlying data is hardcoded list items shown in plain HTML.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

let's make a face I guess

A face-shaped visualization draws a single yellow circle with a black outline, centered on an SVG canvas. The example demonstrates minimal D3 setup by selecting the root SVG element and appending a circle primitive. It uses D3 v6’s `select` and `append` methods to position and style the shape via attributes like `r`, `cx`, and `cy`, with dimensions derived from the SVG’s own width and height. The accompanying CSS defines line and highlight classes, though the visible result is purely the static circle.

TTDissaux
90% 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.

李李文韬
89% match
Loading thumbnail…

Let's make a face!

A yellow circle is drawn at the center of an SVG canvas, with its radius and position set via chained D3 selections. The example demonstrates basic SVG shape creation and attribute manipulation using D3 v5, with the circle's fill color and dimensions defined through `attr()` calls. The code imports `select` from D3 and appends a circle element to the pre-existing SVG container, while CSS styles the page background and typography.

EEK Azubuike
88% match
Loading thumbnail…

Let's make a face

A simple SVG face is drawn with a large yellow circle for the head and two smaller black circles for eyes. Built with D3 v5, the example uses `select` to target the SVG element, then appends and styles the circles with chained `attr` calls for position, radius, fill, and stroke. The coordinates are derived from the SVG’s `width` and `height` attributes to center the face, while a plain CSS file resets the page margin and hides overflow.

PPUUDI
88% 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
88% match
Loading thumbnail…

Lets make a face

This example shows a yellow circle face created with SVG, built using D3 v5 selection and attribute methods. The code appends circles to an SVG canvas, setting radius, position, fill color, and stroke properties directly through `.attr()`. It uses `d3.select` to target the SVG and reads its width and height attributes to center the face. The partially completed code includes a commented placeholder for a left eye, and the page loads D3 from a CDN with a separate stylesheet that hides overflow.

DDaniel Piqué
88% match
Loading thumbnail…

Let's make a face

This example renders a simple cartoon face using SVG shapes. A yellow circle forms the head, while two black circles serve as eyes, all positioned relative to the SVG’s width and height attributes. The code uses D3 v7’s `select` and `arc` (though only `select` is exercised) to append and style the elements. The face is drawn statically without interaction, demonstrating basic D3 selection and SVG attribute manipulation in a React-compatible bundle.

AAndreas Papastergiou
88% match
Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 and SVG to draw a simple, stylized face on a 960×500 pixel canvas. The code creates a single yellow circle with a black outline, centered both horizontally and vertically, by setting the radius to half the SVG height. It demonstrates basic SVG shape construction and attribute manipulation through D3's `select` and `append` methods, using the `attr` function to position and style the circle. No data source is involved; the visualization is purely programmatic.

PPiotrekW2
88% match