Skip to main content
SimilarExport ZIP
100%

Data Viz - D3 smilie

✓ Published0🌍 Public
Ssgc1026@gmail.com
Last edited Jul 21, 2024
Created on Jul 20, 2024
Forked from Hello HTML

A yellow smiley face rendered in SVG sits at the center of a 960-by-500 canvas. Two solid black circles form the eyes, while a thick black stroke outlines the face against a dark background. The visualization uses static SVG markup with `<circle>` elements and inline styling, not D3.js functions or data bindings. It demonstrates basic shape composition and stroke styling in a minimal HTML page.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

DataViz_d3_face

A yellow circle with black outline and two smaller dark circles forms a partial smiley face, shown without a mouth or other features. The visualization uses inline SVG elements—three circle shapes with fixed coordinates and radii—rendered directly in an HTML page. The code relies on no JavaScript libraries, instead using static SVG markup with CSS styling for the page layout and message text. The title suggests a DataViz with D3, but the actual implementation is plain SVG without D3 APIs or data binding.

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

Data Viz Smiley Face

This basic SVG graphic draws a smiley face using two nested groups of circles. A large yellow circle forms the head, with a black outline, while two smaller black circles create the eyes. The example uses the SVG circle element within an 800-by-500 viewport, demonstrating minimal markup for geometric shapes without any interactive or data-driven features.

SShankar Ghimire
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…

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

Smiley

A yellow smiley face is drawn on a black-outlined circle, centered in an SVG canvas. It shows a simple static data visualization of a facial icon using basic geometric shapes. The image is rendered with inline SVG elements, including three `<circle>` tags for the face and eyes, with the mouth omitted. The code uses raw SVG markup directly in an HTML file, with no external libraries, and specifies dimensions of 960 by 500 pixels. The page is styled with CSS to remove margins and hide overflow.

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

Smiley

A yellow smiley face rendered as a static SVG circle with two smaller eye circles. The visualization uses React components to create the SVG elements, with D3 v7 loaded but not actively driving any data or behavior. The face is drawn with a yellow fill and black stroke, positioned at the center of a 960x500 canvas with a single smile curve implied by the main circle's arc. The example demonstrates basic SVG shape composition within a React render tree.

Bbilelmarzouki
88% match