awidjaja777

@awidjaja777·6 public vizzes

Clicker Test

This interactive visualization displays a click counter overlaid with metadata about a CSV file loaded from a GitHub gist. Each click increments the displayed click count, while the text also reports the file’s approximate size in kilobytes, the number of rows, and the number of columns. The React app uses the `useState` and `useCallback` hooks to manage the click state and render the message in a `<pre>` element, while D3's `d3.csv` and `d3.csvFormat` handle fetching and formatting the data.

Dec 26, 2022

Loading thumbnail…

CSS Colors

This example displays summary statistics about a CSS color dataset. The visualization shows file size in kilobytes, row count, and column count from a CSV file. Using React with hooks, `useState` and `useEffect` load the data via `csv` from D3 v7. The `message` function formats the metrics using `csvFormat` from D3. The app renders the text output within a `<pre>` element, demonstrating a minimal data-loaded state with a loading message. The dataset comes from a GitHub gist URL providing CSS color names and values.

Dec 26, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor as it moves across an SVG canvas, creating a simple interactive pointer-tracking effect. The visualization uses React state to store the cursor's coordinates and updates the circle's position through an `onMouseMove` event handler. Rendered with D3 v7 and React 18, the SVG circle has an aquamarine fill with a green stroke. The code relies on React's `useState` and `useCallback` hooks to manage and update the mouse position efficiently.

Dec 26, 2022

Loading thumbnail…

Smiley Face

This gallery example renders a grid of 18 smiley faces using React with SVG, each generated by the `Face` component with randomized parameters for stroke width, eye position, eye radius, and mouth dimensions. The faces are composed of modular components—`BackgroundCircle`, `Eyes`, and `Mouth`—where the mouth is drawn using D3’s `arc()` generator to create a thick arc path. The `FaceContainer` wraps each face in an SVG group translated to its center, and `index.js` maps over an array from `range(6 * 3)` to produce the repeated variations. D3 v7 and ReactDOM are used for rendering, with no external data source.

Dec 26, 2022

Loading thumbnail…

Smiley Face Part I

This example shows a simplified smiley face constructed from three basic SVG shapes. A large yellow circle forms the face, with two smaller, unfilled circles placed symmetrically for the eyes. The code draws these shapes directly using SVG elements within an HTML document, specifying coordinates for the center and radius of each circle. The face is centered on a canvas of 960 by 500 pixels, with a black stroke outlining the main circle.

Dec 21, 2022

Loading thumbnail…

Fork of Hello VizHub

This example displays the text “Hello VizHub!” centered on the page in a large font, with “Hello world” assigned to a variable in the main script. It demonstrates loading D3 v5 from UNPKG and using ES6 modules to import a message from a separate local file. The code uses `d3` only for library inclusion, while the rendered output relies on plain HTML and CSS with a `pre` element displaying a message. No data source or dynamic visualization is present.

Dec 21, 2022