Skip to main content
Log in
A

Akshay

@AkshayS95·9 public vizzes

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays basic statistics about the CSS Named Colors CSV dataset, including file size in kilobytes, row count, and column count, rendered as large text in a preformatted HTML element. The code loads the remote CSV using D3 v5’s `d3.csv` method, which returns a promise, then computes the values with `d3.csvFormat` and `data.columns`. Alternative approaches using `fetch`, `async`/`await`, and `d3.csvParse` are commented out, highlighting different asynchronous patterns for data loading.

Mar 19, 2022
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS named colors, displaying the file size, row count, and column count in a large text message. The code uses the Fetch API with async/await and `d3.csvParse` to process the data, while the page itself is built with React and styled using plain HTML and CSS. The data source is a remote Gist URL, and the visualization is purely textual rather than graphical, emphasizing the parsing workflow rather than visual encoding.

Mar 19, 2022
Loading thumbnail…

Fork of Smiley Face Part II

A React application renders an interactive smiley face using SVG circles. The face's eyes and mouth are static, while a separate circle tracks the user's mouse movement across the canvas, updating its position via the `onMouseMove` event. The code uses React 16.9.0 and ReactDOM to manage state with `useState` and `useCallback`, drawing the interactive element as a filled circle with a radius of 30 pixels on a 960 by 500 coordinate system.

Mar 19, 2022
Loading thumbnail…

Fork of Let's Make a Face Part I

A static smiley face rendered as three SVG circles: a large yellow head with a black stroke, and two smaller black eyes positioned symmetrically on either side of the center. The code uses the SVG `<circle>` element and inline attributes for coordinates, radius, fill, and stroke. It is a simple, non-interactive visualization that demonstrates basic SVG shape drawing without JavaScript libraries.

Mar 19, 2022
Loading thumbnail…

Fork of Hello HTML

This example is a minimal, blank HTML page. It contains no visible data visualization, displaying only an empty body element. The page is a fork of a "Hello HTML" template and relies solely on the standard HTML5 structure, with no external libraries or JavaScript. Its purpose is to serve as a bare-bones starting point, where any visualization could be added, but currently it simply renders a blank document in the browser. The provided README also includes an embedded YouTube video, which does not load within the main page itself.

Mar 19, 2022
Loading thumbnail…

Fork of Smiley Face Part II

This example shows a minimal React-based smiley face visualization. The code renders a single yellow circle positioned at the center of an SVG canvas, with the dimensions set to 960 by 500 pixels. The component uses React’s `useState` and event handling through `onMouseMove` to log mouse coordinates to the console. The SVG is created using JSX syntax within the `App` component, leveraging ReactDOM to mount the visualization to the page. While the initial commented-out markup suggests a more complex smiley face design, the active implementation displays only the base circle with a fill color and stroke.

Mar 18, 2022
Loading thumbnail…

Fetch and passing Data

This example demonstrates fetching a remote CSV file containing CSS named colors and logging its contents to the browser console. It uses the Fetch API with async/await syntax, wrapped in a custom `fetchText` helper function that returns the response as plain text. The data source is a GitHub Gist URL. The code shows both the modern promise-based approach and a commented-out alternative using nested promise callbacks. No visualization is rendered; the focus is purely on data retrieval and passing text data for subsequent use.

Mar 18, 2022
Loading thumbnail…

Fork of Let's Make a Face Part I

A React application renders a smiley face by composing modular SVG components. The face consists of a yellow background circle, two eyes as offset circles, and a mouth drawn using the D3 arc generator to create a pie-slice path. The face center is translated within an SVG container, and all elements are parameterized through component props, allowing for adjustable positioning and sizing. The drawing is constructed via React’s declarative syntax, with the D3 `arc` API specifically used to define the mouth’s inner and outer radii and angular sweep.

Mar 18, 2022
Loading thumbnail…

Fork of Hello HTML

This example is a minimal, blank HTML page. It contains no visible data visualization, displaying only an empty body element. The page is a fork of a "Hello HTML" template and relies solely on the standard HTML5 structure, with no external libraries or JavaScript. Its purpose is to serve as a bare-bones starting point, where any visualization could be added, but currently it simply renders a blank document in the browser. The provided README also includes an embedded YouTube video, which does not load within the main page itself.

Mar 17, 2022