Dataviz 1 - Face (HTML, CSS, SVG)

100%

Dataviz 1 - Face (HTML, CSS, SVG)

✓ Published1🌍 Public

Last edited Nov 18, 2021

Created on Nov 18, 2021

This example shows a simple cartoon face made of three SVG circles: a large yellow head and two smaller black eyes. The visualization uses static, hand-coded SVG elements within an HTML page, with CSS setting the body margin to zero and hiding overflow. It renders directly in the browser without any JavaScript libraries or data processing, relying solely on the SVG circle elements and their fill, stroke, and stroke-width attributes.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Datavis 2020 - Let's Make a Face

This example draws a simple face using basic SVG shapes directly in an HTML page, with no external JavaScript libraries. It shows a yellow circle as the head, and two smaller black circles as eyes, all positioned within a fixed 960 by 500 viewport. The rendering relies solely on inline SVG elements like `<circle>` and standard attributes such as `cx`, `cy`, `r`, and `fill`, with stroke properties for outlines. The page’s CSS sets `overflow: hidden` to prevent scrolling, and the static composition uses hardcoded coordinates rather than any data-driven generation or interaction.

LLeonardo Santos

89% match

Loading thumbnail…

Dataviz 1 - Face (React)

A simple face composed of three SVG circles rendered with React. The yellow head and two black eyes are drawn using React's JSX syntax within an SVG element, with dimensions defined as constants. It uses React 17 and ReactDOM to mount the component into the DOM, demonstrating basic React rendering of static SVG shapes without external data or interactivity.

RRyAlpha

87% match

Loading thumbnail…

Data | Make a Face with HTML, CSS, SVG

A simple SVG face is drawn with three circles: a yellow head with a black stroke and two black eyes. The example demonstrates basic SVG shape rendering within an HTML page, using a fixed 960 by 500 canvas and hardcoded coordinates. No JavaScript or external libraries are used; only the SVG `circle` element and inline CSS control the layout and hide page overflow. The face is static, with no interaction or animation, serving purely as a minimal illustration of vector graphics markup.

AAndreRGunawan

87% match

Loading thumbnail…

Face

This example displays a simple, static face constructed from three SVG circles on a yellow background. The face consists of a large yellow circle for the head, outlined in black, and two smaller black circles positioned as eyes. The rendering uses raw SVG elements defined directly in the HTML, with hardcoded coordinates and attributes. The visualization does not involve any data processing or interaction, serving as a basic demonstration of shape composition.

Jjameshodev

86% match

Loading thumbnail…

Dataviz 1 - Face (React + D3)

This example uses React and D3.js v7 to render a simple, static smiley face as an SVG graphic. It shows a yellow circle for the head, two black circles for eyes, and a curved arc for a mouth, all positioned relative to a central coordinate system. The React component defines the SVG elements with numeric values for dimensions, offsets, and radii. The mouth shape is generated using D3's `d3.arc()` function to create a path with specified inner and outer radii and angular range, and the component is mounted to the DOM using `ReactDOM.render()`.

RRyAlpha

85% match

Loading thumbnail…

Dataviz 1 - Face Practice (React + D3)

This example builds a stylized face using React and D3 v7, rendered as SVG. It shows a static composition of a yellow circle for the head, two black circles for eyes, and arcs for a mouth and moustache, all positioned with SVG transforms. The code uses `d3.arc()` to define the mouth and moustache paths with specific inner/outer radii and angle ranges. React 17 renders the SVG elements, while D3 provides the arc generator, with all dimensions and offsets hard-coded.

RRyAlpha

85% match

Loading thumbnail…

Dataviz 1 - Face (React components + ES6)

This example renders a simple cartoon face using React components and ES6 syntax, combining SVG circles and a d3 arc path. It shows a yellow circular head with black stroke, two offset eyes, and a curved mouth spanning the lower half. The code imports `arc` from `d3` to generate the mouth path, while React manages the component structure and rendering into the DOM via `ReactDOM.render`. D3 v7 and React 17 are loaded from CDN, with all face dimensions defined as constants.

RRyAlpha

84% match

Loading thumbnail…

face

A static SVG face rendered directly in HTML shows three circles: a large yellow head with an orange outline, and two smaller black eyes with white outlines. The code uses no JavaScript libraries or data sources, relying solely on hardcoded SVG circle elements with explicit coordinates, radii, and stroke properties. The rendering is fixed within a 960 by 550 pixel viewport, with the face positioned toward the left side of the canvas.

MMiguel A Palma

84% match