Skip to main content
SimilarExport ZIP
100%

D3 Visualization course

✓ Published0🌍 Public
IIsh Siva
Last edited Nov 2, 2022
Created on Nov 2, 2022
Forked from HTML Starter

A simple SVG illustration of a smiley face built directly in HTML. The code uses two concentric circles to form the face and two smaller circles for eyes, all rendered statically without any JavaScript or D3 logic. It demonstrates a bare-bones setup with CSS styling for the page and SVG attributes for shape properties like radius, position, fill, and stroke, serving as a minimal starting point for a visualization course.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

DataVisCourse

A starter example shows a static smiley face built from three SVG circles on a yellow background, with two dark eye circles positioned inside a larger yellow face outlined in black. The visualization is constructed declaratively using React 18 and rendered directly through SVG elements in the DOM. The code demonstrates basic SVG circle positioning and styling attributes within a fixed 960 by 500 viewport, serving as an introductory template for further interactive or animated extensions. No data or dynamic behavior is present in the current implementation.

Ddzokesayi.s@gmail.com
88% match
Loading thumbnail…

D3.js intro!!

This example creates a cheerful smiley face entirely with SVG shapes inside a React application. The visualization uses D3 version 6 to append a large yellow circle for the face, two smaller black circles for asymmetrical eyes, and a curved path for the mouth. The mouth is generated using D3’s `arc()` function, which constructs an annular sector path. The code explicitly sets SVG attributes like `fill`, `stroke`, and `transform` to position and style each geometric element on a 960 by 500 canvas.

Eevsjg
87% match
Loading thumbnail…

D3 and SVG smile

This example shows a simple smiling face constructed entirely with SVG shapes, drawn on a red background. The face consists of a yellow circle for the head, two small rectangles for eyes, two circles for pupils, and a black arc for the mouth. The code uses D3 version 6 to select the SVG element, set its dimensions and background, and append the geometric primitives with chained `.attr()` calls. It also uses `d3.arc()` to generate the path data for the smile, demonstrating how D3’s arc generator can be used with SVG paths.

EElena Dreosti
87% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a smiley face using D3.js version 5, focusing on fundamental DOM manipulation with SVG elements. The code explicitly appends a group and a circle element to the SVG canvas, positioning them at the center of a 960×500 viewport. It uses the `select` and `append` methods from the `d3` namespace to build the geometric face outline, with a transparent fill and black stroke. The visualization is purely programmatic, with no external data source, and includes a static smile path defined directly in the HTML markup.

TTheRoadSign
87% match
Loading thumbnail…

Face with D3 js

This example shows a simple smiling face constructed from SVG shapes using D3.js version 5. The visualization draws a large yellow circle for the head, two smaller black circles for eyes, and an arc for the mouth, all positioned relative to the SVG canvas dimensions. The code uses D3’s selection API to append circles and a path, with the mouth created via the `arc()` function specifying inner and outer radii and a half-circle angular range. The smiley is rendered directly into an SVG element defined in the HTML, with all styling applied through D3 attribute methods.

Aadmk840
87% match
Loading thumbnail…

Simley D3 and React Part I

This example shows a static smiley face built with raw Scalable Vector Graphics (SVG) shapes, without using D3 or React logic. Three circles—a large yellow face with a black stroke, plus two smaller eyes—are positioned via explicit coordinate attributes inside an inline SVG element. The code relies on basic SVG circle elements and CSS styling to set the body margin and hide overflow. No data source is involved; the visualization is purely declarative markup within an HTML file.

Bbakstorage00001
87% match
Loading thumbnail…

D3 Tutorial

This example shows a static smiley face made of three SVG circles on a yellow background, drawn inside an HTML page that loads React 18.2. The visualization uses plain SVG elements—a large yellow circle with a black stroke and two smaller black circles for eyes—hardcoded in the markup. The code includes a minimal JavaScript entry point that logs a message, while the README references a React starter template for extending the setup.

AAbrisG
87% match
Loading thumbnail…

My Smiley Face

This example uses React with D3 to render a stylized smiley face as an SVG graphic. The visualization constructs the face from primitive shapes—a yellow circle for the head, two dark circles for eyes, red cheek circles, and a mouth drawn as an arc path created with D3's `arc` generator. All elements are positioned relative to the center of a 960×500 canvas using SVG transformations, with stroke widths and radii defined as constants. The code demonstrates how D3's arc path generator integrates with React's declarative SVG rendering to produce a simple, vector-based illustration.

MMarina Shemesh
87% match