Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Oct 11, 2023

Created on Oct 11, 2023

This example uses D3 v7 to render a simple yellow smiley face on an SVG canvas. The code builds the face from basic shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and a path created with the `arc()` function for the mouth. An animation sequence, driven by chained `transition()` calls with a 2000-millisecond duration, moves the eyebrows down and back up. The underlying data is positional, defined by hard-coded constants like `eyeSpacing` and `eyeRadius`, directly set as SVG attributes through D3's selection and append methods.

AI-generated description

A demonstration of how to start using D3 version 7.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example shows a simple, static smiley face drawn as vector shapes in an SVG canvas. It uses the D3.js library (v7) to select the SVG element and programmatically append a large yellow circle for the face, two smaller black circles for the eyes, and a path for the mouth. The mouth is created using the `d3.arc` API, which generates an SVG path based on specified inner and outer radii and start/end angles. The code demonstrates fundamental D3 techniques for creating and positioning graphical primitives within a coordinate system.

PPhillip Yoo

93% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example uses D3 v7 to draw a simple yellow smiley face in an SVG canvas. It demonstrates basic shape creation and positioning, using `d3.select` to target the SVG element and `d3.arc` to generate the mouth path with specified inner and outer radii and angles. Circles are appended for the face and eyes with fixed radii and coordinates, while the mouth is placed in a translated group. The code shows how to compose SVG primitives with D3’s selection and path-generation APIs.

Mminaadel6600

93% match

Loading thumbnail…

Fork of Create a face with d3.js!

This example draws a yellow smiley face in SVG using D3 v7, centered within a 960×500 canvas. It constructs the face from primitive shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all positioned using transforms and hardcoded coordinates. The code employs D3’s `select` and `arc` helpers, and animates the eyebrows by chaining two `transition().duration(2000)` calls that shift the eyebrow group vertically over four seconds. The rendering is purely SVG, with no external data source.

LLavinaThorat

92% match

Loading thumbnail…

Fork of D3 Starter

This example shows a simple yellow smiley face drawn as a scalable vector graphic using D3 version 6. The face consists of a large yellow circle with two black eye circles and a mouth created via the `d3.arc` path generator. The SVG is initialized in an HTML file, and all shapes are appended programmatically using D3 selection methods like `svg.append` and `.attr`. The code demonstrates basic D3 shape construction and attribute manipulation without external data.

Mmd-Junaid

92% match

Loading thumbnail…

Fork of D3 Starter

This example shows a simple yellow circle with two elliptical eyes and a black horizontal rectangle for a mouth, forming a basic smiley face. The visualization is rendered as SVG using D3 v6, with geometric shapes positioned explicitly via pixel coordinates. The code leverages D3’s `select` method to append an SVG container and then uses `circle`, `ellipse`, and `rect` elements to construct the face. No data is loaded; all shapes are hardcoded, and the styling is applied directly through attributes like `fill` and `stroke`.

EEmanuel Alvarado Perez

92% match

Loading thumbnail…

Fork of D3 Starter

This example renders a simple yellow smiley face as an SVG graphic using React and D3 v7. It shows a circle for the face, two smaller circles for eyes, and an arc for the mouth, all positioned within a 960×500 viewport. The code uses React’s `ReactDOM.render` to mount the component, while D3’s `arc` generator calculates the mouth path with specified inner and outer radii and angle ranges. The styling applies yellow fill and black stroke via CSS.

GGerard Jongerhuis

92% match

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa

91% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows animating up and down repeatedly. The face is drawn using D3.js v5, building circles, rectangles, and a mouth path through basic DOM selection and appending. Eyebrow movement is achieved with chained `transition` calls that alternate the vertical translation of the eyebrow group over two-second intervals. The code imports `select` and `arc` from D3, computes layout from the SVG’s dimensions, and uses inline attribute settings for styling and positioning.

117761A04F1

91% match