Victor Abrokwah

@kingportipher·6 public vizzes

Fork of Mouse Follower

This example displays a loading message while fetching a CSV file via D3’s `csv` function, then reports the file size in kilobytes, row count, and column count. Built with React hooks (`useState`, `useCallback`) and D3 v7, it renders the data summary inside a React component. The visualization itself is minimal, focusing solely on the asynchronous data-loading status and parsed dataset statistics.

Oct 31, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a large pre-formatted text message reporting the size, row count, and column count of a CSS Named Colors dataset loaded from a CSV file. It uses D3 v5’s `d3.csv` promise-based function to fetch and parse the remote CSV, then formats the summary using `d3.csvFormat` and `data.columns.length`. The visualization is minimal, focusing on parsing and data introspection rather than graphical rendering, with commented-out alternatives using `fetch` and async/await.

Oct 31, 2021

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a single circle rendered within an SVG container that tracks the mouse position, though the circle itself remains fixed at its initial coordinates. Built with React and D3 v7, the application uses React’s `useState` to store the mouse position and `useCallback` to capture mouse movement events on the SVG element. The code imports React and ReactDOM to manage the component lifecycle, while the SVG’s `onMouseMove` handler logs the cursor’s client coordinates to the console. The visualization highlights basic React state management and event handling within a D3-powered SVG canvas.

Oct 27, 2021

Loading thumbnail…

Mouse Follower

A simple SVG face, rendered with React, tracks nothing; it is a static smiling face centered in a yellow circle. The code uses the `arc` helper from `d3-shape` to define the mouth’s path, and React components construct the SVG elements, including two eyes and a stroke-bordered head. The face is positioned using a group element with a `transform` translation, and ES6 template literals set the coordinate values. The example highlights how D3’s geometry utilities can be combined with React for declarative SVG drawing.

Oct 25, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API. The code defines an asynchronous `fetchText` function that retrieves the data from a GitHub Gist and logs the raw text content to the browser console. The page displays the static message “Hello HTML!” in large centered text, while the fetched data remains invisible to the user. This is a minimal React starter example that illustrates the fundamental step of acquiring external data before any visualization can be constructed, though no parsing or rendering is performed beyond the console output.

Oct 25, 2021

Loading thumbnail…

Fork of HTML Starter

A stylized smiley face is drawn using React and D3, with a yellow circle for the head, two black eyes, and a curved mouth. The face is rendered as SVG elements, positioned relative to a central coordinate system. The code defines constants for dimensions and uses the `arc` function from D3 to generate the mouth path with specified inner and outer radii and angles. React renders the SVG tree into the DOM, while D3 provides the geometric path calculation.

Oct 23, 2021