matheus-sa-ferreira

@matheus-sa-ferreira·5 public vizzes

Loading data with React and D3

This example demonstrates how to load external data with D3 utilities and manage it with React state. The application fetches a CSV file containing CSS named colors from a GitHub gist URL using `d3.csv`, and the data is stored in React’s `useState` hook. The rendering uses SVG, with static placeholder circles drawn in the HTML for reference. The code includes commented-out logic for displaying data statistics, such as file size, row count, and column count, but the visible implementation focuses on the data-loading pattern within a React component. The project uses React 17, D3 v6, and renders to the DOM via `ReactDOM.render`.

Mar 18, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v6’s `d3.csv` method, which fetches a remote file and returns a promise. The parsed dataset, sourced from a GitHub gist containing CSS named colors, is summarized with three metrics: file size in kilobytes using `d3.csvFormat`, row count, and column count. These values are concatenated into a message and displayed inside a `<pre>` element. The code also includes commented-out alternatives using the Fetch API and `d3.csvParse`.

Mar 18, 2021

Loading thumbnail…

Mouse follower

A React application renders an SVG circle that tracks the mouse cursor in real time. The circle's position updates via React's `useState` and `useCallback` hooks, which handle `mousemove` events on the SVG element. The example demonstrates simple interactive rendering with D3's `arc` import unused, relying instead on React's declarative state management. The visualization uses a 960x500 SVG canvas with a fixed circle radius, showing how React can manage dynamic visual updates without explicit D3 selection or transition APIs.

Mar 16, 2021

Loading thumbnail…

Smiley Face Part I

A grid of eighteen smiley faces is rendered with the React framework, each face drawn using SVG elements. The faces are assembled from separate React components for the background circle, eyes, and mouth, with the mouth shape generated using the d3 `arc` function to create an arc path. Randomized parameters for eye offset, eye radius, mouth radius, and mouth width give each face a slightly different expression. The overall composition is a playful, irregular array of cartoon-like faces.

Mar 16, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a smiley face using React and D3.js, displaying a yellow circle with black outlines for the face, eyes, and mouth. The face includes two star-shaped pupils created with `d3.symbol()` and `d3.symbolStar`, positioned over white iris circles. The mouth is drawn as an arc using `d3.arc()` with specified inner and outer radii. The visualization is built with SVG elements within a React component, where D3 functions generate the geometric paths for the mouth and star shapes.

Mar 16, 2021