Skip to main content
SimilarExport ZIP
100%

face

✓ Published0🌍 Public
李李文韬
Last edited Mar 15, 2021
Created on Mar 15, 2021
Forked from HTML Cars Report

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.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

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

lets make a face with d3

This example demonstrates a simple face constructed from two yellow circles with orange strokes on a red background within an SVG canvas. It shows how to set SVG attributes directly using D3's `select` method to append and style circles based on the existing `width` and `height` attributes. The code reads those dimensions using `attr` and positions the outer circle at the center while the inner circle is placed at fixed coordinates, highlighting basic D3 v5 selection and attribute manipulation.

Aanimro
89% match
Loading thumbnail…

let's make a face

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.

Sshb02192
89% match
Loading thumbnail…

Make a Face

This example renders a simple face from primitive SVG shapes. A yellow circle is centered on a purple background, with its radius equal to half the SVG’s height. The code uses D3 v5’s `select` to grab the `svg` element and reads its `width` and `height` attributes to position the circle dynamically. The visualization demonstrates basic SVG attribute manipulation with D3, creating a clean, minimal composition without data or interaction.

SSophia Murage
89% 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
89% match
Loading thumbnail…

Face

A cheerful yellow circle sits at the center of an SVG canvas, representing a face. A single black arc, drawn using d3.arc, forms a mouth in the upper-right quadrant of the circle. The example renders with React 17, using JSX to create the SVG elements, while D3 v7 provides the arc path generator. The face has no eyes or other features, and the mouth arc uses an inner radius of 0 and outer radius of 100 with a fixed start and end angle.

HHazem Fahmi
88% match
Loading thumbnail…

Lets make a face

A yellow circle with a black outline fills the center of an SVG canvas, representing a simple, abstract face. The example demonstrates basic D3.js shape creation and attribute manipulation in version 5. The code uses `d3.select` to target the SVG element, then appends a circle and sets its radius, x and y coordinates via `attr`, with hard-coded pixel values derived from the SVG's width and height attributes. Rendering is done through SVG, with the page structure and styles defined in HTML and CSS.

MMari Roberts
88% match
Loading thumbnail…

face

A static SVG face rendered directly in HTML shows three circles: a large yellow head with an orange outline, and two smaller black eyes with white outlines. The code uses no JavaScript libraries or data sources, relying solely on hardcoded SVG circle elements with explicit coordinates, radii, and stroke properties. The rendering is fixed within a 960 by 550 pixel viewport, with the face positioned toward the left side of the canvas.

MMiguel A Palma
88% match