natsgeorge.ng@gmail.com

@Nat-93·14 public vizzes

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color occupying a wedge of a circular pie chart. The visualization loads color data from a CSV file using `d3.csv`, computes the arc segments with `d3.pie` and `d3.arc`, and renders the resulting SVG paths through React components. The React app manages the loading state and passes the data to SVG elements, while D3 handles the data parsing and geometric calculations. The final output displays 148 colored slices radiating from the center, using each color’s RGB hex value as its fill.

Jul 2, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 version 5, displaying summary statistics about the CSS Named Colors dataset from a GitHub gist. The visualization shows three key metrics: the file size in kilobytes, the number of rows, and the number of columns, rendered in large text. It utilizes D3’s `d3.csv` method with Promise-based asynchronous loading, alongside commented-out alternatives using the Fetch API with `async`/`await` and `d3.csvParse`. The code also includes a commented "pyramid of doom" example comparing older nested callback patterns with modern approaches.

Jul 2, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a time series of San Francisco daily temperatures using green, semi-transparent area marks. The visualization is built with the Vega-Lite API, which programmatically constructs a markArea encoding temperature over timestamp. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and rendered through Vega and Vega-Lite JavaScript libraries with a custom tooltip handler for interactivity.

Jul 2, 2024

Loading thumbnail…

prac

This example shows a simple interactive smiley face built with React and D3. A black circle follows the mouse cursor across an SVG canvas, responding to every mouse movement event. The underlying code uses React's `useState` and `useCallback` hooks to track the cursor position and re-render the circle accordingly, while the SVG element's `onMouseMove` handler captures the event data. The rendering is handled entirely through React's `ReactDOM.render` method, with D3 loaded but not actively used in the visible logic.

Jul 2, 2024

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v5 and the Fetch API. It displays the file size in kilobytes, the number of rows, and the number of columns from a dataset of CSS named colors. The code uses `d3.csv` for direct parsing and a commented alternative with `fetchText` and `d3.csvParse`. It highlights both the promise-based `then` pattern and the async/await approach, while avoiding the "pyramid of doom" by chaining promises.

Jul 2, 2024

Loading thumbnail…

Frown Face Part II

This example shows a frown face built with React and D3, rendered as SVG. The face uses a red circle for the head, black circles for eyes, and a mouth path generated by D3’s `arc` function with adjusted start and end angles to create a downward curve. The code imports `arc` from `d3-shape` and uses `ReactDOM.render` to mount the SVG inside a React component. All dimensions are computed from fixed variables for width, height, and offsets, with the mouth positioned via a translation and the arc’s inner and outer radii controlling its thickness.

Jun 26, 2024

Loading thumbnail…

Fork of Fork of Smiley Face Part II

A React component renders a large red smiley face with black facial features on an SVG canvas. The face consists of a filled circle, two smaller black circles for eyes, and a curved mouth path generated with D3's arc generator. The code uses React 16.9 to manage the SVG elements and d3-shape's arc function to define the mouth's inner and outer radii along with specific start and end angles, producing a frown. The layout positions features using fixed x and y offsets relative to the canvas center.

Jun 26, 2024

Loading thumbnail…

Dataviz Starter

This example demonstrates fetching and logging the contents of a CSV file containing CSS color data. It uses the `fetch` API to retrieve the text from a GitHub Gist and prints the raw CSV to the browser console. The code is a minimal introduction to loading external data without any visualization or parsing logic. It relies on JavaScript's native `fetchText` asynchronous function and a hardcoded URL.

Jun 26, 2024

Loading thumbnail…

Fork of Smiley Face Part III

This example displays six identical smiley face icons arranged in a grid, each composed of a yellow circle with black stroke, two eyes, and a curved mouth. The visualization uses React components to structure the face parts, with SVG primitives for the shapes. The mouth is generated using the D3.js `arc` function to create a path. The code iterates over an array from `d3.range` to render multiple copies of the same face, demonstrating component reuse and parameterization in a React-based data visualization context.

Jun 26, 2024

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a yellow smiley face as an SVG graphic using React and D3.js. The face is constructed from a large yellow circle for the head, positioned at the center of a 960-by-500 canvas, with two black circles for eyes and a D3 arc path for the mouth. D3's `arc` API defines the mouth’s inner and outer radii and angular range, producing a curved shape. The React component builds the SVG elements declaratively, and `ReactDOM.render` mounts it to the page.

Jun 26, 2024

Loading thumbnail…

Fork of React Starter

This example demonstrates a minimal React application that renders the text “Hello React!” centered on the page. The code imports React and `createRoot` from `react-dom`, and defines a simple `App` component that returns a `<div>` with the message. It uses the production builds of React 18.2.0 and ReactDOM, and mounts the component to the `#root` element via `root.render`. The styling sets the message font size to 13em with centered text alignment.

Jun 25, 2024

Loading thumbnail…

Smiley face

This example renders a classic smiley face as static SVG shapes using React. Two black circles form the eyes, while a larger yellow circle with a black stroke serves as the face; the commented-out code hints at an unfinished mouth. It uses React 18 and ReactDOM to mount components into a root div, with all drawing done via SVG elements. The simple composition demonstrates basic geometric shape composition and styling in a React-driven visualization.

Jun 25, 2024

Loading thumbnail…

Fork of SVG Fundamentals

This fork of the SVG Fundamentals example demonstrates basic vector graphics rendering using raw SVG elements embedded in an HTML page. The visualization displays simple geometric shapes, including circles with varying fill colors and a rectangle with a blue fill and brown stroke, all positioned within a 600x1000 canvas. A second variation adjusts the layout with a 960x500 viewport and adds a single tall rectangle. The code uses no external JavaScript libraries, relying instead on native SVG markup and minimal CSS to control body margins and overflow for a clean presentation.

Jun 24, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG through a static composition of primitive shapes. It shows overlapping circles and a rectangle arranged on a 600 by 1000 canvas, illustrating basic attributes such as `cx`, `cy`, `r`, `fill`, and `stroke`. The rendering uses plain SVG markup embedded directly in an HTML page, with no external libraries or JavaScript logic. A yellow circle with a red inner circle sits atop a blue rectangle with a brown outline, while a separate circle floats above, highlighting how SVG paint order and coordinate systems work in a minimal, code-only context.

Jun 24, 2024