Slodgar

@Slodgar·4 public vizzes

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file containing CSS Named Colors from a remote GitHub gist. It uses the Fetch API to retrieve the text, then D3 v7’s `d3.csvParse` method to convert the raw CSV into an array of objects. The parsed data is logged to the browser console via `console.log`, and the interface simply renders a large empty `<pre>` element. The code runs entirely in an asynchronous function, showcasing how `async`/`await` handles the data-loading pipeline.

Nov 30, 2022

Loading thumbnail…

Fork of Smiley Face Part VI

This example displays a grid of eighteen randomly generated smiley faces, each composed of a yellow circle, two eyes, and a mouth. The faces are rendered as SVG components using React, with D3.js’s `arc` function calculating the path for the mouth’s curved shape. Each face’s dimensions, such as eye offset, eye radius, and mouth width, are randomized, producing a varied collection of expressions. The code leverages the `range` utility from D3 to generate the array of faces and ReactDOM to render the final composition into the DOM.

Nov 30, 2022

Loading thumbnail…

Fork of Smiley Face Part V

A yellow smiley face with black-outlined circular head, eyes, and mouth is rendered as an SVG. Built with React components for reusable parts, it computes the mouth shape using `d3.arc` with inner and outer radii. The example demonstrates splitting React components into separate ES6 modules and using React Fragments to group multiple circles without extra DOM nodes.

Nov 28, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A smiling face is drawn as a yellow circle with black outline, two dark eyes, and an arc-shaped mouth, all positioned at the center of the browser window. The visualization is built with React components that render SVG elements, using d3’s `arc` generator to create the mouth path. The background circle, eyes, and mouth are each defined as separate React functions, with the main SVG sized to the full viewport dimensions and all shapes translated to the center.

Nov 28, 2022