testingwithaws

@testingwithaws·4 public vizzes

Fork of HTML Starter

This example renders a static smiley face using React and D3.js. It shows a yellow circle with black outline, two eyes, and a mouth arc, all positioned relative to a central origin point. The code constructs the SVG via React DOM elements and uses the D3 arc generator to create the mouth path with specified inner and outer radii and angular range. The drawing is centered on a 960 by 500 canvas, with eye placement defined by offset values and the face radius derived from the canvas height and stroke width.

Aug 12, 2022

Loading thumbnail…

Fork of Fork of Hello HTML

This example displays a simple, static SVG face built from two yellow circles and one black circle. The visualization shows a minimalist smiley face centered within a 960 by 500 pixel canvas, with the main face circle and a single eye rendered. The code uses React 18 and ReactDOM to render the SVG elements, with the drawing logic defined in a React component that specifies circle positions, radii, and stroke properties directly. The face is constructed using basic SVG shapes without any animation or interactivity.

May 3, 2022

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page titled "Fork of Hello HTML" demonstrates the simplest possible data-visualization setup: an empty `<body>` with no JavaScript or external libraries. It shows how a bare document structure renders as a blank canvas, using only standard HTML tags without any D3, Canvas, or WebGL APIs. The example highlights the starting point for building interactive visualizations from scratch, where the author can later add libraries like d3.forceSimulation or add charting elements. It serves as a reference for the most basic web page that could host future visualization code.

May 3, 2022

Loading thumbnail…

Fork of Hello VizHub

This example shows a static SVG visualization with a large yellow circle centered on a canvas, accompanied by a brief text message. The visualization renders a simple geometric shape with a black outline, while the page also displays "hello where are you" as paragraph text. The code demonstrates importing D3 functions via UNPKG, specifically using `select` from `d3` to set text content, and imports a local ES6 module to define the string "Hello VizHub!". The SVG is defined directly in the HTML, with the circle's position and dimensions specified through SVG attributes.

May 3, 2022