Skip to main content
SimilarExport ZIP
100%

Trying stuff out

✓ Published0🌍 Public
NNathanGBIM
Last edited Jun 16, 2020
Created on Jun 11, 2020
Forked from Trying stuff out

This example shows a simple SVG face created with D3.js, featuring a mouth drawn using the `arc()` API and a yellow rectangle appended inside a path via the custom `createArc` function. The face is centered in a 960×500 viewport using SVG transforms. It demonstrates basic D3 v5 selection and data-joining techniques, importing `select` and `arc` from the D3 library and rendering entirely in SVG markup.

AI-generated description

My first step with d3.

MIT Licensed

Similar vizzes

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

Lets make a face

A simple face is drawn entirely with SVG shapes in a 960-by-500 viewport, using a yellow circle for the head, two black circles for eyes, and a path generated by `d3.arc()` for the mouth. The code selects the SVG element with `d3.select` and sets each shape’s attributes—`r`, `cx`, `cy`, `fill`, and `stroke`—explicitly. The mouth is positioned relative to a `<g>` group translated to (250,200), and the arc spans from angle 0 to π. This example demonstrates basic SVG rendering with static D3 v5 selections, without data binding or interaction.

Ppvhch
86% match
Loading thumbnail…

Lets make a face

A simple face is drawn entirely with SVG shapes in a 960-by-500 viewport, using a yellow circle for the head, two black circles for eyes, and a path generated by `d3.arc()` for the mouth. The code selects the SVG element with `d3.select` and sets each shape’s attributes—`r`, `cx`, `cy`, `fill`, and `stroke`—explicitly. The mouth is positioned relative to a `<g>` group translated to (250,200), and the arc spans from angle 0 to π. This example demonstrates basic SVG rendering with static D3 v5 selections, without data binding or interaction.

Ppvhch
86% match
Loading thumbnail…

Let's make a face with D3.js

A simple D3.js example draws a cartoon face using SVG shapes. The code selects an SVG element and appends a yellow circle for the face, two black circles for eyes, and a path for the mouth. The mouth uses `d3.arc()` to generate a partial ring based on specified inner and outer radii and start and end angles. The example demonstrates importing `select` and `arc` from the d3 module and loading D3 v7 via UNPKG.

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

D3 first try

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.

JJack Wu
85% match
Loading thumbnail…

Lets make a face with d3.js

This example shows a simple yellow face constructed entirely with SVG shapes, using D3.js to generate a circular head, two eyes, and an arc-based mouth centered on the canvas. The code imports `select` and `arc` from the d3 module, manipulates SVG attributes directly, and positions elements based on the viewport height and width. The mouth uses the `arc` generator with specified inner and outer radii and angular ranges, while circles are appended for the face and eyes. The example demonstrates basic D3 selection, attribute setting, and generator usage without any data binding.

MMonisha Gopinath
85% match
Loading thumbnail…

Let's make a face with D3 new

This example draws a stylized face using basic SVG shapes and D3’s arc generator. It shows a yellow circle for the head, two black circles for eyes, and a mouth formed by a path created with D3’s `arc()` function, which specifies inner and outer radii along with start and end angles. The code uses D3 v5 to select and append elements to the SVG, applying translations for centering. The rendering approach is entirely SVG-based, with no external data source.

Mmirna981
85% match