Skip to main content
SimilarExport ZIP
100%

d3 ;)

✓ Published0🌍 Public
MMikePowar
Last edited Jan 10, 2020
Created on Jan 10, 2020

This example uses D3 version 5 and React to render a simple smiley face in SVG. It draws a yellow circle for the head, two black circles for eyes, and a path for the mouth, all positioned with hard-coded coordinates based on the SVG’s width and height. The code imports `select` and `arc` from D3, appends SVG elements via chained `.attr()` calls, and uses inline styling. No external data or interactive behavior is present.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3

A minimal SVG rendering of a smiley face, centered within a yellow circle on a black stroke. Built with React and D3 v5, the code uses `select` to target the SVG, `arc` to generate the mouth path, and direct attribute chaining with `.attr` to position the eyes and body. The face is drawn via appended SVG elements—circle nodes for the eyes and face, and a path for the mouth—calculated from the viewport dimensions.

Mmegbridge
93% match
Loading thumbnail…

D3.js Starter

This example renders a smiley face in an SVG canvas using D3.js version 5. It draws a yellow circle for the head, two black circles for the eyes, and a semi-circular path for the mouth, all positioned via width and height attributes retrieved from the SVG element. The code uses d3.select to append shapes and d3.arc to generate the mouth path, with styles defined in an external CSS file. It demonstrates basic SVG manipulation and shape generation within a React framework using D3’s selection and arc APIs.

Mmballestiero
92% match
Loading thumbnail…

Creating a Smile with D3

This example shows a smiling face built from SVG shapes using D3 version 5 with React. It draws a yellow circle with black strokes for the head, two smaller circles for eyes, and a D3 arc path for the mouth. The code demonstrates D3 selections, attribute manipulation, and the `arc` generator, with positions computed from the SVG dimensions and helpers like `eyeRadius` and `eyeSpacing`.

GGustavo Maciel
92% match
Loading thumbnail…

D3.js Starter

This example shows a simple smiley face drawn with D3.js, using a yellow circle for the head, two black circles for eyes, and an arc path for the mouth. It renders to an SVG element with fixed dimensions. The code imports `select` and `arc` from D3 v5, uses `svg.append` to create each shape, and sets attributes like `fill`, `r`, and `cx`/`cy` directly. The mouth’s path is generated by the `arc()` function with specified start and end angles. The page loads D3 from a CDN and runs the script in a React-based setup.

VVikil Lakkavatri
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…

D3.js intro!!

This example creates a cheerful smiley face entirely with SVG shapes inside a React application. The visualization uses D3 version 6 to append a large yellow circle for the face, two smaller black circles for asymmetrical eyes, and a curved path for the mouth. The mouth is generated using D3’s `arc()` function, which constructs an annular sector path. The code explicitly sets SVG attributes like `fill`, `stroke`, and `transform` to position and style each geometric element on a 960 by 500 canvas.

Eevsjg
91% match
Loading thumbnail…

D3 face

This example renders a stylized smiley face using D3.js version 5 within a React framework, drawing an SVG scene onto a 960 by 500 canvas. The code constructs a yellow circular head, black rectangular goggles with handles, and circular eyes using SVG shape elements, while employing the `d3.arc` API to generate the mouth path. Through D3 selections and attribute chaining, it positions groups and elements relative to the SVG’s center, demonstrating a static, hand-coded vector illustration.

Rreddyakshitha
91% match
Loading thumbnail…

Face with D3 js

This example shows a simple smiling face constructed from SVG shapes using D3.js version 5. The visualization draws a large yellow circle for the head, two smaller black circles for eyes, and an arc for the mouth, all positioned relative to the SVG canvas dimensions. The code uses D3’s selection API to append circles and a path, with the mouth created via the `arc()` function specifying inner and outer radii and a half-circle angular range. The smiley is rendered directly into an SVG element defined in the HTML, with all styling applied through D3 attribute methods.

Aadmk840
90% match