Zaynaib (Ola) Giwa

@zaynaib·6 public vizzes

Loading Data with React & D3

This example demonstrates how to load external data in a React application using D3 utilities, displaying file size, row count, and column count for a CSV of named CSS colors. The app fetches data from a GitHub gist via `d3.csv`, stores it in React state with the `useState` hook, and updates the view once loading completes. React 16.9 and D3 v5 are loaded from CDNs, with ReactDOM rendering a single `<pre>` element that shows “loading” until the asynchronous CSV request resolves and the message function formats the dataset’s metrics.

Nov 30, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file containing CSS named colors. It displays the file size, row count, and column count for the dataset. The code uses D3 v5’s `d3.csv` function to fetch and parse the remote CSV, then accesses the parsed data’s `length` and `columns` properties. A fallback approach using `fetch`, `async`/`await`, and `d3.csvParse` is included but commented out. The result is rendered as large text in a `<pre>` element.

Nov 30, 2020

Loading thumbnail…

Untitled

A radial line chart displays flight delay trends over time, with a single black path tracing data points around a circular layout. Built with React and D3 v5, the visualization uses `d3.lineRadial` with `curveNatural` interpolation to map departure mean values to radius and date values to angle. The chart is currently a work-in-progress, lacking proper axis ticks and labels, and the angle scale has not yet been configured to represent periodic time intervals like months or years. Data comes from USA airline on-time performance records.

Jul 26, 2020

Loading thumbnail…

HTML Starter

A simple HTML page constructs an abstract, cartoon-like face using nested CSS-styled divs within a fixed-position box. The face features colored regions for ears, eyes, pupils, nose, and hair, all rendered with border-radius, clip-path, and absolute positioning. The blue page background contrasts with the gray and white face elements. This example demonstrates pure HTML and CSS layout techniques with no JavaScript libraries.

Jan 28, 2020

Loading thumbnail…

Locations of Datavis 2020 Students

This visualization displays the global distribution of students who joined Datavis 2020, with each point representing the approximate physical location of a participant. Colored circles distinguish between students who joined in the first versus second week of the course, allowing viewers to see the program’s early geographic reach. The code uses React with D3 v5’s `geoNaturalEarth1` projection and `geoPath` to render the world map, while the `topojson` library processes the atlas data. Location data was manually compiled from student introductions and geocoded into latitude/longitude coordinates.

Jan 4, 2020

Loading thumbnail…

HTML Starter

This example displays a simple bar chart of country populations using D3, with steelblue bars that turn brown on hover. The chart reads from a local `data.json` file containing country names and population values, though the HTML page itself initially renders "Hello HTML" in large text. The code sets up SVG margins and axes within an HTML starter template, using D3's bar and axis APIs to visualize the data. The page serves as a bare minimum starting point for HTML-based visualizations.

Jan 4, 2020