Tetiana Humeniuk

@tthcvxx·6 public vizzes

Arc Diagram try

This arc diagram example loads a CSV file of experimental data from a GitHub Gist, which is parsed using D3’s `d3.csv` method to report the dataset’s size, row count, and column count. The visualization displays this summary information as large, styled text on a blank page, with an alternative commented-out approach using `fetch` and `async`/`await` for comparison. The example demonstrates basic CSV parsing and asynchronous data loading concepts within a React framework, using D3 v5.

Jan 2, 2023

Loading thumbnail…

Parsing CSV Data with D3

This visualization demonstrates how to parse CSV data using D3.js by fetching a remote file and displaying summary statistics. The page shows the dataset’s row count, column count, and file size in kilobytes within a large text element. It uses D3’s `d3.csv()` function to load and parse the CSV from a GitHub gist, then formats the data with `d3.csvFormat()` to calculate its size. The example also includes commented-out code using `fetch()`, `async`/`await`, and `d3.csvParse()` as an alternative parsing approach.

Jan 1, 2023

Loading thumbnail…

Fork of gme correlation

A correlation diagram displays relationships between nodes as a series of curved arcs, with nodes positioned along a horizontal axis and links drawn as arcs above them. The visualization highlights connections on mouseover by adjusting opacity, stroke width, and label size. Built with React and D3 v7, the code uses `arcDiagram` for layout, `scalePoint` for node positioning, and SVG `path` elements with elliptical arc commands. Data is loaded as JSON from a GitHub gist and rendered as circles with rotated text labels.

Dec 31, 2022

Loading thumbnail…

Mouse Follower

A circle follows the user's mouse cursor across a full-window SVG canvas, updating its position in real time. The visualization demonstrates React state management with the `useState` and `useCallback` hooks, where a `mousemove` event handler on the SVG element captures client coordinates. ReactDOM renders the circle at the stored mouse position, with the window dimensions defining the SVG's width and height. The code uses React 16.9 and renders purely with SVG elements, with no external data source.

Dec 31, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example shows the initial step of loading raw CSV data from a remote source and printing its contents to the browser console. It defines an asynchronous `fetchText` helper that uses the Fetch API to retrieve a text file from a GitHub Gist URL, then chains `.then()` to log the parsed text. The code also includes commented-out alternatives and an unfinished `fetch(url)` call. The example relies solely on native browser APIs—`fetch`, `response.text()`, and `async/await`—to handle the CSV file, without any external libraries or data parsing beyond displaying the raw string.

Dec 30, 2022

Loading thumbnail…

Smiley Face Part 1

A yellow smiley face rendered in SVG sits centered on a plain white background, composed of a black-outlined circle, two black eyes, and an arc-shaped mouth. Built with React components and D3 v7, the face uses the `arc()` generator to define the mouth path. Functional components like `BackgroundCircle` and `Eyes` accept explicit props for positioning, while a `FaceContainer` wraps the SVG group with a computed transform.

Dec 30, 2022