Olowogoke Seun

@olowoseun·11 public vizzes

Rendering Data with React and D3

A radial burst visualization displays CSS named colors as equal-sized arcs arranged in a full circle, each filled with its corresponding RGB hex value. The example combines React for component structure and state management with D3 utilities for data loading and shape generation. It loads color data from a CSV file using `d3.csv`, then uses `d3.pie` and `d3.arc` to compute arc paths. React renders the resulting SVG paths, with each arc's fill color taken directly from the `RGB hex value` field in the dataset.

Oct 5, 2021

Loading thumbnail…

Rendering Data with React

The visualization displays all CSS named colors as a stacked sequence of horizontal stripes, with each stripe’s background color set to its corresponding hex value. It loads the color data from a remote CSV file using d3.csv, then React’s useState and useEffect hooks manage the asynchronous data fetching and rendering. The React component maps each row to a div element, with the stripe’s height fixed at 5 pixels, producing a full-width color spectrum. The example demonstrates a simple pattern of using React to render data-driven DOM elements in SVG-less fashion.

Oct 4, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and summarize CSS named color data using React and D3. The app fetches a remote CSV file with d3.csv, stores the parsed result in React state via the useState and useEffect hooks, and displays a brief summary of the dataset. The output shows the file size in kilobytes, row count, and column count, rendered as styled text. While the data loads, the interface displays a “Loading…” message. The implementation combines React’s component lifecycle with D3’s CSV parsing and formatting utilities.

Oct 4, 2021

Loading thumbnail…

Vega-Lite API Template

This visualization presents a stacked bar chart of top-country populations by religion, drawn from the UCI Machine Learning Repository’s Auto MPG dataset via a Gist. Built with the Vega-Lite API wrapper, it registers Vega and Vega-Lite libraries, using `vl.markBar`, `vl.x().fieldN('country').sort('-y')`, and `vl.y().fieldQ('population')` to encode positions. The `config.js` customizes axis and label styles, while `getData.js` loads CSV data via `d3.csv`. Interactive tooltips are enabled through the vega-tooltip `Handler`.

Oct 4, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in D3.js by fetching a remote file and displaying basic statistics about its contents. It uses `d3.csv` to retrieve and parse the data asynchronously, then shows the file size in kilobytes, row count, and column count in a large `<pre>` element. The visualization is purely textual, with no graphical rendering, utilizing the D3 URL API to fetch data from a GitHub-hosted CSS named colors dataset. The code also references `d3.csvFormat` and `d3.csvParse` in commented alternatives.

Sep 30, 2021

Loading thumbnail…

Mouse Follower

A black circle follows the mouse as it moves across a blank SVG canvas. The example demonstrates React state management with the `useState` and `useCallback` hooks to track cursor coordinates. Each mouse movement updates the circle’s `cx` and `cy` attributes, while d3.v5 is loaded but not used in the visible logic. The SVG rendering is handled by React, with the circle’s position initialized at the canvas center.

Sep 30, 2021

Loading thumbnail…

Let's make a Smiley Face - Part 6

This example shows a grid of fifteen smiley faces, each rendered as an SVG component in React. The faces use a yellow background circle, black eyes, and a mouth created with a D3 arc generator (`d3.arc`). The `Face` component composes smaller components (`FaceContainer`, `BackgroundCircle`, `Eyes`, `Mouth`) to assemble each face. The code relies on React’s `map` over a `d3.range` array, with randomized eye radii varying between faces to add subtle visual diversity. All elements are drawn using SVG primitives within a translated `<g>` group.

Sep 30, 2021

Loading thumbnail…

Let's make a Smiley Face - Part 5

This example builds a smiley face from modular React components rendered as SVG shapes. Yellow background, black eyes, and a curved mouth are positioned with a central `<g>` transform. The mouth uses a `d3.arc` path generator with inner and outer radii, while the eyes are simple offset circles. React 17 manages the component hierarchy, and d3.v5 provides the arc calculation. The SVG canvas is 960 by 500 pixels, with all elements drawn in proportion to the center point.

Sep 30, 2021

Loading thumbnail…

Let's make a Smiley Face - Part 4

This example shows a smiley face built with React and D3, rendered as SVG. It demonstrates how to compose reusable React components for static shapes: a yellow background circle with a black stroke, two black eye circles, and a mouth drawn as an arc path. The D3 `arc` generator defines the mouth’s inner and outer radii, start and end angles, and stroke width, with positioning handled via SVG group transformations. The code uses React 17, D3 v5, and the `arc` API in a declarative, data-driven layout.

Sep 30, 2021

Loading thumbnail…

Fork of Smiley Face - Part 3

This example shows a yellow smiley face built from SVG shapes, with two black eyes and a curved mouth that forms a wide smile. The face is centered in a 960×500 viewport. The code uses React to render SVG elements and the `d3.arc` function from D3 v5 to generate the mouth path. Circles define the face and eyes, while the mouth arc uses specified inner and outer radii with start and end angles. The rendering uses an SVG coordinate system with transforms to position elements around the center.

Sep 27, 2021

Loading thumbnail…

Smiley Face - Part 1

A smiley face is drawn using React and D3, with a yellow circular head, two black eyes, and a partial mouth arc. The SVG rendering uses D3’s `arc` generator to create the mouth path, while positions and sizes are defined by constants for offsets and radii. The face is centered in a 960×500 viewport, with the head radius calculated from the height minus stroke width.

Sep 27, 2021