Skip to main content
SimilarExport ZIP
100%

DataViz D3 - Smiley Face Part I

✓ Published2🌍 Public
Jjinjuta.s.au@gmail.com
Last edited Mar 10, 2024
Created on Mar 10, 2024
Forked from Hello HTML

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.

AI-generated description

A bare minimum HTML page.

Half way towards a smiley face with HTML and CSS

MIT Licensed

Similar vizzes

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

DataViz D3 - Smiley Face Part II (React.js)

This example uses React.js to render a static smiley face visualization in SVG, building on the “Smiley Face” series. It shows a yellow circle with a thick black stroke for the face, accompanied by two dark eye circles positioned symmetrically around the center. The code explicitly uses React 16.9 production builds via unpkg, and renders the shapes through JSX-style SVG elements (`<circle>`). The rendering approach is purely declarative, with no data source or interactivity, relying on hardcoded coordinates for the face and eyes to demonstrate React’s component-based DOM updates.

Jjinjuta.s.au@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
86% 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
86% match
Loading thumbnail…

Smiley Face Part 1

This example presents a static SVG rendering of a smiling face, featuring a large yellow circle with a black outline for the head and two smaller filled circles for the eyes. The visualization draws its shapes declaratively using SVG elements—specifically three `<circle>` tags—directly embedded in the HTML body. The first circle defines the face with explicit fill and stroke attributes, while the latter two circles position the eyes without additional styling. The code uses plain HTML and SVG markup, with no external libraries or JavaScript, and the page is set to hide overflow. The data source is the hardcoded coordinates within the SVG viewport.

Zzhangwbhi
86% match
Loading thumbnail…

D3 Visualization course

A simple SVG illustration of a smiley face built directly in HTML. The code uses two concentric circles to form the face and two smaller circles for eyes, all rendered statically without any JavaScript or D3 logic. It demonstrates a bare-bones setup with CSS styling for the page and SVG attributes for shape properties like radius, position, fill, and stroke, serving as a minimal starting point for a visualization course.

IIsh Siva
86% match
Loading thumbnail…

My Smiley Face using D3.js!

This example renders a simple smiley face in an SVG container using D3.js v5. The visualization draws a large red circle for the face, two small black circles for eyes, and an arc for the mouth, all positioned relative to the center of a 960x500 canvas. The code uses D3’s `select` to target the SVG element and `arc` to generate the mouth’s path geometry. The background is set to green via an external stylesheet, with the face elements created entirely through SVG primitives.

Aanushatod
86% match