Skip to main content
Log in
T

Tung Pham

@tpham20908·10 public vizzes

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV dataset containing CSS named colors using D3 v5. The visualization displays basic statistics about the loaded data—its file size, row count, and column count—in large text. The code primarily uses the `d3.csv` method with a promise to fetch and parse the remote CSV file. An alternative approach using the Fetch API with `async` and `await` is also shown in commented code, alongside a demonstration of the older "pyramid of doom" callback pattern.

Feb 10, 2022
Loading thumbnail…

Mouse Follower

A full-screen SVG circle, initially centered, does not respond to mouse movement; the program stores pointer position but never updates the circle's coordinates. Rendered with React 16.9 and ReactDOM, the app derives viewport dimensions from `window.innerWidth` and `window.innerHeight`, then draws a single fixed-radius circle via JSX in an SVG element. No event listeners, state updates, or motion logic appear in the code, so the circle remains static despite the title's implication of following behavior.

Feb 10, 2022
Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” in large, centered type as a basic demonstration of an HTML page styled with CSS and enhanced with JavaScript. The script fetches a CSV file of CSS named colors from a GitHub gist using the Fetch API and logs the resulting text data to the browser console. No chart or graphical visualization is rendered, but the code illustrates a minimal setup for loading external data into an HTML document.

Feb 10, 2022
Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data, plotting miles per gallon against horsepower, with tooltips revealing car names. It renders using the Vega-Lite API, which compiles specifications to Vega and renders to SVG. The code loads the auto-mpg dataset via `d3.csv`, configures axis and label styling, and fits the visualization to the window. Custom styling includes removing axis domains and settings for guide labels and titles.

Mar 17, 2021
Loading thumbnail…

Mouse Follower

A yellow circle follows the mouse cursor across a full-window SVG canvas. The circle’s position updates in real time to match the cursor’s coordinates, offset slightly down and right. The visualization uses React with the `useState` hook to track mouse movement and re-render the SVG circle on each event. The `onMouseMove` event handler captures `clientX` and `clientY` from the JavaScript `MouseEvent`, and the circle is drawn with a fixed radius of 30 pixels and a fill color of `#fcd947`.

Mar 14, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js, displaying the file size, row count, and column count of a remote dataset containing CSS named colors. It uses `d3.csv` to fetch and parse the data from a GitHub gist URL, then formats the output with `d3.csvFormat` to calculate the data’s size in kilobytes. The message is rendered into a `<pre>` element with large typography. A commented-out alternative using the Fetch API and `d3.csvParse` shows an equivalent approach.

Mar 14, 2021
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV dataset containing CSS named colors using D3 v5. The visualization displays basic statistics about the loaded data—its file size, row count, and column count—in large text. The code primarily uses the `d3.csv` method with a promise to fetch and parse the remote CSV file. An alternative approach using the Fetch API with `async` and `await` is also shown in commented code, alongside a demonstration of the older "pyramid of doom" callback pattern.

Mar 13, 2021
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This fork demonstrates a bare-bones HTML page for loading and parsing CSV data. The example uses a minimal `index.html` file with an embedded YouTube video and an empty body, meaning no JavaScript libraries or rendering functions are active. The page contains only the foundational HTML structure, with no external APIs such as D3 or Canvas implemented. It serves as a starting point for users to add their own data-loading code. The README file links to the video for guidance, but the page itself shows no visual output or data processing.

Mar 13, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse external CSV data for use in a web-based visualization with D3.js. It shows a minimal HTML page that sets up the foundation for fetching tabular data and converting it into a JavaScript-usable format. The code relies on D3’s CSV parsing methods to handle the data ingestion process, though no visualization is rendered yet. The implementation focuses on the initial data-loading step, highlighting the API calls required to read and structure the dataset for subsequent graphical display.

Mar 13, 2021
Loading thumbnail…

Face1

A grid of thirty cartoon faces, each rendered as an independent SVG component, demonstrates how React composes reusable visualization elements. Each face uses D3’s `arc` generator to draw a mouth with a randomized arc angle and radius, while static SVG circles form the background, eyes, and outer stroke. The faces vary randomly in eye size, eye offset, mouth radius, and mouth width, all generated by `Math.random()` within fixed ranges. The code uses React 17, D3 v6, and SVG within a `FaceContainer` that translates a group to each face’s center.

Mar 13, 2021