Skip to main content
SimilarExport ZIP
100%

DataViz_d3_face

✓ Published0🌍 Public
EEloy Vallina
Last edited Jan 29, 2023
Created on Jan 29, 2023
Forked from HTML Starter

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.

AI-generated description

Halway towards a smiley face

MIT Licensed

Similar vizzes

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

DataViz D3

This example renders a simple smiley face using React and D3 within an SVG canvas. It shows a yellow circle head with two black eyes and an open mouth outlined as an arc. The visualization uses D3’s `arc()` generator to compute the mouth path, with static coordinates for the eyes and face. React manages the component structure, while D3 v5 provides the shape-drawing API, all displayed through SVG elements in a fixed 960×540 viewport.

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

D3 FACE!

This example draws a simple smiley face using D3.js and renders it as SVG. The visualization shows a yellow circle with black eyes and a mouth, all positioned using fixed coordinates derived from the SVG's width and height attributes. The code uses D3's `select` API to target the SVG element and the `arc()` generator to create the mouth path. The implementation relies on D3 v5.15.0 loaded from a CDN, with all geometric values hardcoded in JavaScript.

Bbl75d
86% match
Loading thumbnail…

Data Visualization

A yellow circle with two black eye dots forms a simple smiley face, missing only the mouth to complete the expression. The visualization is rendered as static SVG shapes inside a fixed 960-by-500 viewport. It uses React 18, loaded via a UMD script tag, though the drawing itself is plain SVG markup rather than React-generated elements. The composition relies only on three circle elements, with no animation or interaction.

LLittlegreen8
86% match
Loading thumbnail…

[DataViz] Make Face II

An SVG half-smiley face rendered with three yellow circles: one large circle for the head outline and two smaller circles for the eyes, all drawn with black strokes on a 960x500 canvas. The face uses circle elements with explicit cx, cy, r, fill, and stroke attributes, placing the head center at 480,250 with a radius of 245, and the eyes at 350,180 and 600,180 with a radius of 50 each. The code contains no interactive behavior or animations, only static SVG geometry.

AAga Domanska
86% match
Loading thumbnail…

d3.js

A cheerful yellow smiley face rendered with SVG, this example demonstrates fundamental d3.js drawing techniques. The visualization displays a large yellow circle with two black circular eyes and a mouth created using the d3.arc() API, which generates an arc path with specified inner and outer radii and start/end angles. The code selects an SVG container using d3.select and appends shapes using d3’s selection methods with attribute setters. All shapes are positioned using explicit coordinates within a 960x500 viewport, and the d3.v5 library is loaded via a CDN link.

SShirley Guo
85% 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
85% match