Fábio Correia

@XpTo2k·9 public vizzes

Loading Data with React & D3

This example shows a React application that uses D3 to load and summarize a CSV dataset. It displays a message reporting the data’s size in kilobytes, row count, and column count, or a "Loading…" placeholder while fetching. The code uses React’s `useState` and `useEffect` hooks alongside D3’s `csv` function to asynchronously retrieve data from a GitHub gist. The rendered output is a simple HTML `pre` element, demonstrating the integration of React and D3 for data loading workflows.

Oct 24, 2022

Loading thumbnail…

Mouse Follower

A smiley face follows the mouse cursor across a full-screen SVG canvas. The application tracks the pointer's position and renders a yellow circle with facial features at that location, creating a playful interactive effect. Built with React and ReactDOM, the example uses the `onMouseMove` event handler and `useState` to update the circle's `cx` and `cy` coordinates dynamically. The SVG viewport matches the browser window dimensions, and the smiley face’s position updates instantly as the user moves the mouse.

Oct 24, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This visualization demonstrates how to load and parse CSV data, displaying basic statistics about the dataset in a large text format. It fetches the CSS Named Colors dataset from a GitHub gist and reports the file size in kilobytes, the number of rows, and the number of columns. The example uses D3 v5’s `d3.csv` method for parsing, with an alternative commented-out approach using the Fetch API, `async/await`, and `d3.csvParse`. The resulting information is rendered into an HTML `<pre>` element via the DOM’s `textContent` property.

Oct 20, 2022

Loading thumbnail…

Smiley Face Part VI

A grid of 18 randomized smiley faces renders in SVG, each face reusing the same component structure with varying eye offsets, eye radii, and mouth dimensions. The React app maps over a d3 range to generate distinct face instances, while D3's arc API constructs the mouth path and CSS positioning arranges the faces edge-to-edge. The code composes modular React components for the background circle, eyes, and mouth within a reusable Face container.

Oct 19, 2022

Loading thumbnail…

Smiley Face Part V

This example assembles a smiley face from modular React components, rendering a yellow circle with eyes and an arc-shaped mouth as SVG elements. The mouth uses the `d3.arc()` API to generate a path with specified inner and outer radii and angular extents. Each facial feature is a separate React component (`BackgroundCircle`, `Eyes`, `Mouth`) receiving numeric props like `eyeOffsetX`, `eyeRadius`, and `mouthWidth`. The visualization is computed declaratively in React, with D3 providing only the arc path generation, and the final SVG is drawn at fixed 960×500 pixel dimensions.

Oct 19, 2022

Loading thumbnail…

Smiley Face Part IV

This example shows a classic yellow smiley face with two eyes and a curved mouth, centered in an SVG canvas. Built with React for the component structure and D3’s `arc()` generator for the mouth path, the face uses circles for the background and eyes, with stroke widths defining the outline. The code defines a reusable `BackgroundCircle` component and renders the smiley by translating the coordinate system to the canvas center. The mouth is derived from an arc with explicit inner and outer radii and start/end angles, while D3 v5 is loaded via CDN alongside React 16.9.

Oct 19, 2022

Loading thumbnail…

Smiley Face Part III

A yellow smiley face with black outlines is rendered as a full-screen SVG using React. D3's `arc` generator creates the mouth as a curved path, while circles draw the face, eyes, and stroke. The visualization is built with React components and D3 v7 in an SVG coordinate system sized to the browser window.

Oct 19, 2022

Loading thumbnail…

Let's Make a Face Part I (HTML, CSS, SVG)

This example displays a simple smiling face constructed entirely with SVG primitives: a large yellow circle for the head outlined in black, two smaller black circles for eyes, and no mouth. The code uses inline SVG elements within a bare HTML page, setting circles with explicit `cx`, `cy`, and `r` attributes. It relies on pure HTML, CSS, and SVG APIs—no external libraries—and the rendering is done directly by the browser’s SVG engine. A linked YouTube video demonstrates the drawing process, though the page itself is static.

Oct 19, 2022

Loading thumbnail…

Let's Make a Face Part II

This example presents a simple yellow smiley face rendered as an SVG graphic using React. The visualization shows a large circle for the face and two smaller circles for the eyes, all centered within a 960 by 500 canvas. The code defines geometric constants for positioning and sizing, then uses React’s `ReactDOM.render` to inject the SVG elements into the page. It relies on the React and ReactDOM libraries loaded from unpkg, with the SVG markup constructed directly through React component syntax.

Oct 15, 2022