Lívia Pinheiro

@liviatorresm·8 public vizzes

Fork of Hello HTML

A grid of eighteen cartoon faces is rendered, each with a yellow circular background, black-outlined eyes, and an arc-shaped mouth, all varying randomly in eye and mouth size. The example demonstrates reusable React components, composing a face from `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer` parts. It uses D3's `arc` generator to draw the mouths and the `range` function to create the grid, with React rendering the SVG elements directly.

Aug 16, 2024

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a minimal integration of React and D3 for loading and summarizing a local CSS named colors dataset. The interface displays a plain-text summary of the loaded data, including its size in kilobytes, row count, and column count, while showing a "Loading..." message before the data arrives. The application uses React's `useState` and `useEffect` hooks to manage asynchronous data fetching through D3's `csv` function, and a custom `message` module reports the data dimensions. The visualization is rendered via ReactDOM into a single `<pre>` element, with D3 v5 and React 16.9.0 loaded from CDNs.

Aug 13, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying summary statistics about the dataset. It uses the D3.js version 5 `d3.csv` function to fetch the CSS Named Colors dataset, then presents the file size in kilobytes, row count, and column count within an HTML `<pre>` element. The code also includes a commented-out alternative approach using the Fetch API with `async`/`await` and `d3.csvParse` for parsing. The visualization is minimal, focusing on the data-loading process rather than graphical rendering.

Aug 13, 2024

Loading thumbnail…

Fork of Fork of mouse event

A circle follows the mouse cursor across a 960-by-500 SVG canvas, with its center position updating in real time to match the pointer's coordinates. The visualization is built using React 18 and D3 v7, where the `useState` hook tracks the mouse position and a `useCallback` handler on the SVG element passes `clientX` and `clientY` values from the event to update the circle's `cx` and `cy` attributes. The code renders a single red circle via D3's `range` helper, though the range function is imported but unused in this example.

Aug 13, 2024

Loading thumbnail…

Fork of mouse event

A single SVG circle follows the mouse cursor across a 960-by-500 canvas. The visualization uses React's `useState` and `useCallback` hooks to track pointer coordinates from the `onMouseMove` event, updating the circle's center position in real time. The code imports `range` from d3 but does not use it. The graph is rendered through React's `ReactDOM.render` method, with the SVG container set to hide page overflow.

Aug 13, 2024

Loading thumbnail…

Fork of Fork of LoadingData

This example demonstrates the initial step of loading a CSV file from a remote URL using JavaScript's `fetch` API. The code fetches the `cssNamedColors.csv` file from a GitHub Gist, parses the response as text, and logs the raw contents to the browser console. It uses the `fetchText` async helper function to retrieve the data, showcasing a minimal pattern for preparing external datasets for visualization.

Aug 13, 2024

Loading thumbnail…

Fork of LoadingData

This fork of LoadingData demonstrates how to fetch and load a CSV file from a remote URL using the Fetch API. The example defines a custom `fetchText` function that retrieves the text content, which is then logged to the browser’s console. The data source is a GitHub Gist containing a list of CSS named colors. The visualization itself is minimal—showing no graphical output—but illustrates the foundational step of asynchronous data loading in JavaScript.

Aug 13, 2024

Loading thumbnail…

Fork of Fork of Hello HTML

A grid of six by three faces, each rendered as an SVG via React, shows randomized facial features. The D3 library’s `range` function generates the array of faces, while `d3.arc` constructs the mouth shape. Each face uses a yellow background circle, black stroke, and variable eye and mouth radii, producing a playful, varied set of expressions within a fixed 160-pixel square canvas.

Aug 13, 2024