Skip to main content
SimilarExport ZIP
100%

d3 start

✓ Published0🌍 Public
Ookrzysiek
Last edited Aug 25, 2018
Created on Aug 25, 2018
Forked from Face in d3

A simple SVG drawing depicts a yellow circle with a black outline, two black eyes, and a single wedge-shaped mouth segment on a 960 by 500 canvas. The D3.js v5 code uses the `select`, `append`, and `attr` APIs to construct the shapes, while a path’s `d` attribute is generated with the `arc` generator using inner and outer radii and an angle range. The illustration demonstrates basic shape creation and arc path generation in an SVG context.

AI-generated description
MIT Licensed

Similar vizzes

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

D3.js

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.

Aalihakan34
86% match
Loading thumbnail…

Fork of D3 Starter

This example shows how to begin building a simple SVG visualization with D3 version 6, rendering a yellow circle as a face with two black eyes and a half-circle mouth. The code uses the `select` and `arc` functions from D3, explicitly setting attributes like radius, position, fill, and stroke on SVG circle elements. Drawing coordinates are computed from the SVG’s width and height attributes, and the mouth is generated as a path using a D3 arc generator with defined inner and outer radii. The visualization demonstrates basic composition and styling with D3’s SVG manipulation.

Mmjglsn
86% match
Loading thumbnail…

face_d3_start

This example shows a simple cartoon face drawn with SVG, featuring a yellow circular head, two black eyes, and a curved mouth. The face is centered within a 960×500 SVG canvas. The code uses D3 v6’s `select` and `arc` APIs to construct the shapes, with the mouth built via an arc generator specifying inner and outer radii and angular extents. Colored fills and strokes are applied through SVG attributes, while a CSS rule removes page margins for full-bleed rendering.

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

d3.js

A cheerful yellow smiley face rendered with SVG, this example demonstrates fundamental d3.js drawing techniques. The visualization displays a large yellow circle with two black circular eyes and a mouth created using the d3.arc() API, which generates an arc path with specified inner and outer radii and start/end angles. The code selects an SVG container using d3.select and appends shapes using d3’s selection methods with attribute setters. All shapes are positioned using explicit coordinates within a 960x500 viewport, and the d3.v5 library is loaded via a CDN link.

SShirley Guo
85% match
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
85% match