Aerogirl10

@Aerogirl10·3 public vizzes

Fork of Loading and Parsing CSV Data

This example displays basic statistics about a CSV dataset loaded from a remote URL, showing the file size in kilobytes, row count, and column count in large text. It uses D3 v5's `d3.csv` method to fetch and parse the CSS Named Colors dataset, then formats the results with `d3.csvFormat` and `Math.round`. The code also includes commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`, as well as a nested Promise-based approach. The page is a simple HTML document with D3 loaded from a CDN.

Mar 1, 2021

Loading thumbnail…

Fork smiley for multiplying

The visualization displays a grid of 18 randomly generated smiley faces, each rendered as an SVG with a yellow circular background, black stroke, two eyes, white highlights, red blurred cheeks, and a curved mouth. Built with React and D3 v6, the code uses d3.arc to construct the mouth path and d3.range to generate the face array. Each face’s dimensions—stroke width, eye radius, mouth size, and cheek blur—are randomized via Math.random, creating subtle variation across the grid.

Mar 1, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I, cuz mine stayed at codepen (y)

This example shows a simplified, stylized face built from reusable React components, with a yellow circular background, two eyes, red blurred cheeks, and an arc-shaped mouth. The face is centered within an SVG canvas using a `FaceContainer` that applies a translation transform. The code constructs the face using React functional components like `BackgroundCircle`, `Eye`, `Cheek`, and `Mouth`, with the mouth drawn using the D3 `arc` function and cheeks blurred via an SVG `feGaussianBlur` filter. All geometry and styling properties are passed as props from a single `Face` component.

Feb 28, 2021