Skip to main content
SimilarExport ZIP
100%

TestD3js Smiley Face Part1

✓ Published1🌍 Public
MMartin Straußberger
Last edited Jan 17, 2022
Created on Jan 17, 2022
Forked from Hello HTML

This example shows a simple smiley face built from three SVG circles on a yellow background, with two smaller circles representing eyes. The face is drawn using the SVG `<circle>` element, with the main face circle filled in yellow and outlined with a black stroke. The eyes are positioned using explicit `cx` and `cy` coordinates within an SVG canvas. The code relies solely on the HTML5 SVG API and does not use any JavaScript libraries or D3.js functions for rendering or interaction.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of TestD3js Smiley Face Part1

This example shows a static smiley face created with three SVG circles: a large yellow face with a black outline and two smaller black circles for eyes. The code uses only raw SVG elements within an HTML page, not any D3.js functions or data visualizations. The rendering approach is straightforward SVG markup, with the face centered at coordinates (480, 245) and a radius of 200, while the eyes are placed at (380, 215) and (590, 215) with a radius of 30. The page sets a fixed SVG size of 960 by 500 pixels.

MMartin Straußberger
92% match
Loading thumbnail…

Smiley Face Part I

A yellow circle forms the base of a smiley face, with two black circles representing eyes. The example demonstrates static SVG rendering with D3.js v7, using basic shape elements like `<circle>` and attributes for fill, stroke, and positioning. The code manually defines coordinates, with the face centered at (480, 250) and eyes placed symmetrically. No interactive or animated behavior is present; the visualization relies solely on declarative SVG markup within an HTML document.

Nnth19912000
88% match
Loading thumbnail…

Smiley face with D3

This example shows a classic smiley face drawn as a yellow circle with black eyes and a curved mouth on a transparent SVG canvas. The code uses D3 v5’s `select`, `append`, and `attr` methods to create SVG circles for the face and eyes, while the smile is rendered as a path generated by the `arc` generator with specified inner and outer radii and start/end angles. The face is centered within a 960×500 SVG element, and eye spacing and offset are controlled by numeric variables. No external data is loaded; all shapes are procedurally generated.

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

Smiley Face Part 1

This example renders a yellow smiley face in an SVG canvas using React and D3. It draws three circles for the face and eyes, plus a D3 `arc` path for the mouth, all centered on a translated group. The code uses ReactDOM to inject the markup into the page, with D3’s `arc()` API generating the mouth geometry and static dimensions defining the layout. The result is a simple, hard-coded illustration without interactivity.

Kkatebacon32
87% match
Loading thumbnail…

Data Visualization with D3 - Smiley Part I

This example shows a simple smiley face built with two-dimensional SVG shapes. It draws a large yellow circle with a red stroke for the head, plus two smaller red circles for the eyes, all placed on a 960x500 canvas. The code uses basic SVG elements—`circle`—with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, rendered directly in the browser. No JavaScript libraries or data sources are involved; the static composition demonstrates manual positioning and styling without interaction or animation.

AAurore Paligot
87% match
Loading thumbnail…

Smiley Face Part1

This example shows a simple smiley face built from three SVG circles: a large yellow head with a black outline and two smaller black eyes. The face is statically positioned at the center of a 960 by 500 pixel canvas. The visualization is created manually using raw SVG elements—`<circle>` tags—plus inline CSS to remove page margins and hide overflow. No JavaScript libraries or data sources are involved; the rendering relies entirely on the browser’s native SVG support.

GGaeun Karen Lee
87% match