joneftali

@joneftali·7 public vizzes

Loading data for react

This example demonstrates how to load CSV data into a React application using D3 utilities, showing the dataset’s column count, row count, and size in kilobytes. The visualization renders a simple text message via React state, which is initially null and then populated asynchronously after the data fetches. It uses `d3.csv` to parse the external gist-hosted CSS named colors dataset, `useState` and `useEffect` for state management, and `d3.csvFormat` to calculate the data size. The ReactDOM render updates the display once the data arrives.

Sep 18, 2023

Loading thumbnail…

Loading and Parsing CSV Data part two

This example demonstrates the basic structure of a CSV file loaded remotely, displaying the number of columns, rows, and approximate size in kilobytes as large text. It uses the `d3.csv` method to fetch and parse a gist-hosted CSS named colors dataset, then relies on `d3.csvFormat` to calculate the byte size. The page also includes commented-out alternatives using `fetch`, `async/await`, and `d3.csvParse` to show other parsing workflows. The rendering is minimal, with a styled `pre` element updating via the DOM’s `textContent`.

Sep 18, 2023

Loading thumbnail…

Smiley Face Part 1

A React-rendered SVG smiley face displays a yellow circle with a black outline, two black eyes, and a curved mouth. The layout centers the face in a 960 by 500 pixel viewport, using fixed offsets for eye placement and an arc generator from d3.v7 to shape the smile. The code relies on React 18 and D3’s `arc()` API, with all positions computed as constants before rendering. The face is drawn entirely from primitive SVG shapes, with no external data source, and the mouth’s stroke width and radius are defined numerically.

Sep 1, 2023

Loading thumbnail…

Mouse follower

A circle follows the mouse cursor across an SVG canvas, creating a simple interactive visual response. The React application tracks cursor position through an `onMouseMove` event handler, updating state via the `useState` and `useCallback` hooks, and renders the circle using D3 v7 within an SVG element. The circle’s center coordinates are dynamically bound to the latest mouse position, with a fixed radius of 30 pixels.

Sep 1, 2023

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to fetch and read a CSV file from a remote URL using the `fetch` API. The code loads the cssNamedColors dataset from a GitHub gist and logs its raw text content to the browser console. It uses the `fetchText` function, which employs `fetch` and `response.text()` to retrieve the data asynchronously. The page’s console output displays the parsed CSV data, showing the first step in processing tabular data for visualization.

Aug 25, 2023

Loading thumbnail…

Fork of Smiley Face Part 5

A grid of 18 randomly generated smiley faces, each composed of a yellow circular background, two black eyes, and a black arc-shaped mouth. The faces vary in stroke width, eye offset, eye radius, mouth radius, and mouth width due to randomized parameters. Rendered with React 18 and d3.v7, the code uses the D3 `arc` generator to create the mouth path and the `range` function to produce the grid layout. All faces are drawn as SVG elements within a shared container component.

Aug 22, 2023

Loading thumbnail…

Fork Smiley Face Part 2

The visualization displays a grid of eighteen smiley faces, each rendered as an SVG with a yellow circular background, black outline, eyes, and a mouth. The faces are generated using React components and the D3.js library, specifically the `arc` API to create the mouth shape. Each face is instantiated with randomized parameters for stroke width, eye position and radius, and mouth dimensions, producing a varied set of faces. The rendering approach relies on React's component structure, with `FaceContainer` providing the SVG wrapper and transformation.

Aug 22, 2023