szchee1

@szchee1·4 public vizzes

Fork of HTML Starter

This example shows a minimal HTML page displaying the static text "Hello HTML!" in large, centered type. The page demonstrates a basic web development setup using CSS for styling and JavaScript for functionality. The JavaScript code defines an asynchronous function that fetches JSON data from a remote URL, using the standard `fetch()` API, and logs the retrieved data to the console. The example also loads the D3.js library (v7.8.5) but does not use it for any visualization in the current implementation.

Oct 28, 2023

Loading thumbnail…

Smileysss

Fifteen yellow smiley faces float across the screen, each with randomized eye size, eye offset, stroke width, and smile curvature. Built with React components for the face, eyes, and smile, the visualization uses SVG circles for the face and eyes, while the smile is drawn as a D3 arc path. The randomized parameters create a playful grid of slightly varying expressions.

Oct 8, 2023

Loading thumbnail…

Smiley

This example shows a cheerful smiley face rendered as a yellow circle with black outlines, featuring two eyes and a curved mouth centered on a 960×500 SVG canvas. The face is built using React components, with the background circle and eyes as SVG `<circle>` elements, while the mouth uses D3’s `d3.arc()` generator to create a path based on inner and outer radii and start/end angles. All elements are grouped and translated to the canvas center, with the mouth offset slightly via a transform.

Sep 16, 2023

Loading thumbnail…

Scatter Plot

This scatter plot displays the Iris dataset, plotting sepal width against sepal length for individual flowers. The visualization is rendered as an SVG using React components, with D3.v7 utility functions like `d3.csv` to load data and `d3.scaleLinear` with `d3.extent` to map data values to pixel coordinates. The chart includes labeled axes with grid lines and translucent turquoise circles, each featuring a tooltip that reveals the exact measurements on hover.

Oct 21, 2021