Skip to main content
SimilarExport ZIP
100%

drawing with d3

✓ Published0🌍 Public
王王神鐸
Last edited Apr 19, 2021
Created on Apr 19, 2021

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

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

smiley face with D3.js

This example draws a smiley face entirely with SVG shapes using D3.js v7. It creates a yellow circle for the head, two black circles for the eyes, and a mouth generated with the `d3.arc` shape generator. The arc uses `innerRadius`, `outerRadius`, and angular start/end values to form a crescent-like smile. All shapes are positioned relative to the SVG's width and height attributes, with the mouth translated to the center of the canvas.

GGreatGayatri
91% match
Loading thumbnail…

Smiley Face with D3.js

This example draws a yellow smiley face in an SVG element using D3.js v5. The face consists of a large circle for the head, two smaller circles for eyes, and a mouth created with the d3.arc generator. The code imports `select` and `arc` from the D3 module to manipulate the SVG and construct the curved mouth path. Elements are positioned relative to the center of the SVG using translation transforms, with fixed pixel offsets for eye spacing and mouth placement.

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

Let's make a face with D3.js!

This example demonstrates how to build a smiley face with D3.js, using SVG elements for rendering. It shows a yellow circle with eyes, eyebrows, and a mouth, where the eyebrows are positioned as rectangles. The code uses `d3.select`, `d3.append`, and `d3.arc` to construct the shapes, with attributes set manually for placement. The face is centered via a translation on a group element, and the mouth is drawn as an arc path. The example highlights fundamental DOM manipulation and SVG shape creation in D3.

Mminimartzz
90% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face on an SVG canvas. It draws a yellow circle at a specified coordinate using the `d3.select` and `svg.append` APIs, while setting attributes like `cx`, `cy`, and `fill` to position and style the shape. The code also defines the SVG dimensions (960x500) and starts to set the circle's radius, though the sketch is incomplete. It shows how D3’s selection and attribute methods directly create and modify SVG elements, offering a hands-on introduction to building graphics programmatically.

LLucian-jw
90% match
Loading thumbnail…

Lets make a face with with D3.JS

This example shows how to draw a simple smiley face using D3.js and SVG. It renders a yellow circular head with two black eyes and a curved mouth, all positioned within an SVG canvas that is 960 pixels wide and 500 pixels tall. The code uses D3 selections and the `arc` generator from `d3` to create the mouth shape, while other elements are drawn with basic SVG `circle` primitives. The example demonstrates coordinate manipulation with hardcoded offsets and demonstrates D3’s ability to generate complex paths with relative ease.

MMthandazo Ndhlovu
90% match
Loading thumbnail…

Smily with D3

This example renders a yellow smiley face in an SVG canvas using D3 v5. It draws a large circle for the face, two smaller circles for the eyes, and a path for the mouth, all positioned relative to the SVG’s width and height via `d3.select` and `svg.append`. The code uses D3’s `arc` import and sets circle attributes like `r`, `cx`, and `cy` directly. The smiley is centered on a 960×500 canvas, with the mouth path’s shape defined but not fully illustrated in the provided snippet.

Ssunith-kumar
90% match