Felipe Bravo Silva

@FelBraSil·3 public vizzes

Circle follower

A yellow smiley face with white-outlined eyes and a curved mouth is rendered as an SVG using React components. The visualization displays five identical faces in a grid, each built from modular React components like `BackgroundCircle`, `Eyes`, and `Mouth`. The mouth uses D3's `arc` generator, while React's `map` function creates the repeated faces. The code leverages D3 v6 for arc generation and ReactDOM for rendering, with all shapes drawn as SVG elements.

Feb 24, 2021

Loading thumbnail…

Loading and parsing CSV data

This example demonstrates how to load and parse CSV data from a remote URL using the browser’s built-in Fetch API. It fetches a text file from a GitHub Gist and logs the raw CSV content to the console, showcasing the basic `response.text()` method for handling text-based data. The code also includes a commented-out alternative that first retrieves a JSON file containing a URL, then fetches that URL, illustrating a two-step data-loading pattern. No visualization is rendered, focusing purely on data acquisition and parsing.

Feb 24, 2021

Loading thumbnail…

Test

Five identical smiling faces repeat in a grid, each rendered with yellow circular backgrounds, outlined eyes, and arc-shaped mouths. The React components nest SVG circles and paths, while the mouth uses the d3 `arc` generator with specified inner and outer radii. D3’s `range` creates the five repetitions, and all faces draw with fixed dimensions and styling.

Feb 23, 2021