O

Oscar Muindi

@oscar-muindi·16 public vizzes

Loading thumbnail…

UN population

This example renders a horizontal bar chart of the top 10 most populous countries using UN population data for 2020. The visualization uses D3 v7 scales (`scaleBand` for countries, `scaleLinear` for population) within a React 18 component, drawing SVG rectangles whose widths encode population values. Grid lines and axis tick labels are generated from the linear scale's ticks, with country names positioned along the y-axis. The data is loaded asynchronously via `d3.csv` from a GitHub Gist.

Loading thumbnail…

A Fork of Rendering Data with React Parte II

This interactive visualization displays the complete set of CSS named colors arranged in a circular “pie” chart, rendered as a static SVG by React 18.2. It loads color data from a Curran Gist CSV file via the D3 v7 `csv` utility, then maps each row to a slice using D3’s `pie` and `arc` functions. The chart’s wedges are drawn as SVG `<path>` elements, with the fill color taken from the dataset’s `RGB hex value` column.

Loading thumbnail…

Fork of Rendering Data with React

This example displays a color wheel of CSS named colors, with each color rendered as a wedge-shaped path arranged in a circular layout. It loads color data from a CSV file using `d3.csv` and renders the visualization with React components and SVG paths. The `d3.arc` generator computes the wedge shapes, while React’s `useState` and `useEffect` manage the asynchronous data loading and component rendering. The color fill for each path comes directly from the RGB hex value column in the dataset.

Loading thumbnail…

Rendering Data with React

This example displays the CSS named colors dataset as a stacked sequence of horizontal color swatches, each filling the full 960px width at 4px height. It loads the data from a CSV file using `d3.csv` and renders each row as a React `div` element with its background color set from the `RGB hex value` field, demonstrating React’s component-based rendering approach. The interface initially shows a “Loading…” message until the asynchronous CSV fetch completes via `useEffect`, after which the complete color spectrum appears.

Loading thumbnail…

Loading Data with React and D3

This example shows how to load and summarize a CSV dataset of CSS named colors using React and D3. The app uses React’s `useState` and `useEffect` hooks to fetch the data via D3’s `csv` utility, then displays the file size in kilobytes, row count, and column count in a large `<pre>` element. A brief “Loading...” message appears until the asynchronous request resolves, demonstrating how React state and D3’s data-loading APIs integrate within a single-component application.

Loading thumbnail…

Fork of Parsing CSV data using D3...way2

This example demonstrates how to load and parse a CSV file using D3, displaying basic file statistics in a large HTML `<pre>` element. It fetches a remote dataset of CSS named colors from a GitHub gist, then uses `d3.csv` to parse the data and `d3.csvFormat` to measure its serialized size. The output shows the row count, column count, and file size in kilobytes, highlighting D3’s built-in CSV parsing and formatting utilities with a minimal, text-focused interface.

Loading thumbnail…

Parsing CSV data using D3

This example demonstrates how to load and parse a CSV file using D3. It fetches a remote CSV file containing CSS named colors and displays the number of rows, columns, and file size in kilobytes as plain text. The code uses the Fetch API to retrieve the raw text and then applies `d3.csvParse` to convert it into a structured array. The summary information is shown in a large font within a `<pre>` element.

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The example uses React with a `useState` hook to track the mouse position, updating the circle's `cx` and `cy` attributes during `onMouseMove` events. It renders a single red circle with a radius of 30 pixels inside an SVG viewport sized 960 by 500 pixels, using D3.js version 7 and React 18.

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to fetch and log raw CSV data from a remote URL using the browser’s built-in Fetch API. The code defines an asynchronous `fetchText` function that retrieves a text file from a GitHub Gist containing CSS named colors, then prints the CSV contents to the console. It highlights the initial step of loading external data before any parsing or visualization occurs, relying solely on native `fetch` and `response.text()` without external libraries.

Loading thumbnail…

Fork of Smiley Faces Parte VI

A grid of eighteen randomly generated smiley faces fills the screen, each face differing in eye placement, eye size, mouth radius, and stroke thickness. The visualization uses React components to compose each SVG face, with ReactDOM rendering the array produced by d3.range and Math.random() supplying the variation. D3’s arc generator creates the mouth paths within each rendered SVG.

Loading thumbnail…

Smiley Faces Parte V

This example displays a grid of animated smiley faces, each built from a yellow circle, two eyes, and an arc-based mouth. It demonstrates the rendering of multiple SVG elements using React components structured as reusable nested functions. The code leverages the d3.arc() API to generate the mouth path and guides users through debugging JavaScript errors and applying the children prop for component composition. Each face is rendered identically via a mapped array, producing the visual repetition.

Loading thumbnail…

Fork of A Smiley Face Parte IV

This example shows a stylized smiley face built from nested React components that render SVG shapes. The face is composed of a yellow background circle, two eyes, and a mouth, all positioned relative to a central origin point. The mouth uses the `d3.arc` API to generate a path with a defined inner and outer radius, creating a curved smile. The code demonstrates how SVG elements can be organized as reusable React components, with parameters for size and positioning passed through the component hierarchy.

Loading thumbnail…

A Smiley Face Parte III

A smiley face is drawn centered in an SVG canvas using React components. The yellow background circle, two eyes, and an arc-based mouth are all positioned relative to the center point. The face is rendered with D3's arc generator to create the mouth path, while React manages the SVG elements. The code imports React, ReactDOM, and D3, and uses reusable components for each facial feature with configurable props like radius and offsets.

Loading thumbnail…

Fork of A Smiley Face Parte II

A smiley face is drawn as a single SVG graphic, centered within a fixed 960 by 500 canvas. The face consists of a yellow circle with a black outline, two circular eyes, and a smile rendered as an arc path. The code uses D3’s `arc` generator to produce the mouth’s path geometry, while React 18 manages the SVG element hierarchy. All coordinates, including eye offset and mouth radius, are computed relative to the canvas center, and the entire drawing is grouped within a single SVG `<g>` transform.

Loading thumbnail…

A Smiley Face Parte I

This example shows a simple smiley face built entirely with SVG primitives. It renders a large yellow circle for the face, outlined with a black stroke, and places two smaller black circles as eyes at fixed coordinates. The code uses raw SVG elements—`<circle>` with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—inside an inline `<svg>` tag with a 960 by 500 viewport. No JavaScript libraries or data sources are involved; the rendering is purely declarative SVG markup within an HTML document, with CSS applied only to remove the body margin.

Loading thumbnail…

SVG FUNDAMENTALS

This example demonstrates fundamental SVG rendering by displaying a single red rectangle with a thick black border inside a 900-by-900 SVG canvas. The rectangle transitions over three seconds when hovered, changing its fill to green and expanding its stroke width, using CSS properties for both styling and animation. The code relies on basic SVG elements and CSS hover states, with no additional JavaScript libraries or data sources beyond the static markup.