DeborahVdeV

@DeborahVdeV·5 public vizzes

Data Loading with D3 and React

This example demonstrates asynchronous data loading in a React application using D3. It fetches a CSV file from Google Sheets and displays the file’s size in kilobytes, row count, and column count as text on the screen. The code uses the `useState` and `useEffect` hooks to manage the loading state and calls `d3.csv` to parse the remote data. React renders the resulting summary message via `ReactDOM.render`, with a simple `<pre>` element showing “loading…” until the data arrives.

Mar 17, 2021

Loading thumbnail…

Loading and parsing CSV Data

This example displays basic metrics about a CSV file loaded from a Google Sheets URL, presenting the data size in kilobytes, row count, and column count as plain text on a webpage. It demonstrates asynchronous data loading and parsing using the `d3.csv` method, which fetches the remote spreadsheet and converts it into an array of objects. The code then computes the formatted string length with `d3.csvFormat`, accesses `data.length` for rows, and uses `data.columns.length` to count columns, writing the result into a DOM element via `textContent`.

Mar 16, 2021

Loading thumbnail…

Mouse Follower

An interactive SVG circle in yellow follows the mouse pointer inside a 960×500 pixel viewport, updating its center coordinates in real time. Built with React and ReactDOM, it uses the `useCallback` hook to handle the SVG `onMouseMove` event, reading `clientX` and `clientY` from the event to update state via `setMousePosition`. The circle's radius is fixed at 30 pixels.

Mar 12, 2021

Loading thumbnail…

Fork of HTML Starter

This example renders a grid of six cartoon faces using React components composed from SVG primitives. Each face is generated by mapping over an array from `d3.range`, with random values for eye radius, mouth radius, and mouth width injected via `Math.random()`. The `Mouth` component uses `d3.arc` to create a semicircular path, while `BackgroundCircle`, `Eyes`, and `FaceContainer` assemble the yellow circle, black stroke, and centered SVG group. The visualization demonstrates reusable React components with D3 for geometry, rendered directly to SVG in a fixed 200×300 viewport.

Mar 11, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal React application that renders two circles onto an HTML page. The circles are hard-coded SVG elements positioned at specific coordinates, with a stroke applied to each. The code uses React 17 and ReactDOM to mount a component, though the visible visualization consists of static, pre-defined shapes rather than data-driven or interactive elements. The page styling centers the content with a large font size, and the body uses no margin with hidden overflow.

Mar 5, 2021