Skip to main content
SimilarExport ZIP
100%

first try

✓ Published0🌍 Public
AAmandineM97
Last edited Apr 13, 2022
Created on Apr 13, 2022

This visualization is a simple smiley face drawn from SVG primitives: a yellow circle, two black eyes, and a curved mouth path. The face is centered in an SVG canvas, with all elements grouped and positioned using affine transforms. The code uses the D3 `select` API to query the SVG element and `append` to add shapes, while the mouth is generated with the `d3.arc` function, which produces an SVG path from polar coordinates. The example demonstrates basic D3 v7 SVG construction without data binding.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 first try

This example demonstrates basic SVG drawing with D3, showing a yellow smiley face composed of a circle, two blue eye circles, and an arc-shaped mouth. The code uses D3 v6’s `select` and `arc` utilities, appending SVG elements within a centered group. Coordinates and dimensions come directly from the SVG’s width and height attributes, with the face centered at 960×500. The arc generator creates the mouth by specifying inner and outer radii and angular ranges. No data loading or interaction occurs; it solely illustrates static SVG shape construction.

JJack Wu
88% match
Loading thumbnail…

SVG Smiley Face

A smiling face is drawn with SVG primitives, centered on a yellow circle with black outlines, including eyes, eyebrows, and a mouth. The example demonstrates basic D3 v5 shape generation and selection, using `d3.select` to manipulate SVG elements and `d3.arc` to create the mouth path. All elements are positioned relative to a central group, with geometric constants for spacing and offsets. The static visualization is built entirely in code, with no external data source.

Bbprokopowicz
86% match
Loading thumbnail…

HTML Starter

This example visualizes a simple, static smiley face. The face is composed of a yellow circle for the head, two black circles for eyes, and a black arc for the mouth, all positioned relative to the center of an SVG canvas. The visualization is built with D3 v6 and SVG, using basic D3 selection and shape-creation methods like `d3.select`, `d3.append`, and `d3.arc` to draw the mouth path. The code does not involve any data transformation but rather constructs the face from hardcoded geometric values.

KKyo
85% match
Loading thumbnail…

Smiley Face

This example draws a simple smiley face entirely with SVG shapes: a yellow circle for the head, two black circles for the eyes, and an arc for the mouth. The layout is computed from the SVG’s width and height attributes, with fixed constants for eye spacing and altitude. It uses D3 v7’s `select` and `arc` helpers, applying `attr` to position each element and `path` with an arc generator to define the mouth’s curved geometry.

Wwisam-ahmed
85% match
Loading thumbnail…

First Class

This visualization shows a smiley face built with SVG primitives, featuring a yellow circle with a thick black outline, two offset eyes, and a curved mouth rendered as an arc. The example uses a React component structure, with the face, eyes, and mouth defined as nested SVG elements within a transformed group. D3 v7’s `arc` generator constructs the mouth path by specifying inner and outer radii and start and end angles, while ReactDOM renders the final composition into a root div.

MMayank Kumar
85% match
Loading thumbnail…

Smiley face

This visualization displays a simple yellow smiley face rendered as SVG, composed of a circular face, two black eyes, and an arc-shaped mouth. The code uses D3 v5’s `select` and `arc` APIs to construct the path for the mouth, while positioning all elements relative to the SVG’s width and height. The face is drawn with a circle, and the eyes are offset from the center using explicit pixel coordinates. The `arc` generator defines the mouth’s inner and outer radii with start and end angles, producing a fixed smile shape.

Ssrwezuva
85% match
Loading thumbnail…

Smile Face

A yellow smile face is drawn in the center of an SVG canvas, with black eyes and a curved mouth formed by an arc. The face is centered using a group transformation and sized relative to the viewport dimensions. The visualization uses D3 v6, specifically the `select` and `arc` utilities, to append SVG circles and a path for the mouth, all rendered directly without external data.

JJustin Song
85% match
Loading thumbnail…

most focked

This example demonstrates how to create a simple smiley face visualization using D3.js and SVG. It shows a yellow circle as the face, two black circles for eyes, and a curved black arc for a big smile. The code uses D3’s `select` and `append` methods to build the SVG structure, and the `d3.arc()` API to generate the smile’s path. The rendering is purely SVG-based, with fixed pixel dimensions (200 by 200). The example serves as a minimal introduction to D3’s shape generators and basic DOM manipulation, with no data binding or external data sources involved.

BBALAJI MANDAVA
85% match