Skip to main content
SimilarExport ZIP
100%

svg-d3-smiley

✓ Published0🌍 Public
AAndy Maes
Last edited Feb 27, 2021
Created on Feb 27, 2021
Forked from Hello HTML

A bare-minimum HTML page renders a static, yellow smiley face using SVG shapes and D3.js. The visualization places a circular face with two eyes, a nose, and a curved mouth directly onto the page through D3’s selection and attribute methods. The code relies on D3 v3 to append and style SVG elements, though it defines no data bindings or interactive behaviors. The file contains only the document skeleton and an inline script, making it a basic demonstration of drawing vector graphics programmatically with D3 and the SVG API.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Viz - D3 smilie

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.

Ssgc1026@gmail.com
88% match
Loading thumbnail…

HTML Starter

This example displays a simple yellow smiley face with black eyes and a mouth, drawn as SVG shapes on a 960 by 500 pixel canvas. It demonstrates the basic setup of a D3 visualization in an HTML page, using the D3 v5 library to select the SVG element and append circles and a path. The mouth is created with D3's `d3.arc` function, defining inner and outer radii and a semicircular angle range. The code imports `select` and `arc` from D3, and the page loads D3 from a CDN.

Ccedriccaijo
87% match
Loading thumbnail…

HTML Starter

This example renders a simple smiley face using D3.js v5 with SVG. It draws a yellow circle for the head, two black circles for eyes, and an arc path for the mouth, all positioned within an SVG container. The code uses d3.select and d3.arc with inner and outer radius settings to construct the mouth shape, demonstrating basic SVG append operations and attribute assignment. The visualization is purely static, with no data binding or interactions, serving as a minimal HTML starter template.

Kkasalwelengwe@gmail.com
87% match
Loading thumbnail…

HTML Starter

This example renders a simple smiley face using D3.js v5 with SVG. It draws a yellow circle for the head, two black circles for eyes, and an arc path for the mouth, all positioned within an SVG container. The code uses d3.select and d3.arc with inner and outer radius settings to construct the mouth shape, demonstrating basic SVG append operations and attribute assignment. The visualization is purely static, with no data binding or interactions, serving as a minimal HTML starter template.

Kkasalwelengwe@gmail.com
87% match
Loading thumbnail…

HTML Starter

This example renders a simple smiley face using D3.js v5 with SVG. It draws a yellow circle for the head, two black circles for eyes, and an arc path for the mouth, all positioned within an SVG container. The code uses d3.select and d3.arc with inner and outer radius settings to construct the mouth shape, demonstrating basic SVG append operations and attribute assignment. The visualization is purely static, with no data binding or interactions, serving as a minimal HTML starter template.

Kkasalwelengwe@gmail.com
87% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a static smiley face built with SVG shapes: a yellow circle for the head, black circles for the eyes, and a curved line for the mouth. The code demonstrates fundamental DOM manipulation by using D3.js v5 selection and append methods to create and position each shape. It draws directly from the index.js file, which uses `select` and `append` to construct elements on an SVG canvas, with coordinates derived from the `width` and `height` attributes. The project is minimal, focusing on basic shape creation rather than interactive or animated behavior.

Mmirna981
87% match
Loading thumbnail…

SVG and CSS

This example renders a smiley face as a static SVG graphic using D3 v6. It draws a yellow circle for the head, two black circles for the eyes, and a semicircular arc for the mouth via the `d3.arc()` helper. The dimensions come from the SVG’s width and height attributes, and a `<g>` element translates to the center for the mouth path. All shapes are positioned manually without data binding, and styling is handled through D3’s attribute chaining.

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