MyTrueName

@MyTrueName·5 public vizzes

Displaying d3 data with React

This example displays the CSS named colors as a circular donut chart, with each color occupying a slice of the ring. It loads the color data from a CSV file using d3.csv, then renders each slice as an SVG path element created with d3.arc. React manages the component state and rendering, using useState and useEffect to fetch the data asynchronously and map it to the chart. The visualization highlights the integration of d3’s data-loading and shape-generation APIs with React’s declarative component-based UI.

Apr 25, 2021

Loading thumbnail…

Rendering data with React

This example fetches CSS named color data from a CSV file using d3.csv and renders each row as a colored horizontal strip via React components. The React app uses the useState and useEffect hooks to load the data asynchronously, displaying a loading message until the CSV resolves. Each div’s background color is set directly from the ‘RGB hex value’ column, producing a 960-pixel-wide spectrum of 148 color swatches. ReactDOM renders the top-level App component into the page root, with styling applied through inline attributes.

Apr 24, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates the basics of loading and parsing CSV data with D3.js. It displays a summary message showing the number of rows, columns, and file size in kilobytes of a remote CSV file containing CSS named colours. The code uses `d3.csv()` to fetch and parse the data asynchronously, then accesses the resulting object’s `length` and `columns` properties to create the summary. The parsed data is formatted back with `d3.csvFormat()` to calculate the file size, and the message is rendered in a large `<pre>` element.

Apr 23, 2021

Loading thumbnail…

Mouse follower

A yellow smiley face follows the user's mouse cursor across a full-screen interactive SVG canvas. The face is drawn with React components that update its position based on mouse movement state. The example uses React 16.9's `useState` and `useCallback` hooks to track cursor coordinates and re-render the SVG circle elements accordingly. All rendering is client-side in the browser with no external data source.

Apr 22, 2021

Loading thumbnail…

Smiley face!

This example renders a grid of eight procedurally generated smiley faces using React and SVG. Each face is composed of reusable components—a yellow background circle, two eyes, and a mouth—drawn with SVG primitives and positioned via a transformed `<g>` element. The mouth path is created using the D3 `arc()` generator, while `Math.random()` varies each face’s stroke width, eye radius, eye offset, and mouth thickness and radius, producing slight visual differences. The code imports React, ReactDOM, and D3’s `range` and `arc` functions, with rendering handled entirely in JSX.

Apr 21, 2021