Michael

@kemonprogrammer·7 public vizzes

Loading Data with React and D3

This example demonstrates how to load and summarize a CSV dataset within a React application using D3’s `csv` function. It displays the file size in kilobytes, row count, and column count in large monospaced text. The data comes from a GitHub gist containing CSS named colors. The code combines React’s `useState` and `useEffect` hooks with D3’s `csvFormat` to process the fetched data, showing a loading message until the asynchronous request completes.

Jan 5, 2023

Loading thumbnail…

3D Cubes

The visualization renders a grid of 3D cubes in an isometric projection using React and SVG, with each cube composed of three visible faces: a front square, a top polygon, and a right polygon. The cube faces are drawn as separate SVG polygons using React components (`CubeFront`, `CubeTop`, `CubeRight`, `AbstractCubeSide`), with coordinates calculated from a front square and a fixed skew depth. The grid is arranged in a 2x2 layout with an additional series of top faces extending diagonally, creating a layered effect. The example uses React 17 and D3 v7, though D3 is loaded but not directly utilized in the rendering logic.

Dec 28, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the loading and parsing of a remote CSV file containing CSS named colors, displaying summary statistics such as file size, row count, and column count. The code uses D3 v7’s `d3.csv` method with a Promise-based `.then()` callback to fetch the data from a GitHub Gist URL, while commented alternatives show `fetch` with `async`/`await` and `d3.csvParse`. Results are rendered as text inside a large `<pre>` element, illustrating basic data ingestion workflows.

Dec 30, 2021

Loading thumbnail…

React State Hook example

This example demonstrates a minimal React component that uses the `useState` hook from React 17 to track and display a numeric click counter. It renders a button and a paragraph showing how many times the button has been clicked, with each click updating the state and re-rendering the component. Built with ReactDOM rendering into a root div, the visualization uses `d3.v7` for potential data manipulation but does not directly call any d3 functions. The code shows a simple state-driven interaction rather than a graphical chart.

Dec 30, 2021

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The example demonstrates a basic interactive pattern using React’s `useState` and `useCallback` hooks to track pointer coordinates and update the circle’s position. The D3.js library supplies the SVG rendering, while React manages state and event handling through `onMouseMove`. The initial mouse position is centered on the canvas, and the circle has a fixed radius of 20 pixels.

Dec 30, 2021

Loading thumbnail…

Hello HTML

A grid of 18 smiley faces appears, each with a randomly colored background circle, sunglasses, and a mouth. The faces are rendered as SVG components using React, with the `arc` generator from d3-shape creating the curved mouth and glasses. The `range` helper from d3 generates the array of faces, while React composes reusable components like `Face`, `BackgroundCircle`, and `SunGlasses` to assemble each character.

Dec 30, 2021

Loading thumbnail…

React Boilerplate

This example presents a minimal React boilerplate for integrating D3.js version 7 with React 17, setting up a full-screen container ready for custom visualizations. The code imports React and ReactDOM, defines a blank `App` component with a 960-by-500 pixel canvas, and mounts it to the root DOM element. Although the visualization logic is not yet implemented, it demonstrates the foundational structure for combining D3’s rendering capabilities with React’s component-based state management. The example uses unpkg-hosted UMD builds for both libraries, relying on ReactDOM’s `render` method to attach the component to the page.

Dec 30, 2021