Sahil Chutani (@sahil350), VizHub

Loading and parsing csv data

This example demonstrates how to load and inspect a CSV file using D3.js. It fetches a dataset of CSS named colors from a GitHub gist and displays three key statistics: the file size in kilobytes, the number of rows, and the number of columns. The code uses `d3.csv()` to parse the remote data, then applies `d3.csvFormat()` to measure its string length and accesses the parsed array's `length` and `columns` properties. A commented alternative shows parsing fetched text with `d3.csvParse()`.

Jan 20, 2025

Loading thumbnail…

Mouse Follow

A full-window SVG follows the mouse, drawing a single circle that tracks the cursor's movement in real time. The React application uses the `useState` and `useCallback` hooks to store and update the mouse coordinates based on `onMouseMove` events, then renders the circle with its `cx` and `cy` attributes tied to that state. Rendered via ReactDOM into an SVG canvas, the visualization demonstrates a minimal, direct interaction between user input and graphical output.

Jan 19, 2025

Loading thumbnail…

Fork of HTML Starter

A smiley face is rendered in an SVG using React components that compose a yellow background circle, two eyes, and a mouth. The face is centered and parameterized by properties like eye offset, radius, and stroke width, which are passed down from a top-level `App` component. React (v16.7) manages the component hierarchy, while D3 (v7) generates the mouth path via the `arc` generator, defining an inner and outer radius with a specified angular range. The SVG container is produced by `FaceContainer`, which translates the coordinate system to the face’s center.

Jan 12, 2025

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the "Hello World" of VizHub V3, a runtime environment that supports continuous hot reloading through interactive widgets. The code exports a `main` function that takes a container DIV and renders a simple text string with a font size controlled by a numeric value. Users can Alt-drag the number in the editor to adjust the font size in real time, showcasing the platform’s live feedback loop. The example uses plain JavaScript and DOM manipulation via `innerHTML`, with no external libraries.

Jan 12, 2025

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the "Hello World" of VizHub V3, a runtime environment that supports continuous hot reloading through interactive widgets. The code exports a `main` function that takes a container DIV and renders a simple text string with a font size controlled by a numeric value. Users can Alt-drag the number in the editor to adjust the font size in real time, showcasing the platform’s live feedback loop. The example uses plain JavaScript and DOM manipulation via `innerHTML`, with no external libraries.

Jan 12, 2025