Skip to main content
Log in
J

JulesBaerwald

@JulesBaerwald·8 public vizzes

Loading thumbnail…

smile

A smiling face is drawn as a yellow circle with black outline, two eye circles, an arc-shaped mouth, and two white rectangular teeth. The visualization is built with React and rendered as SVG, using D3’s `arc` function to define the mouth’s path. The face is centered and constructed from multiple SVG shapes—circles, a path, and rects—each positioned with transforms and coordinates derived from the canvas dimensions.

Jun 26, 2020
Loading thumbnail…

smile

A smiling face is drawn with a yellow circle for the head, black-outlined, and two smaller circles as eyes. The smile is created using a D3 arc path with a specified inner and outer radius, rendered as an SVG path. The code defines the face elements with React, using SVG shapes like circles, a path, and rectangles for teeth. The example demonstrates how to integrate D3's arc generator for creating a mouth shape within a React-based SVG visualization. Names for the D3 API include `arc` and its chained methods for radius and angle specifications.

Jun 26, 2020
Loading thumbnail…

smile

A smiley face rendered in SVG and controlled by React. The visualization draws a yellow circle for the face, two black circles for the eyes, and a curved mouth path computed with the `d3.arc` generator. React manages the SVG element structure, while D3 v5 provides the arc path math, with all coordinates derived from fixed width and height constants. The final output uses static, hard-coded values rather than data-driven binding.

Jun 26, 2020
Loading thumbnail…

smile

A bright yellow circle with a black outline forms the face of a smiley, while two smaller unfilled circles serve as eyes. The SVG markup defines the shapes directly, using the `circle` element with explicit `cx`, `cy`, and `r` attributes for positioning and sizing. The drawing is static, rendered entirely through SVG within an HTML page, with no interactive or animated behavior.

Jun 26, 2020
Loading thumbnail…

Hello HhML

This example demonstrates the absolute minimum structure required to render an HTML page, containing only a document type declaration, a head with a title, and an empty body. It shows how a browser’s parsing engine treats the raw markup, displaying the page title “Hello HhML” in the browser tab while leaving the viewport completely blank. The code uses no external libraries or APIs, relying solely on the native HTML parser and the browser’s document object model to interpret the bare tags. It highlights the fundamental difference between the visible document surface and the underlying structural skeleton.

Jun 26, 2020
Loading thumbnail…

Hello HTML

A bare-bones HTML page demonstrates the minimal structure required to begin a web-based visualization. The page contains only the `<!DOCTYPE html>` declaration, an `<html>` element, a `<head>` with a `<title>`, and an empty `<body>`, using no external libraries or JavaScript. It shows a blank rendering surface, ready for adding custom content. The example relies on the standard HTML5 document type and fundamental DOM elements as defined by the WHATWG HTML specification.

Jun 26, 2020
Loading thumbnail…

Hello HTML

A minimal static SVG chart renders three circles—a large yellow one with a thick black stroke, and two smaller black circles with blue and black outlines—on a blank 960×500 canvas. The page loads React 16.7.0 from a CDN but does not use any React components. Instead, the drawing is hard-coded directly in the HTML body using inline SVG elements, with a separate script that logs "hello java" to the console. The example demonstrates basic SVG shape rendering without any data binding or interactive behavior.

Jun 1, 2020
Loading thumbnail…

Hello HTML

A minimal static SVG chart renders three circles—a large yellow one with a thick black stroke, and two smaller black circles with blue and black outlines—on a blank 960×500 canvas. The page loads React 16.7.0 from a CDN but does not use any React components. Instead, the drawing is hard-coded directly in the HTML body using inline SVG elements, with a separate script that logs "hello java" to the console. The example demonstrates basic SVG shape rendering without any data binding or interactive behavior.

Jun 1, 2020