Gimmi45

@Gimmi45·5 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load and parse remote CSV data, displaying basic dataset statistics as plain text. It fetches a raw CSV file from a GitHub gist using the Fetch API, then parses the text with `d3.csvParse` to produce an array of objects and column metadata. The visualization shows the file size in kilobytes, row count, and column count in a simple `<pre>` element. The code uses D3 v7’s parsing utilities alongside native JavaScript async functions, without any graphical rendering.

Jan 28, 2022

Loading thumbnail…

MouseFollower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time as the pointer moves. The example uses React state with the `useState` and `useCallback` hooks to track mouse coordinates, which are passed as `cx` and `cy` attributes to a D3 v7-generated circle element. The SVG itself handles mouse movement events via `onMouseMove`, while the ReactDOM library renders the component into the DOM.

Jan 24, 2022

Loading thumbnail…

Fork of Smiley Face final

A grid of eighteen randomly generated smiley faces, each rendered as an SVG with a yellow circular background, black eyes, and an arc-shaped mouth. The React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) compose the visualization, while d3’s `range` and `arc` APIs generate the layout and mouth path. Random `Math.random` values vary stroke width, eye placement, and mouth dimensions per face.

Jan 24, 2022

Loading thumbnail…

Smiley Face part 1L

A grid of eighteen smiley faces, each generated with random dimensions for its features, is rendered as SVG via React. The faces use D3’s `arc` generator to draw a mouth and separate circle components for the background, eyes, and head. Random values for stroke width, eye offset, eye radius, and mouth size make every face unique, all centered within a fixed 166-by-166 pixel viewport.

Jan 24, 2022

Loading thumbnail…

Fork of Smiley Face part 1L

This example displays a partial smiley face constructed from three SVG circles: a large yellow head and two black eyes. The head is centered with a black stroke, while the eyes are placed symmetrically. Rendering relies on static SVG elements defined directly in the HTML, with no interactive behavior or data binding. The code uses basic SVG circle elements and CSS styling within an SVG container sized at 960 by 500 pixels.

Jan 21, 2022