fleidelav@gmail.com

@fleishiaa·2 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV dataset containing Aid Worker Security Incidents. It displays three key statistics about the imported data: the approximate file size in kilobytes, the total number of rows, and the number of columns. The visualization uses D3.js version 5, specifically calling the `d3.csv` function to fetch the dataset from a GitHub gist URL, then `d3.csvFormat` to calculate the data size. The results are rendered into an HTML `<pre>` element, showing the fundamental parsing capabilities of D3 for tabular data.

Dec 14, 2024

Loading thumbnail…

•ᴗ•

A grid of 18 randomly varied smiley faces fills the screen, each rendered as a standalone SVG via React. The faces use d3's `arc` generator to draw the mouth shapes, while eye size, mouth width, and stroke thickness vary per face. The code builds each face from modular components (`BackgroundCircle`, `Eyes`, `Mouth`) and uses `d3.range` to iterate over the grid, with all layout centered through a shared `FaceContainer` component.

Dec 14, 2024