alexcholmsky

@alexcholmsky·5 public vizzes

Fork of Pie Chart React & d3

This interactive pie chart visualizes a categorical color palette dataset loaded from a CSV file via `d3.csv`. The React component manages the data with `useState` and `useEffect`, rendering an SVG where each slice corresponds to a row, filled with its `RGB hex value`. The chart uses `d3.pie` and `d3.arc` to compute and draw the pie geometry, with a large outer radius creating a striking radial composition. Data loads asynchronously, displaying a "Loading..." message until ready.

May 9, 2022

Loading thumbnail…

Loading Data with D3

This example demonstrates how to load and parse a CSV dataset of CSS named colors using D3's `csv` function within a React application. The interface displays a short summary message that reports the data size in kilobytes, the number of rows, and the number of columns once the fetch completes. The code combines React's `useState` and `setData` hook with D3's asynchronous CSV loader, rendering a simple text output that updates from "Loading" to the computed statistics. The visualization relies on the `d3.csv` API and React DOM rendering.

May 8, 2022

Loading thumbnail…

Car ride fork

This example displays a large, centered “Hello React!” message that fills the browser window. The app is built with React and ReactDOM, using a functional component to render the text inside a styled div. The project relies on the UMD builds of React 16.13.1 and ReactDOM, loaded directly from unpkg, with the application logic contained in a separate bundle.js file. The visualization demonstrates a minimal React setup rather than data-driven graphics, focusing on component rendering and static styling.

May 6, 2022

Loading thumbnail…

Smiley Face Part 1

This example shows a yellow smiley face built from layered SVG shapes, with a black-bordered background circle, two eyes, and a curved mouth. The code uses React components to compose the face from separate SVG elements, while D3’s `arc` generator creates the mouth path and a `d3.symbol` adds a small star shape to the face. The visualization demonstrates a modular approach to building reusable chart components with React and D3 in an SVG rendering pipeline.

Apr 29, 2022

Loading thumbnail…

Fork of Smiley Face Part II

A React component renders a full-screen SVG smiley face, with the face radius and eye positions calculated from the browser's window dimensions. The code uses React 16.9 and ReactDOM to mount the component, drawing a yellow circle with a black stroke for the head and two smaller black circles for the eyes, all positioned via SVG coordinates and a transform based on the viewport center. The mouth is not drawn, despite the title referencing a smiley face implementation.

Apr 28, 2022