aliciaadj

@aliciaadj·5 public vizzes

Fork of Rendering Data with React & D3

This visualization displays all CSS named colors as a radial burst, with each color represented by a wedge in a pie chart. React manages the component state and rendering, while D3 utilities handle data loading and geometry: `d3.csv` fetches the color dataset, and `d3.pie` and `d3.arc` compute the arc positions. The data source is a CSV file of CSS color names and their RGB hex values, loaded asynchronously and rendered as SVG paths.

Aug 26, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This fork of "Let's Make a Face" renders a cartoon face in SVG with a gradient background. The face’s eyes, mouth, and teeth are constructed as separate React components and positioned using configurable parameters. The code relies on D3’s `arc` API to generate the mouth and teeth paths, while the overall layout is composed with React’s component model. The example uses D3 v7 and React 18 to create a static, smiley-like visual with hard-coded numeric values for shape placement.

Aug 26, 2022

Loading thumbnail…

Loading CSV Data

This example demonstrates loading a CSV file from a remote URL and displaying summary statistics about its contents. The React component uses the `useState` hook to manage the asynchronous data loading, calling `d3.csv` to fetch and parse the data. Once loaded, it computes and displays the file size in kilobytes, the number of rows, and the number of columns using `d3.csvFormat` and the parsed data’s properties. While the data is loading, the interface shows a simple “loading….” message in a large `<pre>` element.

Aug 18, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors using D3 v5 within a React framework. It displays the parsed dataset’s size in kilobytes, row count, and column count in a large `<pre>` element. The code primarily uses `d3.csv` and `d3.csvFormat` to fetch and measure the data, with commented alternatives showing `fetch`, `async/await`, and `d3.csvParse`. The visualization is purely textual, highlighting the data-loading process rather than graphical output.

Aug 18, 2022

Loading thumbnail…

Mouse Follower

A smiling face, drawn as a yellow SVG circle with black facial features, follows the cursor across a blank canvas. The application tracks mouse movement through React's `onMouseMove` event handler, updating the component's state with the pointer's coordinates. Using the `useState` hook, the circle's `cx` and `cy` attributes are re-rendered on every cursor position change, while the initial mouse position is set to the center of a 960 by 500 viewport. The visualization is built entirely with React 16.9 and ReactDOM, rendering inline SVG elements without any external data source.

Aug 18, 2022