Skip to main content
SimilarExport ZIP
100%

HTML Starter

✓ Published0🌍 Public
LLuce Liu
Last edited Jan 10, 2020
Created on Jan 10, 2020
Forked from HTML Starter

This example demonstrates a simple smiley face drawn with SVG circles. The code selects the SVG element using d3.select, dynamically reads its width and height attributes, and positions a large yellow circle as the face with two smaller black circles for eyes. It uses D3 v5’s selection methods like append and attr to build the shapes, while the SVG canvas is set to 960×500 pixels in the HTML file.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

HTML Starter

This example uses D3.js v5 and React to render a simple SVG smiley face on a 960x500 canvas. The code draws a yellow circle for the face, two black circles for eyes, and a curved path for the smile. It uses D3’s `select` to target the SVG element and the `arc` generator to create the smile’s arc shape. The rendering approach relies entirely on static SVG attributes, with no data binding or interactivity.

Ssghanapuram
94% 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
93% match
Loading thumbnail…

HTML Starter

This example draws a smiley face using D3 selections and SVG shapes. A yellow circle serves as the face, with black circles for eyes, rectangles for eyebrows, and a D3 arc path for the mouth. The eyebrows animate vertically through a chain of `transition().duration()` calls, moving up and down repeatedly. The code constructs the SVG elements by appending groups and shapes to the root `svg` element, using D3's `select` and `arc` functions.

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

HTML Starter

This example draws a cheerful smiley face as an SVG, with yellow circular head, black eyes, and a curved mouth arc. It demonstrates D3.js v5 selection and shape generation using `d3.select`, `d3.arc`, and attribute binding. The right eyebrow animates via chained `transition().duration()` calls, moving downward and back over two seconds. The 960×500 SVG canvas is centered with a `g` group transform.

AAWey95
93% match
Loading thumbnail…

HTML Starter

This example shows a simple smiling face drawn as SVG shapes: a yellow circle for the head, a black circle for the left eye, and an arc for the mouth. The visualization presents static geometric elements without any data input or interaction. The code uses D3 v5’s `select` to target the SVG container, `append` to create circles, and the `arc` generator to produce the curved mouth path. The viewBox is set via the SVG’s width and height attributes, with the face centered at (400, 450). The React framework is referenced in the metadata, but the actual implementation relies on plain HTML and JavaScript with D3.

KKashikoma301
91% match