Skip to main content
SimilarExport ZIP
100%

D3 first try

✓ Published0🌍 Public
JJack Wu
Last edited Feb 15, 2021
Created on Feb 15, 2021

This example demonstrates basic SVG drawing with D3, showing a yellow smiley face composed of a circle, two blue eye circles, and an arc-shaped mouth. The code uses D3 v6’s `select` and `arc` utilities, appending SVG elements within a centered group. Coordinates and dimensions come directly from the SVG’s width and height attributes, with the face centered at 960×500. The arc generator creates the mouth by specifying inner and outer radii and angular ranges. No data loading or interaction occurs; it solely illustrates static SVG shape construction.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3

This example uses D3 v5 to render a simple yellow smiley face in SVG, with black circular eyes and a mouth drawn as an arc. The code demonstrates core D3 selection and joining through `select`, chained `.attr()` methods for styling, and the `arc()` generator to create the mouth path. It sets up a group element (`g`) translated to the center of a 960×500 SVG canvas, positions elements with explicit pixel coordinates, and relies on `d3.min.js` from unpkg. The face is static, showing SVG primitives without data binding or interactivity.

AAnuj Saboo
92% match
Loading thumbnail…

Let's make a face with D3

This example renders a simple smiley face as an SVG graphic. It draws a yellow circle for the head, two black circles for the eyes, and a half-arc path for the mouth, all positioned using the SVG `width` and `height` attributes. The code uses D3 v6’s `select`, `arc`, and `append` APIs to create and transform the shapes, with the mouth arc defined by inner and outer radii and start/end angles.

Tthebeef5
92% match
Loading thumbnail…

D3-1: Making a face

A smiling face is drawn using SVG shapes, with a yellow circle for the head, black circles for eyes, and a mouth created as an arc path. The example demonstrates basic SVG element creation and positioning through D3’s `select`, `append`, and `attr` methods, along with the `arc` generator to define the mouth’s shape. Coordinates are centered by translating a group element, and dimensions are read from the SVG attributes. The code uses D3 v5 and renders entirely in SVG.

GGreenBreakers
91% match
Loading thumbnail…

D3 FACE!

This example draws a simple smiley face using D3.js and renders it as SVG. The visualization shows a yellow circle with black eyes and a mouth, all positioned using fixed coordinates derived from the SVG's width and height attributes. The code uses D3's `select` API to target the SVG element and the `arc()` generator to create the mouth path. The implementation relies on D3 v5.15.0 loaded from a CDN, with all geometric values hardcoded in JavaScript.

Bbl75d
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple smiley face using D3.js, with a yellow circle for the head, black circles for the eyes, and an arc for the mouth. The code uses D3’s `select` and `arc` APIs to create and position SVG elements, relying on the `attr` method to set coordinates and dimensions based on the SVG’s width and height. The face is rendered entirely in SVG, with no external data source, and serves as a basic introduction to DOM manipulation with D3.

FfizzleRaider7645
91% match
Loading thumbnail…

Lets make a face with D3

This example uses D3 v5 to draw a simple smiling face entirely in SVG. It appends a yellow circle for the head, two black circles for eyes, and a mouth path created with the `d3.arc` generator, using inner and outer radii with specified start and end angles. The `select` function targets the SVG element, and attribute values like height and width are read directly from the markup. No external data is loaded; all shapes are positioned based on the SVG’s dimensions and fixed pixel offsets.

Rrpadron8
91% match
Loading thumbnail…

drawing with d3

This example shows a yellow smiley face drawn with D3.js, centered in an SVG canvas with a black outline. The code demonstrates fundamental DOM manipulation by selecting the SVG element, appending a group for centering, and adding a circle with fixed attributes. Using d3.select and d3.arc from the v5 module, it sets the circle’s radius to half the SVG’s height. The rendering relies on SVG primitives, with styles defined in an external stylesheet that removes margins and hides overflow. No interactive features or animated eyebrows are implemented in the provided files.

王王神鐸
91% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a smiley face using fundamental D3.js DOM manipulation, with a yellow circle for the head, black circles for the eyes, and an arc path for the mouth. The code uses D3’s `select` and `arc` APIs to append SVG elements to an `svg` container, positioning them based on the SVG’s width and height attributes. It renders entirely as SVG in the browser, importing D3 v5 from a CDN. The example highlights basic shape creation and attribute setting without data binding or interaction.

RRadhika Ganapathy
91% match