ashokganpathi

@ashokganpathi·8 public vizzes

Fork of Rendering data with React

This example renders the full set of named CSS colors as a vertical stack of horizontal bars, using D3 to fetch the color data from a GitHub-hosted CSV and React to map each row to a styled div. The app loads the data asynchronously with `d3.csv`, manages the loading state via React hooks (`useState`, `useEffect`), and displays a simple text message while waiting. Each bar’s background color is set directly from the `RGB hex value` column, producing a tall gradient-like sequence that fills the viewport height. The implementation combines D3’s data loading with React’s declarative rendering, avoiding any SVG or canvas output.

May 30, 2021

Loading thumbnail…

Rendering data with React

This example demonstrates how React can render a dataset of CSS named colors by mapping each row to a colored horizontal strip, creating a stacked visual catalog of 148 color swatches. The application loads the color data using D3’s `d3.csv` method in a `useEffect` hook, stores it in React state via `useState`, and conditionally displays a “Loading…” message until the data arrives. Each color is rendered as a `<div>` element with its background set to the RGB hex value from the CSV. The code combines React 17, D3 v6, and SVG-friendly styling within a single-page setup.

May 30, 2021

Loading thumbnail…

Loading data with React and D3

This example demonstrates loading CSS color data into a React component using D3, displaying a summary of the dataset as text. The `d3.csv` function fetches the data from a GitHub URL, while React’s `useState` and `useEffect` hooks manage the loading state and trigger the asynchronous request. Once loaded, the `message` function calculates and presents the row count, column count, and approximate file size in kilobytes. The visualization uses SVG-less plain text rendering inside a `<pre>` element, showing how D3 and React can integrate for data fetching without complex graphical output.

May 30, 2021

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a stacked bar chart that visualizes population by country, colored by religion, using data from the UCI Auto MPG dataset via a Gist URL. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite libraries to render SVG output. The code uses `vl.markBar()`, `vl.y()`, `vl.x()`, and `vl.color()` to define the chart’s encoding, while D3’s `csv` function fetches the data. An interactive tooltip is enabled through the Vega Tooltip handler, and the chart’s appearance is customized with configuration options for axis styling and font sizes.

May 19, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file using D3 v6’s `d3.csv` method, which fetches the data and returns a promise. The program retrieves a remote CSV file containing CSS named colors, then computes and displays the number of rows, columns, and approximate file size in kilobytes within a large `<pre>` element. The code also includes commented-out alternatives using the Fetch API with `async/await` and `d3.csvParse` for manual text parsing, illustrating different approaches to CSV handling in D3.

May 8, 2021

Loading thumbnail…

Face moves with mouse

A yellow smiley face drawn with SVG elements follows the cursor as it moves across the screen. The mouse position is tracked via React's `useState` and `useCallback` hooks in response to an `onMouseMove` event on the root `<svg>`. The face is composed of reusable React components (`BackgroundCircle`, `Eyes`, `Mouth`, `Nose`) using `d3.arc` for the mouth path. The rendering is entirely SVG-based, with the face's geometry parameterized by props passed from the parent `App` component.

May 8, 2021

Loading thumbnail…

Laughing Face

A field of tiny yellow smiley faces is generated, each with a constant background circle, offset eyes, and an arc-shaped mouth defined using the `d3.arc` API. The nose is a cubic Bézier path, and the entire face is composed through modular React components (`Face`, `BackgroundCircle`, `Eyes`, `Mouth`, `Nose`, `FaceContainer`). Faces are rendered as SVGs and scaled down by a factor of 0.1, with random variation in eye size, producing a playful, repeating pattern across the canvas. The visualization is a React component that maps over 500 values to create each face instance.

May 2, 2021

Loading thumbnail…

Smiley Face Part I

A yellow smiley face is drawn with a circular head, two eyes, and a smile-shaped mouth using SVG within a React application. The face is centered in a 960 by 500 pixel viewport, with the head, eyes, and mouth positioned using fixed pixel offsets. The code uses React’s `ReactDOM.render` to mount the component and D3’s `arc` generator to create the curved mouth path, while D3 v6 and React 17 are loaded from a CDN. The circle elements are styled with fills and a stroke.

May 1, 2021