banegit

@banegit·3 public vizzes

Loading and Parsing CSV

This example demonstrates how to load and parse a CSV file using D3 v6. It fetches the CSS named colors dataset from a GitHub gist and displays basic statistics about the file: its size in kilobytes, the number of rows, and the number of columns. The visualization uses `d3.csv()` to fetch and parse the data, and `d3.csvFormat()` to measure the raw text length. Results are rendered as large text in an HTML `<pre>` element, providing a clear readout of the dataset's dimensions.

Feb 2, 2021

Loading thumbnail…

Mouse Follower

A full-screen React SVG component renders a single circle that follows the mouse as it moves. The app tracks mouse coordinates using React's `useState` hook and handles `onMouseMove` events on the SVG element, updating the circle's `cx` and `cy` attributes in real time. The initial position is centered in the window, and the circle radius is fixed at 30 pixels. No external data source is used; the visualization simply demonstrates interactive state-driven rendering with React and SVG.

Jan 14, 2021

Loading thumbnail…

Smiley Face Part 1

This example shows a stylized smiley face built from a yellow circle, two eyes, and a mouth, centered within an SVG canvas. It renders a static face with a black stroke and filled yellow background, using React components to compose the face’s parts. The code leverages React’s component model, with the `d3.arc()` API from D3 v6 to generate the mouth path, while SVG circles are drawn directly via JSX. The face’s dimensions and feature positions are controlled by numeric props passed to the `Face` component.

Jan 13, 2021