Skip to main content
SimilarExport ZIP
100%

Data Visualization with D3 - Smiley Part I

✓ Published1🌍 Public
AAurore Paligot
Last edited Jun 15, 2021
Created on Jun 15, 2021
Forked from HTML Starter

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.

AI-generated description

Data Visualization with D3 - Smiley Part I

MIT Licensed

Similar vizzes

Loading thumbnail…

DataViz D3 - Smiley Face Part I

This example builds a static smiley face using an SVG circle for the face outline and two additional circles for the eyes, rendered directly in an HTML page with inline CSS. The code uses no external libraries, instead relying on hard-coded SVG coordinates and attributes like `cx`, `cy`, and `r` to position the shapes. The face is centered within a 960 by 500 pixel viewport, with the eyes placed symmetrically around the horizontal center. The rendering approach is purely SVG markup, with the body’s margin removed and overflow hidden for a clean, full-window display.

Jjinjuta.s.au@gmail.com
90% match
Loading thumbnail…

Fork of DataViz D3 - Smiley Face Part I

This example demonstrates the first half of a smiley face using only basic SVG shapes, rendered directly in an HTML page. It shows a yellow circle with a black outline as the face, along with two smaller black circles for the eyes, but omits the mouth to leave the expression incomplete. The visualization relies on hard-coded SVG elements—a `<circle>` for the head and two for the eyes—placed within a 960 by 500 viewport, with styling controlled by inline attributes such as `fill`, `stroke`, and `stroke-width`. No external libraries or data are used; the code is plain HTML and CSS, with the body margin reset for full-screen display.

Jjanakadvani11@gmail.com
89% 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
89% match
Loading thumbnail…

Smiley Face Part I

This example builds a simple smiley face using static SVG shapes. It shows three yellow circles—one large face and two smaller eyes—outlined in black, all positioned on a blank canvas. The visualization relies on raw SVG elements declared directly in the HTML, using circle tags with explicit cx, cy, r, fill, stroke, and stroke-width attributes. No JavaScript libraries or data sources are involved; the rendering is purely declarative markup displayed in an iframe.

FFeddzle
88% match
Loading thumbnail…

Smiley Face Part 1

This example presents a static SVG smiley face composed of a large yellow circle with a black outline, two smaller circles for eyes, and a mouth drawn as a semi-circular arc. The visualization is built using React and D3 v5, with dimensions and positions calculated from the width and height of the canvas. The mouth is generated using D3’s `arc()` API, which creates an SVG path for a semicircle, while the eyes and face are drawn as basic SVG circle elements.

Kkaddindr
88% match
Loading thumbnail…

D3.js - Smiley Face

A yellow smiley face drawn entirely with SVG elements, including circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. The face is centered within a 960×500 SVG canvas using D3.js selections and transformations. Constructed with the `select` and `arc` APIs from d3.v6, the code demonstrates manual positioning through `translate` attributes rather than data binding. The static visualization uses no external data source, relying instead on fixed dimensions and offsets defined as constants.

FFaris Sufyan
88% match
Loading thumbnail…

Data Visualization with D3

This example shows a simple yellow smiley face drawn as an SVG graphic. It uses D3 v5 selections to append and style circles for the face and eyes, and an arc generator to create the mouth path. The face is centered using SVG group transforms, with hardcoded dimensions for the eye spacing and offset.

Mmesclics
88% match
Loading thumbnail…

Smiley Face Part 1

This example renders a simple smiley face using SVG primitives. The code directly creates three circle shapes, a large yellow face with a black stroke, and two smaller black circles for eyes, all positioned on a static 960 by 500 canvas. The implementation relies on raw SVG elements embedded in an HTML document, with the overall styling controlled by a small CSS block that removes margin and hides overflow. There is no interactivity or data source; the visualization is solely composed of hard-coded coordinates and attributes. This demonstrates the fundamental use of SVG shapes and basic styling without any JavaScript or charting libraries.

DDylan Doucet
88% match