jay-chitsakdanon

@jay-chitsakdanon·4 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load and parse remote CSV data using D3 v7, displaying the file size, row count, and column count of the dataset on the page. It fetches the text from a GitHub Gist containing CSS named colors, then parses it with `d3.csvParse`. The parsed result exposes the number of rows via `data.length` and column names via `data.columns`, which are written into a `<pre>` element with large font styling. The code uses the Fetch API's `fetch` and `response.text()` to retrieve the raw CSV string before parsing.

Aug 31, 2021

Loading thumbnail…

Smile face II

A smiley face is rendered as a single SVG circle that follows the mouse cursor across a 960-by-500 viewport. The circle’s center coordinates update on every mouse movement via React state and the `onMouseMove` event handler. The example uses React 16.9 and D3 v7’s `arc` import (though unused), with SVG rendering managed by ReactDOM. The circle starts at the center and tracks the pointer’s client coordinates in real time.

Aug 31, 2021

Loading thumbnail…

Smile face

A grid of 18 identical smiley faces is rendered, each composed of a yellow circle with a black outline, two black eyes, and a curved mouth formed by a D3 arc path. The faces are generated procedurally using React components that compose the visual elements. The SVG output is centered within a fixed 160 by 160 pixel canvas, and the code leverages the D3 library’s `arc` function to create the mouth path and a `range` function to generate the array of repeated faces.

Aug 30, 2021

Loading thumbnail…

Smile face III

A cheerful yellow smiley face rendered in an SVG uses D3's `arc` and `line` generators to draw its curved mouth and nose. The face is composed of circles for the head, ears, eyes, and nose, with the mouth as a thick arc path and the nose as a stroked line. The visualization is built with React, using D3 v7's `arc` and `line` APIs, and positioned within a 960x500 viewport. The design is purely illustrative, with no external data source.

Aug 27, 2021