EricWindler

@EricWindler·7 public vizzes

Loading data with D3 and React

This example demonstrates how to load and summarize a CSV dataset within a React application using D3. It fetches CSS named color data from a GitHub gist via D3’s `csv` function, then displays the file size in kilobytes, row count, and column count in a large `<pre>` element. The React `useState` and `useEffect` hooks manage the asynchronous data loading, while a custom `message` function calculates the statistics using `d3.csvFormat` and `data.columns`.

Dec 9, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-screen SVG canvas. The circle's position is bound to the mouse coordinates, updated on every mouse move event. The example uses React with a `useState` hook to manage the cursor position, and the ReactDOM `render` method to mount the component. D3.js is loaded but not actively used in the rendering logic, which relies solely on native SVG elements and React event handling. The circle is drawn with a fixed radius of 30 pixels.

Dec 9, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a React application using the Fetch API. It fetches a dataset of CSS named colors from a GitHub gist URL, converts the response to text, and logs the raw CSV content to the browser console. The code defines an asynchronous helper function, `fetchText`, which uses `await` to handle the promise-based fetch and text extraction. No chart or visualization is rendered; the focus is purely on the data loading and parsing workflow.

Dec 8, 2021

Loading thumbnail…

Fork of Smiley Face Part III

A grid of 18 smiling faces appears, each generated with randomized facial feature positions and sizes. The example demonstrates reusable React components for drawing an SVG face, with D3's `arc` API creating the mouth path. The `range` function from D3 generates the grid, while each face receives randomized values for eye offset, eye radius, mouth radius, and mouth width. Faces are rendered through layered React components: `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth`, all composed within an SVG canvas.

Dec 8, 2021

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face is drawn as a full-screen SVG, with its head, eyes, and mouth created from geometric shapes. The face fills the viewport, with a yellow circle for the head, blue eyes with white highlights, and a curved arc for the mouth. The implementation uses React to render the SVG elements and D3 v7’s `d3.arc` and `d3.line` APIs to generate the mouth, dimple, and nose paths. All coordinates are calculated from the window’s inner width and height, making the visualization responsive.

Dec 8, 2021

Loading thumbnail…

ReactPartSmiley

This example renders a partial smiley face using React and SVG. It shows a yellow circle with a black stroke as the head, two dark eye circles, and two white pupil circles offset slightly from the eyes. The code defines a React functional component `App` that returns an SVG element, using static numeric constants for width, height, and offset values. It leverages `ReactDOM.render` to mount the component into the DOM, with React and ReactDOM loaded from a CDN.

Dec 7, 2021

Loading thumbnail…

First Smiley Face

This example shows a single, large yellow circle with a black outline representing a face, flanked by two smaller black circles for eyes on a plain white background. The visualization conveys a minimalist, iconic smiley face without a mouth. It is rendered as static vector graphics using raw HTML5 `<svg>` elements, specifically `<circle>` tags with explicit `r`, `cx`, and `cy` attributes for positioning and sizing, with colors and stroke applied via presentation attributes. The page itself has no margins or scrolling, making the face the sole focus.

Dec 7, 2021