100 days of Learning D3.js #1 Hello HTML

100%

100 days of Learning D3.js #1 Hello HTML

✓ Published0🌍 Public

Last edited Oct 30, 2021

Created on Oct 30, 2021

This example shows a simple SVG face composed of three circles: a large yellow circle for the head and two smaller black circles for eyes. It demonstrates the basic structure of an HTML page with inline SVG elements, setting the stage for learning D3.js. The code uses plain SVG shapes and attributes like `cx`, `cy`, `r`, `fill`, and `stroke-width`, rendered directly in the browser at a fixed 960 by 500 pixel viewport. It does not yet employ any D3.js functions, serving as a first hello-world step in a 100-day learning series.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

A minimalist SVG face rendered entirely with basic HTML markup and inline SVG elements. The visualization uses two black-outlined circles for the eyes, which appear as empty outlines on a large yellow circular head. The code creates the face manually with `<circle>` tags inside an SVG canvas, setting coordinates and dimensions directly in the markup. This example demonstrates fundamental SVG shape creation and styling through attributes like `fill`, `stroke`, and `stroke-width`, without relying on any JavaScript libraries or external data.

Cchristhchild28

83% match

Loading thumbnail…

D3 Course: Face Part 1

This example demonstrates the first step of building a face using basic SVG shapes with D3.js. It displays a yellow circle as the head, two smaller black circles as eyes, and a thick black outline. The rendering uses static SVG elements within an HTML page, with dimensions hard-coded in the markup rather than computed in JavaScript. The code relies on standard SVG circle elements and CSS styling to define the visual appearance, serving as the foundation for a D3-based drawing course.

MMarta

83% match

Loading thumbnail…

D3js practice

This example draws a simple face using D3 version 7. A yellow circle serves as the head, with two black circles for eyes, and a path created with the `d3.arc` function forms a smile. The SVG canvas is 960 by 500 pixels, and all shapes are positioned and scaled relative to these dimensions. The code demonstrates basic SVG rendering and shape manipulation with D3's selection and attribute methods.

Sshuksbhoney

83% match

Loading thumbnail…

Let's make a face with D3.js!

A face is drawn using simple SVG shapes: a large yellow circle for the head, with two smaller black circles for eyes positioned symmetrically around the center. The D3.js v5 library is used to select the SVG element and append these circles, with coordinates calculated from the SVG's width and height attributes. The example demonstrates basic D3 shape creation and attribute manipulation, with the rendering handled entirely by SVG in an HTML document.

Sshallowater

83% match

Loading thumbnail…

Learning D3

A bright yellow circle fills the SVG canvas, serving as the face of a simple character with two black eyes positioned symmetrically around its center. The example demonstrates fundamental D3.js v5 syntax for selecting and manipulating SVG elements, using chained attribute methods to set the circle’s radius, coordinates, fill, and stroke, while also extracting the canvas dimensions directly from the SVG element’s attributes.

SSoti Coker

83% match

Loading thumbnail…

Hello HTML

This example displays a simple, static SVG face composed of a yellow circle for the head and two smaller black circles for eyes. The page uses raw HTML and inline styling, with no external JavaScript libraries. Rendering is achieved through SVG elements defined directly in the markup, including circle attributes for radius, position, fill, and stroke. The visualization demonstrates how basic geometric shapes can be combined to form a recognizable figure within an HTML document.

AAngelo Martínez

83% match

Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js v5 to draw a simple face on an SVG canvas. The sketch places a single large circle at the center of a 960 by 500 pixel viewport using the `svg.append` and `circle.attr` methods, setting its radius to 200 pixels. The visualization demonstrates basic SVG shape creation and attribute manipulation with D3, though only the foundational head element is rendered in the provided code.

HHelenaShu

83% match

Loading thumbnail…

Hello HTML face

A simple SVG face drawn with three circles on a yellow background, illustrating fundamental HTML and SVG markup. The example uses raw SVG elements—a large yellow circle for the head and two smaller black circles for eyes—positioned via explicit `cx` and `cy` coordinates within an inline `<svg>` tag. No JavaScript or external libraries are employed; the rendering relies entirely on static SVG shapes embedded directly in the HTML document.

CCamiloGuevara19

83% match