RossDee

@RossDee·6 public vizzes

Interaction With React

A yellow circle acts as a smiley face that follows the mouse cursor as it moves across an SVG canvas. The React application uses the `useState` hook to track the cursor's `clientX` and `clientY` coordinates, updating the circle's `cx` and `cy` attributes on every mouse move. Rendered with ReactDOM, the example demonstrates handling pointer events in a declarative, component-based manner without using a separate data source.

Mar 20, 2022

Loading thumbnail…

loading and parse CSV

This example demonstrates how to load a CSV file from a remote URL and parse its contents using the browser’s built-in Fetch API. The page fetches a raw CSV file containing named CSS colors from a GitHub gist, then logs the raw text response to the browser console. The code uses `fetch()` with `response.text()` to retrieve the file as a plain string, showing the initial step before any CSV-specific parsing library or data conversion is applied. No styling or visualization is rendered—the focus is purely on network loading and text output.

Mar 19, 2022

Loading thumbnail…

Fork of Hello HTML

A grid of sixteen randomly generated cartoon faces fills the viewport, each face rendered as a yellow circle with two eyes and an arc-shaped mouth. The example demonstrates component reuse in React, where each face is built from reusable `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` components. The code uses React 17 for rendering, D3 v7's `arc` generator to create mouth paths, and the `range` helper from D3 to generate the array of indices. Randomization controls stroke width, eye position and size, and mouth dimensions, making every face unique.

Mar 19, 2022

Loading thumbnail…

Untitled

A React and D3.js example renders a smiling face as an interactive network visualization. The code uses D3's force-directed graph layout (`d3.forceSimulation`) to position a set of nodes connected by links, forming the face’s circular outline, eyes, and mouth. The data is embedded directly in the JavaScript source, defining node positions and link connections. Users can click and drag nodes, causing the simulation to recalculate positions in real time, while the face’s features maintain their relational structure through the physical spring-and-charge model.

Mar 19, 2022

Loading thumbnail…

Fork of Hello HTML

This example presents a minimal, empty HTML page. It demonstrates the fundamental structure of an HTML document, with a `<head>` section containing a title and an empty `<body>` element. The code uses only the standard HTML language, with no external libraries or data sources. It serves as a basic template or starting point for web development, showing the essential tags required for a functional page.

Mar 16, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal SVG circle rendered at the center of the page, scaled by a CSS rule that sets its message class font size and text alignment. The circle is drawn using an inline `<svg>` element with a `<circle>` tag and no radius specified, defaulting to zero. The code uses plain HTML, CSS, and JavaScript, with no external libraries or data sources, demonstrating a bare-bones starter template for visualization projects. The styling relies on a CSS `.message` class, though it is not applied to the SVG in the current markup.

Mar 16, 2022