lsternberg

@lsternberg·5 public vizzes

moving circle

A circle at the center of an SVG canvas responds to mouse movement within the viewport. The React component tracks the pointer’s coordinates via the `onMouseMove` event handler, logging them to the console, while the circle itself remains static at the center. The visualization uses React 16.9 with hooks (`useState`) and renders directly to SVG, with the circle’s position fixed by hardcoded `cx` and `cy` values. No mouse-following behavior is implemented in the visible code.

Apr 5, 2021

Loading thumbnail…

Fork of CssColor

This example fetches a CSV file of CSS color names from a GitHub gist using the Fetch API, then logs the raw text data to the browser console. The code is a minimal React starter page that demonstrates how to retrieve remote tabular data and output it for inspection. No visualization or rendering occurs beyond this console output.

Apr 4, 2021

Loading thumbnail…

Fork of Hello HTML

This bare minimum HTML page demonstrates the simplest possible web visualization: an empty document with a title. The code uses only standard HTML elements, with no JavaScript libraries or data sources, and lives in a single `index.html` file. The page renders a completely blank browser window, serving as a starting point for more complex examples. It contains a linked YouTube video with `allowfullscreen` attributes but no interactive or graphical content of its own.

Apr 4, 2021

Loading thumbnail…

CssColor

This example demonstrates loading a CSV file containing CSS color names from a remote URL and logging its contents to the browser console. It uses the JavaScript `fetch` API with an asynchronous function to retrieve the text data from a GitHub Gist, then outputs the raw CSV text via `console.log`. The page is a minimal HTML document with embedded JavaScript, using no external libraries. The visualization is not yet rendered; it only fetches and logs the data, serving as a preliminary step for a future color-related application.

Apr 4, 2021

Loading thumbnail…

SMF part I

The visualization displays a grid of fifteen circular smiley faces, each with randomly varied eye sizes and smile thicknesses, rendered as yellow SVG circles with black outlines. The faces are generated by mapping over a d3.range array in React, with each Face component composing a BackgroundCircle, Eyes, and Smile path. The Smile uses d3.arc to create an annular sector between random inner and outer radii, while the faces are positioned via SVG group transforms and rendered using ReactDOM.

Apr 2, 2021