heiltutanvidare

@heiltutanvidare·4 public vizzes

Loading Data with React & D3

This example demonstrates how to load and display a CSV dataset from a GitHub gist using React and D3. It shows the file size in kilobytes, row count, and column count as plain text. The code uses the `useState`, `useEffect`, and `useCallback` hooks to manage asynchronous data loading, with the `csv` function from D3 v5 fetching the data and updating React state. The `message` utility formats the summary from the parsed CSV structure.

Mar 3, 2021

Loading thumbnail…

Mouse Follower

A single black circle follows the mouse cursor across an SVG canvas, with React tracking pointer events to update its position. The example uses React's `useState` and `useCallback` hooks to store the `clientX` and `clientY` coordinates on every `onMouseMove`, re-rendering the circle's `cx` and `cy` attributes. Rendered via ReactDOM into a 960×500 SVG, it demonstrates a minimal interactive data-visualization pattern without any external data source.

Mar 3, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I

This interactive example demonstrates a React-based smiley face constructed from basic SVG shapes, with a yellow circle for the head and two smaller black circles for the eyes. The code uses React 17 and ReactDOM to render the elements, while the index.html file includes commented-out SVG markup showing the planned coordinates for the face components. Although the current version only displays a simple "Hello JSX" heading, the repository’s README and video link indicate the project’s goal of building a complete facial expression step by step. The example highlights how React can manage SVG rendering in a straightforward, component-based manner.

Mar 1, 2021

Loading thumbnail…

Fork of Hello HTML

This minimal HTML page renders a single dark circle centered in an SVG canvas. The entire visualization is defined inline in the `index.html` file, using a plain SVG `<circle>` element with a radius of 300 units and no fill or stroke attributes. No external libraries or datasets are involved—the example simply demonstrates the basic structure of an embedded SVG graphic within an HTML document, as shown by the bare-bones markup in the source file. The circle’s appearance relies entirely on default browser styling for SVG shapes.

Mar 1, 2021