Mamveguh

@Mamveguh·8 public vizzes

Rendering Data with React 2

A pie chart visualizes the distribution of CSS named colors by their RGB hex values. The React application loads color data from a CSV file via `d3.csv` and renders the chart as an SVG. The chart uses `d3.pie` and `d3.arc` to compute and draw pie slices, with React managing the state and rendering each path element. The visualization updates asynchronously after the CSV data loads, displaying a loading message until then.

Mar 26, 2022

Loading thumbnail…

Fork of Rendering Data with React

This fork renders CSS named colors as a vertical stack of horizontal strips, each colored by its hex value, loaded via `d3.csv` from a GitHub gist. Using React’s `useEffect`, `useState`, and `useCallback`, it fetches and maps the data into styled `<div>` elements. The visualization uses ReactDOM to inject the generated layout into the page, producing a simple, full-width color swatch column—a direct, non-interactive representation of the dataset’s order.

Mar 21, 2022

Loading thumbnail…

Rendering Data with React

Rendering Data with React displays the CSS named colors as horizontal stripes, each a div sized 960 by 4 pixels with a background color set from the CSV’s RGB hex value. Using React 16.9 with hooks like useState and useEffect, it loads the data via d3.csv from a GitHub gist and renders the full spectrum of color rows, showing the dataset as a continuous color band.

Mar 21, 2022

Loading thumbnail…

Vega-Lite API Template

This example renders a scatter plot of daily weight measurements using the Vega-Lite API, with points sized uniformly and the y-axis scaled from zero for clearer trends. The visualization pulls data from a CSV file hosted as a Gist, originally sourced from the UCI Auto MPG dataset. Built with the vega-lite-api template, it uses d3.csv for data loading, Vega-Lite’s markCircle encoding for points, and Vega-Tooltip for interactive hover details. The display is configured via a custom config object that adjusts font sizes and axis styles, while the chart auto-fits to the window dimensions.

Mar 20, 2022

Loading thumbnail…

Loading Data with React and D3

This example demonstrates a minimal React application that loads a CSV file containing CSS named colors and displays its summary statistics, including file size, row count, and column count. The visualization uses React's `useState` and `useEffect` hooks to manage the asynchronous data loading process. D3's `csv` function fetches and parses the remote CSV data from a GitHub gist, while the `d3.csvFormat` utility calculates the raw data size. The display updates from a "Loading..." message to the computed summary once the data arrives.

Mar 19, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and summarize a CSV file using D3 v7. It fetches a remote dataset containing CSS named colors from a GitHub gist, then displays the file size, row count, and column count in a large text element. The code uses the Fetch API to retrieve the raw text and D3’s `d3.csv` to parse it into an array of objects, with `d3.csvFormat` measuring the parsed data’s size. The page dynamically renders these statistics into an HTML `<pre>` container.

Mar 19, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across a full-window SVG canvas. The React application tracks the cursor's client coordinates via an `onMouseMove` event handler, updating the circle's `cx` and `cy` attributes in real time. Written with React and ReactDOM, it renders through SVG elements without any external data source, relying solely on user interaction.

Mar 19, 2022

Loading thumbnail…

Smiley Face

A grid of eighteen smiley faces appears, each with randomized facial features and proportions. The faces are assembled from SVG primitives within a React component, using a yellow rounded rectangle for the head, black squares and circles for the eyes, and a D3 arc path for the mouth. The d3 `range` function generates the array of faces, and each face receives random values for parameters like eye offset, radius, and stroke width, producing a varied collection.

Mar 19, 2022