dagtveit

@dagtveit·3 public vizzes

Fork of Loading Data with React & D3

This example demonstrates how to load and display metadata about CSS named colors using React state and D3 utilities. The application fetches a CSV file of color data via D3’s `csv` function, stores the result in React’s `useState` hook, and renders a summary message with the file size, row count, and column count. The code uses `useEffect` for the asynchronous data loading and `d3.csvFormat` to calculate the data size. The UI displays either a loading indicator or the computed statistics inside a `<pre>` element.

Aug 19, 2021

Loading thumbnail…

Smiley Face Part 1

A yellow smiley face rendered as a single SVG graphic, with black-stroked eyes, a circular head, and a curved mouth arc. The example uses React to declaratively define the SVG elements and D3’s `arc` generator to compute the mouth path from inner and outer radii and angular start/end values. All coordinates are derived from hardcoded width, height, offsets, and radii, producing a static composition centered in a 960x500 viewport. The code imports only the `arc` function from D3 v6.

Aug 19, 2021

Loading thumbnail…

Smiley face part 1

This example shows the first step in building a smiley face using React with SVG rendering. It displays a large yellow circle bordered in black, with two smaller black circles positioned as eyes, all drawn directly in the HTML using inline SVG elements. The code uses React’s JSX syntax to render the SVG circles, and includes basic CSS to remove page margins. The static composition relies on explicit SVG circle attributes for positioning and styling, with no interactive or animated behavior included.

Aug 19, 2021