PirialMersus

@PirialMersus·7 public vizzes

Rendering Data with React & D3

A radial burst of 148 CSS named colors radiates from the center of an SVG canvas, with each colored slice representing one color from a CSV dataset loaded via `d3.csv`. The React component manages the data-fetching state with hooks (`useState`, `useEffect`) and renders the pie using `d3.pie()` to compute angles and `d3.arc()` to generate path geometry. React handles all DOM updates, while D3 exclusively provides the data parsing and shape-generation utilities. A loading message displays until the asynchronous CSV request resolves.

Jun 29, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the classic Auto MPG dataset as an interactive scatter plot, encoding miles per gallon on the x-axis, horsepower on the y-axis, and using color and size to represent the car’s origin and weight. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and Vega-Tooltip to render an SVG chart that fills the browser window. The code loads CSV data via `d3.csv`, applies custom axis and label styling from a configuration object, and uses mark-circle encodings with tooltips to show vehicle names on hover.

Jun 29, 2022

Loading thumbnail…

Loading data in react

A React smiley face tracks the mouse, with its eyes rendered as circles that move based on cursor position. The application uses React's `useState` and `useCallback` hooks to manage and update the mouse coordinates, while `ReactDOM.render` displays the SVG output. The initial face is drawn with a yellow circle as the head and two black circles for eyes, all defined with explicit positions and radii in the SVG markup.

Jun 29, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and display a summary of CSS named colors data using React and D3. It fetches a CSV file from a GitHub gist via D3’s `csv` utility, then stores the parsed dataset in React state with the `useState` and `useEffect` hooks. While the data loads, the interface shows a “Loading…” message. Once available, the component renders a plain-text summary—computed with `d3.csvFormat`—reporting the dataset’s size in kilobytes, row count, and column count, all displayed in a large monospace `<pre>` element.

Jun 28, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors using D3 v5. It displays a summary of the dataset, showing the file size in kilobytes, the number of rows, and the number of columns in a large text element. The code uses the `d3.csv` method with a Promise to fetch and parse the remote data, then counts the formatted output via `d3.csvFormat`. The data source is a GitHub Gist containing color names and their hexadecimal values.

Jun 28, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a yellow smiley face that follows the mouse cursor across an SVG canvas, with the face’s position updating in real time. Built with React and rendered through SVG, the code uses the useState hook to track mouse coordinates from the onMouseMove event and updates the circle’s center accordingly. The smiley face is constructed from simple SVG shapes, including a yellow circle for the head and two black circles for the eyes, all defined inline rather than using a data source.

Jun 28, 2022

Loading thumbnail…

Fork of Hello HTML hello

This visualization displays a grid of procedurally generated cartoon faces. Each face is composed of SVG circles for the background and eyes, and an SVG path for the mouth, rendered using React components. The code leverages D3's `arc` generator to create the mouth shape and `range` to produce the array of faces. All visual parameters—such as eye offset, eye radius, mouth radius, and stroke width—are randomized for each face, resulting in a diverse collection of characters within a uniform layout.

Jun 27, 2022