Dataviz 2020: Ep5 - 1. Smiley Face Part 1 (Half face with only HTML)

100%

Dataviz 2020: Ep5 - 1. Smiley Face Part 1 (Half face with only HTML)

✓ Published1🌍 Public

Last edited May 31, 2021

Created on Apr 7, 2021

A minimalist web page uses HTML, CSS, and JavaScript to draw a half smiley face with SVG circles. The page renders a large yellow circle with a black stroke as the face, plus two smaller black circles as eyes, all positioned within an SVG viewport. The code directly specifies circle coordinates and radii in the markup, with no data or external libraries, demonstrating a basic static vector graphic.

AI-generated description

Ep5 - 1. Smiley Face Part 1 (Half face with only HTML)

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Smiley Face Part 1

A static SVG smiley face rendered in a browser, showing a yellow circle with a black outline and two blank eye circles. Built with React and ReactDOM, the page loads React from a CDN and renders the graphic directly in the markup rather than through component logic, while the accompanying JavaScript code is incomplete and unused. The visualization demonstrates basic SVG shape composition with fixed coordinates for the face and eyes.

VVictor Chiagozie Ughonu

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

87% match

Loading thumbnail…

Smiley Face Part 1

This example shows a yellow circle with a black outline serving as a face, alongside two smaller black-outlined circles as eyes, all rendered on a fixed 960 by 500 SVG canvas. The page uses plain HTML and CSS to set up the layout, while React 16.7.0 is loaded via a CDN script tag, though no React components are actually instantiated. Instead, the visualization relies entirely on static SVG elements (circle tags) with hardcoded coordinates and styling to create the partial smiley face.

DDavid Allyn

87% match

Loading thumbnail…

Smiley Face part 1

A yellow circle with a thick black outline forms the face, alongside two smaller unfilled circles positioned as eyes, rendered directly in SVG within an HTML file. The example uses React 16.9.0, loaded via a UMD script, and relies on static SVG markup for the shapes rather than dynamic data or programmatic drawing. The page is set to hide overflow and remove default body margins, making the visualization fill the viewport.

HHuhej

87% match

Loading thumbnail…

Smiley Face part 1

A static yellow smiley face rendered with three SVG circles appears on a blank white canvas. The largest circle forms the head with a yellow fill and black stroke, while two smaller black unfilled circles serve as eyes. The visualization uses raw SVG elements defined directly in the HTML, with React included as a script dependency but not actively driving the rendering. The code displays a simple, fixed geometric composition without any interactive or animated features.

AAngus Clark

87% match

Loading thumbnail…

Smiley face part 1

This example shows a simple yellow smiley face constructed from three SVG circles: a large filled circle for the head and two smaller circles for the eyes, all with a thick black stroke. The visualization is rendered as static SVG within an HTML page, with the face centered by hard-coded coordinates. It uses React and ReactDOM in the JavaScript, though the drawing itself is plain SVG markup in the `index.html` file rather than being generated programmatically.

Bboualichaimaa

87% match

Loading thumbnail…

Smiley Face Part I

A minimalist smiley face rendered as a static SVG graphic. The visualization uses two black circles for eyes and a large yellow circle with a black outline for the head, all centered within a 960 by 500 pixel canvas. The drawing is constructed declaratively with SVG elements inside an HTML document, positioned using percentage-based coordinates for the `cx` and `cy` attributes. The design relies solely on basic vector shapes and CSS styling, with no interactive or animated features.

RRafal Krohne

87% match

Loading thumbnail…

Dataviz 2020_Ep8 - 4. Face Part 4 - React Components Basics

This example shows a simple smiley face drawn with SVG shapes, composed of a yellow circle background, two eyes, and a mouth arc, all orchestrated by a React App component that delegates to smaller components. The code uses React and ReactDOM for component rendering, and the D3.js `arc()` API to generate the mouth path. The rendering is static SVG, with the face centered within a 960 by 500 viewport and positioned via a translate transformation.

MMinwoo Pak

87% match