rayhanasyraff

@rayhanasyraff·7 public vizzes

Fork of Mouse Follower

This example demonstrates a concise display of CSV file metadata, presenting the data size in kilobytes, row count, and column count. The visualization loads a CSS named colors dataset from a GitHub gist using the D3 `csv` utility and React's `useState` and `useEffect` hooks. The app calculates and formats the summary with `d3.csvFormat`, and renders the result as large text in a `<pre>` element via ReactDOM, replacing a loading message once the data arrives.

Sep 4, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a summary of a CSV file containing CSS named colors, parsing the data with d3.csv and presenting the file size, row count, and column count in a large-text HTML preformatted block. The visualization uses D3 v5’s CSV parsing and formatting functions, fetching data from a remote gist URL. Although built within a React framework, the interface is purely a React-inspired text layout, not interactive charts. The code also includes commented-out alternatives using fetch() and async/await, showing different loading approaches.

Sep 4, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A React and D3 interactive visualization displays a single circle that follows the mouse cursor across an SVG canvas. The code uses React's `useState` and `useCallback` hooks to track mouse coordinates, updating the circle's `cx` and `cy` attributes on every `mousemove` event. Rendered with React's `ReactDOM.render` into an SVG element, the example demonstrates how D3's SVG capabilities can be integrated with React state management for real-time user interaction.

Sep 4, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A yellow smiley face is drawn across the full browser window, centered on the viewport. The face consists of a large yellow circle with a black stroke, two solid black eyes, and a mouth implied by an incomplete arc using `arc()` from D3. The React app renders an SVG dynamically sized to `window.innerWidth` and `window.innerHeight`, positioning all elements relative to the center with a transform. React 16.9 and ReactDOM are used to mount the component, while the SVG circle and path elements handle the drawing.

Sep 4, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This static SVG drawing displays a partial smiley face, consisting of a large yellow circle with a black outline and two smaller black circles positioned as eyes, but it lacks a mouth. The graphic is created with a fixed 960 by 500 pixel canvas, using the basic SVG `circle` element and attributes such as `cx`, `cy`, `r`, and `fill` to define shapes. The code includes only these three shapes, with comments referencing placement calculations, and does not yet include any facial features below the eyes.

Sep 4, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using the Fetch API in JavaScript. It fetches a remote CSV file containing CSS named colors and logs the raw text content to the browser console. The code progresses through several commented-out approaches, ultimately using an async function with await for cleaner promise handling. The final implementation chains a `.then()` callback to process the resolved text, highlighting the shift from callback-heavy syntax to modern asynchronous JavaScript patterns.

Sep 4, 2021

Loading thumbnail…

Smiley Face Part III

A grid of eighteen smiley faces appears, each rendered with variations in stroke thickness, eye position and size, and mouth curvature. The example demonstrates a component-based approach to building SVG visualizations with React, where face elements are composed from modular parts. It uses ReactDOM for rendering and D3’s arc API to generate the mouth path, with randomized parameters from d3.range creating visual diversity across the repeating faces.

Sep 1, 2021