Skip to main content
SimilarExport ZIP
100%

D3 Make A Face

✓ Published0🌍 Public
Aanton madjid
Last edited Feb 3, 2020
Created on Feb 3, 2020
Forked from Mobil Report

This example displays a simple face made from a single yellow circle centered on a red SVG canvas, with a welcome message in the page header. The visualization uses D3 v5’s `select` and `append` APIs to create the circle, reading the SVG’s width and height attributes to position it dynamically. It demonstrates basic SVG rendering and D3 selection methods within a minimal HTML page that loads D3 from a CDN and runs JavaScript through a bundled file.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Face with D3.js

This example renders a single circle onto an SVG canvas using D3.js v5 within a React framework. The code selects the SVG element, appends a circle, and sets its radius and position. It demonstrates basic D3 selection and attribute manipulation for simple geometric shapes, though the title suggests a face-like composition is intended. The visualization relies on SVG rendering and D3’s `select` and `append` APIs.

JJacob Whitt
91% 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
90% match
Loading thumbnail…

Make a face

A single SVG circle renders as a simple face on a 960×500 canvas, centered both horizontally and vertically with a radius set to one-third of the viewport height. The example uses d3.select to append the circle to the pre-existing SVG element and d3.attr to set its position and size properties. It demonstrates the minimal setup of an SVG-based D3 visualization within an HTML page, relying on the loaded d3 v5 library for element selection and attribute manipulation.

DDimiter Zlatkov
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with a black outline forms a simple face in the center of an SVG canvas, demonstrating basic D3.js shape creation. The code uses `d3.select` to target the SVG element, reads its width and height attributes, and appends a circle with `svg.append('circle')`, setting its radius, center coordinates, fill color, and stroke. The example shows how D3 v5 manipulates SVG attributes directly to render a single geometric shape without data binding or interactivity, serving as an introductory exercise in the library’s core selection and append methods.

DD2552
90% match
Loading thumbnail…

make a face with d3.js

A simple face built from SVG shapes using D3 v5. The code creates a yellow circle with a red stroke for the head, two eyes with white pupils, and a mouth drawn as an arc path. It uses `d3.select` and `d3.arc` to position elements at fixed coordinates on a 960×500 SVG canvas. The example demonstrates basic D3 shape generation and attribute manipulation without data binding.

DDominika Modzelewska
90% match
Loading thumbnail…

make a face with d3.js

A simple face built from SVG shapes using D3 v5. The code creates a yellow circle with a red stroke for the head, two eyes with white pupils, and a mouth drawn as an arc path. It uses `d3.select` and `d3.arc` to position elements at fixed coordinates on a 960×500 SVG canvas. The example demonstrates basic D3 shape generation and attribute manipulation without data binding.

DDominika Modzelewska
90% match
Loading thumbnail…

Let's make a face with D3.js!

A face is drawn as a single circle centered within an SVG canvas, with its radius set to half the SVG's height. The example demonstrates basic D3.js v5 selection and attribute manipulation using `select`, `append`, and `attr` to position the circle dynamically based on the SVG's `width` and `height` attributes. The SVG is rendered in the browser with no external data source, focusing on simple geometric shape creation through D3's declarative API. The circle's center is computed from the SVG dimensions, and a CSS rule hides page overflow for a clean full-viewport display.

AAhmed Negm
90% match
Loading thumbnail…

Lets Make a Face with D3.js!

This example uses D3.js to draw a simple, stylized face on an SVG canvas. It renders a yellow circle as the head, two black circles of differing sizes for the eyes, and a crescent-shaped mouth built from an arc path. The visualization is constructed by directly appending SVG shapes to a group element that is translated to the canvas’s center. The code leverages D3’s `select`, `attr`, and `append` methods, along with the `arc` generator to create the mouth’s curved path, with all coordinates and dimensions set statically.

GGPOAdmin
90% match