D3.js

100%

✓ Published0🌍 Public

Last edited Jul 4, 2019

Created on Jul 4, 2019

Forked from Shapes and Colors with SVG and CSS

This example uses D3.js version 5 to draw a simple yellow face with black outlines on an SVG canvas. It demonstrates basic SVG shape creation by appending a large circle for the face, two smaller circles for eyes, and an arc path for a mouth, all transformed to center within a 960×500 viewport. The code highlights direct manipulation of SVG attributes like `r`, `cx`, `cy`, and `fill`, and constructs the mouth using an arc generator with specified inner and outer radii and angular ranges.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

91% match

Loading thumbnail…

d3

This example uses D3.js (v7) to draw a simple yellow face on an SVG canvas. The visualization shows a circle for the face, two smaller black circles for eyes, and an arc-shaped path for a mouth. The code uses D3's `select` and `append` functions to build the SVG elements, and the `arc` function to generate the mouth path with specified inner and outer radii and angular range. The entire composition is centered on the canvas using a group element with a translate transform.

HHeet Bhatt

91% match

Loading thumbnail…

Let's make a face witb D3.js!

This example uses D3.js v5 to draw a simple, stylized face within an SVG canvas. It positions a yellow circle as the head, two black circles as eyes, and a curved path as the mouth, all centered via a translated group. The code constructs the mouth using D3’s `arc` generator with specified inner and outer radii and angular range, while other shapes are created with basic SVG primitives (`circle` and `path`). The layout relies on hardcoded pixel offsets for features, and the SVG is sized at 960 by 500 pixels.

Ssslee8778960

90% match

Loading thumbnail…

Let's make a face with D3.js

This example draws a simple yellow face in an SVG canvas using D3.js v5. It centers a circle for the head, then positions two smaller circles for eyes and an arc-generated path for a mouth. The code uses D3's `select` to target the SVG element, `attr` for setting dimensions, and the `arc` API from D3's shape utilities to define the mouth path.

BBryan Liu

90% match

Loading thumbnail…

Lets make a face with d3.js

This example uses D3.js (v5) to construct a simple cartoon face directly in an SVG canvas. The code draws a yellow circle for the head, two black circles for eyes, and a path for the mouth, with the mouth generated using D3’s arc generator with specified inner and outer radii and angle ranges. All shapes are positioned relative to the SVG’s width and height, and the styles are defined in a separate CSS file. The example demonstrates basic SVG shape creation and attribute manipulation with D3’s selection and append methods.

Ddktaylor916

90% match

Loading thumbnail…

D3js practice

This example draws a simple face using D3 version 7. A yellow circle serves as the head, with two black circles for eyes, and a path created with the `d3.arc` function forms a smile. The SVG canvas is 960 by 500 pixels, and all shapes are positioned and scaled relative to these dimensions. The code demonstrates basic SVG rendering and shape manipulation with D3's selection and attribute methods.

Sshuksbhoney

90% match

Loading thumbnail…

Let's make a face with D3.js

This example uses D3.js v5 to draw a simple cartoon face in an SVG canvas, assembling circles and an arc path with basic shape attributes. The face is constructed with a yellow head circle, black eye circles spaced symmetrically, and a mouth created using the `d3.arc` generator with specified inner and outer radii and angular bounds. The code imports `select` and `arc` from D3, sets dimensions dynamically from the SVG, and positions elements relative to the viewport center. The rendering approach is purely SVG-based, with static styling applied via attributes and a minimal CSS file.

Aadelgrosso

90% match

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js v5 to build a simple cartoon face entirely with SVG shapes. It shows a yellow circle for the head, two black-outlined circles for eyes, and a curved mouth path, all centered within a 960×500 SVG canvas. The code exercises core D3 selections and the `arc` generator, computing eye spacing and mouth angles programmatically. Raw SVG attributes like `r`, `cx`, and `stroke-width` are set directly, while a group element translates all features to the canvas midpoint. The mouth’s path is produced by the `d3.arc` generator with specified inner and outer radii.

BBaxinho

90% match