Fork of DataViz D3 - Smiley Face Part I

100%

Fork of DataViz D3 - Smiley Face Part I

✓ Published0🌍 Public

Last edited Mar 10, 2024

Created on Mar 10, 2024

Forked from 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.

AI-generated description

A bare minimum HTML page.

Half way towards a smiley face with HTML and CSS

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Smiley Face Part I

This example shows a simple smiley face in progress, featuring a large yellow circle with two smaller black circles representing eyes. The visualization is built with an SVG canvas and styled using basic HTML elements, including a title and header. The code uses native SVG circle elements with explicit coordinates and stroke properties, rendered directly in the browser through the D3.js v3 library. The face is incomplete, missing a mouth, as the title suggests it is only the first part of a larger design.

AAmir

90% match

Loading thumbnail…

Fork of Smiley Face Part I

This fork of “Smiley Face Part I” is a static SVG drawing of a smiling face built directly in the markup. It shows a large yellow circle with a black outline, two solid black circles for eyes, and omits the mouth, leaving the expression incomplete. The visualization uses only plain SVG elements—`circle` and `svg`—positioned with explicit `cx`, `cy`, and `r` coordinates inside a 960-by-500 viewport. It loads the D3 v7 library via a CDN but does not apply any data binding or D3 methods, relying entirely on hardcoded shapes for its rendering.

Nnth19912000

90% match

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 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

90% match

Loading thumbnail…

Fork of Smiley face part 1

This example draws a simple smiley face using SVG elements. A large yellow circle forms the head, with two smaller black circles positioned as eyes and an arc path creating the mouth. The visualization uses D3.js v6, specifically the `select` and `arc` functions, to generate the mouth shape with specified inner and outer radii and angular extents. All shapes are rendered directly in the SVG canvas at fixed coordinates relative to the center of a 960-by-500 pixel viewport.

EEunice

90% match

Loading thumbnail…

Fork of Let's Make a Face Part I

This visualization shows a simple smiley face built from three SVG circles: a large yellow face with a black outline and two smaller empty circles for eyes. The code uses plain SVG elements rendered inline in an HTML document, with the `circle` tag for each shape. It runs on D3.js version 3, though no D3-specific API calls appear—just static SVG markup. The face is centered on a 960x500 canvas, with the face positioned at (480, 250) and eyes at (360, 220) and (600, 220). The example demonstrates basic geometric composition without interactivity or animation.

KKrishna2752

89% 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

89% match

Loading thumbnail…

Fork of Data_Visualization_YellowFace_PY

This example shows a partially completed smiley face constructed from basic SVG shapes. A large green circle with a blue border serves as the face, while two smaller black circles act as eyes. The code uses D3 v7’s `select` and `arc` APIs to append a mouth path, with the arc generator defining its inner and outer radii and start/end angles. The SVG canvas is set to 960 by 500 pixels, with hardcoded coordinates positioning the elements.

Sspandhanabadekol

89% match