shencode76

@shencode76·6 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js v5 within a React framework. It displays the file size in kilobytes, the number of rows, and the number of columns from a CSS Named Colors dataset hosted on GitHub. The implementation uses `d3.csv` to fetch and parse the remote CSV, then updates the text content of a `<pre>` element. It also includes commented alternatives using the Fetch API with async/await and nested promises.

Jan 5, 2022

Loading thumbnail…

Mouse Follower

A circle tracks the mouse cursor across a full-browser SVG canvas. The React application uses the `useState` hook and a `handleMouseMove` callback with `onMouseMove` to update the circle's `cx` and `cy` attributes in response to pointer movement. The rendering relies on ReactDOM's `render` method to draw the single SVG circle element, with dimensions set from the window's inner width and height.

Jan 5, 2022

Loading thumbnail…

Mouse Follower

This example shows a minimal interactive SVG visualization where a small circle follows the mouse cursor as it moves across the viewport. Built with React and rendered through SVG, the app tracks pointer movement via the `onMouseMove` event handler on the `<svg>` element, logging each move to the console. The circle’s position is fixed at the center of the window, while the event handler only records movement without altering the visual. The code uses React’s `createElement` and `ReactDOM.render` to mount the component, with window dimensions defining the SVG’s width and height.

Jan 2, 2022

Loading thumbnail…

Loading data with fetch

This example demonstrates how to load an external CSV dataset using the native JavaScript fetch API. It fetches a namedcolor.csv file from a GitHub gist and logs the raw text response to the browser console, showing the data loading process before any visualization is created. The code uses async/await syntax within a custom fetchText function, with a commented-out alternative using promise chaining. The page itself is a bare HTML document with a simple CSS class and no additional libraries beyond standard web APIs.

Jan 2, 2022

Loading thumbnail…

Smiley Face Part V

The visualization displays a grid of procedurally generated smiley faces, each with randomized facial features. It shows how React components can be modularized into separate files using ES6 modules and composed together. The faces are rendered as SVG elements using `d3.arc()` to draw the mouth path, with React handling the component hierarchy through fragments. The `d3.range()` function generates six rows of three faces, and each face receives randomized stroke widths, eye positions, radii, and mouth dimensions.

Jan 2, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is drawn on an SVG canvas, centered with a black-stroked background circle, two eyes, and a curved mouth arc. The example uses React components for `BackgroundCircle` and `Eyes`, which are rendered into an `<svg>` element. D3's `arc` API defines the mouth path with an inner radius, outer radius, and angular range between π/2 and 3π/2. The visualization demonstrates a simple, static composition built from modular React code and D3 shape generation, with all dimensions hardcoded in the script.

Dec 27, 2021