Alvarocar

@Alvarocar·3 public vizzes

Hello React

This example demonstrates a minimal React application that displays the text "Hola Mundo" as a static HTML heading. It shows how to set up a basic React project by defining a component in `App.js` and rendering it into a `div` with the id `root` using `ReactDOM.render`. The code imports React and ReactDOM, and loads the libraries via unpkg CDN in `index.html`. The rendering approach relies on creating a single component and attaching it to the DOM, without any data processing or visualization.

Sep 7, 2021

Loading thumbnail…

Visualizing Data with React & D3

This example presents a color wheel visualization of CSS named colors, split into individual arc segments representing each color. Built with React and D3 v5, it loads data from a CSV file using D3's `csv` utility and manages the data with React's `useState` and `useEffect` hooks. Each colored arc is rendered as an SVG path using D3's `arc` generator, with tooltips displaying the color keyword. The visualization maps each color to a proportional slice of the circle, providing an overview of the available named colors.

Jul 18, 2021

Loading thumbnail…

Smiley Face

This example demonstrates how to construct a smiley face using SVG primitives and React, rendering a yellow face with eyes, glasses, a smile, and a nose. The face is built with circles, rectangular elements, and arc-based paths. The code leverages the D3 arc generator (d3.arc) to compute the paths for the smile, glasses, and nose, while React components manage the SVG structure and positioning. It uses React 17 and D3 v7, with all dimensions and offsets defined as variables to control the layout.

Jul 5, 2021