Julia

@jhjanicki·5 public vizzes

Loading Data with React and D3

This example demonstrates how to load and summarize a CSV dataset in a React application using D3 utilities. The component displays the data’s size in kilobytes, row count, and column count in large text. React’s `useState` and `useEffect` hooks manage the asynchronous data loading, while D3’s `csv` and `csvFormat` functions fetch and format the data from a GitHub Gist containing CSS named colors. D3 version 5 and React 16 are used together.

Oct 3, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors, displaying the file size, row count, and column count as large text on the page. The code uses the D3 v5 library’s `d3.csvParse` method to convert fetched text into a data array, while the data is retrieved via the Fetch API with `async` and `await` syntax. The source CSV is hosted as a GitHub Gist, and the visualization emphasizes the parsing workflow rather than graphical rendering.

Oct 3, 2021

Loading thumbnail…

Mouse Follower

A smiley face built with React follows the user’s cursor across a full-screen SVG canvas. The component uses React’s `useState` hook to track mouse coordinates, updated via the SVG `onMouseMove` event, and renders a circle element centered on those coordinates. The visualization demonstrates unidirectional data flow with a blank viewport and no additional data source.

Oct 3, 2021

Loading thumbnail…

Loading and parsing csv data

This example demonstrates how to load and parse CSV data from a remote URL using the JavaScript Fetch API. It shows the raw text content of a CSV file listing CSS named colors, fetched from a GitHub gist. The code defines an asynchronous function that uses `fetch` and `response.text()` to retrieve the file, then logs the resulting text to the browser console. It also illustrates promise chaining and contrasts the `.then()` approach with `async`/`await` syntax.

Oct 3, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a grid of fifteen smiley faces, each with randomized eye and mouth sizes, rendered as yellow SVG circles with black outlines. Built with React and D3 v7, the visualization uses reusable components like `FaceCircle`, `Eyes`, and `Mouth` to compose each face. The `Mouth` component leverages D3's `arc` generator to create a curved smile path, while the `FaceContainer` wraps the SVG elements and centers them via a translation transform.

Sep 2, 2021