Nana Kwame

@childerx·12 public vizzes

Stylised Barchat

A stylised bar chart visualizes population estimates for ten countries from the UN’s World Population Prospects 2019 dataset, using D3 v7’s `csv` loader and `scaleBand`/`scaleLinear` to map countries and population values. The React 18 app renders SVG rectangles via `Marks`, with custom `AxisBottom` and `AxisLeft` components generating ticks and labels. The chart omits some standard styling, resulting in a sparse, linear layout that showcases the core data-ink ratio without decorative elements.

Aug 21, 2023

Loading thumbnail…

Refactored Barchat

This example shows a horizontal bar chart ranking the ten most populous countries based on 2020 population estimates from the UN World Population Prospects 2022 dataset. The visualization uses React for component structure and D3 v7 utilities like `scaleBand`, `scaleLinear`, and `max` to map data to SVG rectangles. Axes are rendered as custom React components using D3’s tick generation, while the `useData` hook loads the CSV via `d3.csv`. The chart presents country names on the left axis and population values on the bottom axis.

Aug 21, 2023

Loading thumbnail…

Axes with React and D3

A horizontal bar chart displays the top ten countries in the 2020 UN World Population Prospects dataset. The React component manages the data loading state with a `useEffect` hook and `d3.csv`, then renders SVG elements directly. D3's `scaleBand` and `scaleLinear` position the bars and generate tick marks, while `d3.max` computes the domain. The chart shows both axes with tick labels, using React's declarative JSX to construct each `<rect>`, `<line>`, and `<text>` element.

Aug 21, 2023

Loading thumbnail…

The Margin convention

This chart displays the 2020 populations of ten countries as a horizontal bar chart, with the bars arranged vertically by country. The chart uses a margin convention to separate the plotting area from the SVG’s edges, translating a `<g>` element by the top and left margin values. Built with React and D3 v7, it uses `d3.csv` to load data from the World Population Prospects 2022, then `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The visualization renders as an SVG, with each bar drawn as a `rect` element.

Aug 21, 2023

Loading thumbnail…

The Pathetic barchat

The Pathetic barchart displays the top-ten most populous countries in 2020, ranked along the y-axis with horizontal bars scaled by population. The visualization uses React for component state management and `useEffect` to load CSV data via D3’s `csv` utility from World Population Prospects 2022. D3’s `scaleBand` and `scaleLinear` map each country name to a vertical band and each population value to a bar length, rendered as SVG `<rect>` elements. The chart presents raw population values without axes or labels, relying solely on bar widths for comparison.

Aug 21, 2023

Loading thumbnail…

Rendering data with React & D3

A radial burst of CSS named colors fills a 960 by 500 SVG canvas, with each color occupying an equal-angled slice emanating from the center. The visualization loads a CSV of named colors using D3’s `csv` utility, then employs D3’s `pie` and `arc` generators to compute the slice geometries. React 18 manages the state and renders the resulting SVG `path` elements, with each path’s fill set to the corresponding hex value from the dataset.

Aug 21, 2023

Loading thumbnail…

Rendering data with React

This example renders a flat, 960-pixel-wide color bar from a CSV of CSS named colors. It shows how React’s declarative component structure can replace manual SVG or HTML generation for D3-loaded data. The `App` component uses `useState` and `useEffect` to fetch the remote CSV via D3’s `csv` utility, then maps each row to a `<div>` whose `backgroundColor` is set from the `RGB hex value` column. Rendering is done through React 18’s `ReactDOM.render`, producing a simple stacked sequence of colored strips.

Aug 21, 2023

Loading thumbnail…

Loading data with React & D3

This example demonstrates how to load a remote dataset of CSS named colors using D3’s `csv` utility, with React state managing the asynchronous fetch. The interface displays a plain-text summary reporting the file size in kilobytes, the number of rows, and the column count, refreshing once the data arrives. The code combines React’s `useState` and `useEffect` hooks, D3’s `csv` for parsing, and a custom `message` helper that formats the summary, all rendered as SVG-free `<pre>` output.

Aug 21, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing the relationship between miles per gallon and horsepower for various car models. Each point’s size encodes vehicle weight, color indicates the country of origin, and hovering reveals the car name. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and d3, using `vl.markCircle` for encoding and `d3.csv` for loading data. The plot spans the full browser window with a custom dark color config for axis labels and titles.

Aug 17, 2023

Loading thumbnail…

Laoding and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL, displaying summary statistics about the dataset. It uses d3.csv to fetch and parse the file, then reports the file size in kilobytes, row count, and column count. The code also includes an alternative approach using fetch, async/await, and d3.csvParse for manual text handling. The data source is a GitHub gist containing CSS named colors in CSV format. The results appear as plain text in a pre element.

Aug 17, 2023

Loading thumbnail…

mouse trapper

A circle follows the mouse cursor inside an SVG viewport, updating its position in real time as the user moves the pointer. The visualization demonstrates React state management with a `useState` hook and handles mouse events via `useCallback`. D3 is loaded but not actively used in the rendering logic, which relies solely on React to re-render the circle at new coordinates based on `clientX` and `clientY` values from the `onMouseMove` event.

Aug 17, 2023

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen randomly generated cartoon faces renders in React, each composed of a yellow SVG circle, two eyes, and an arc-based mouth. The faces vary in stroke width, eye offset, eye radius, mouth width, and mouth radius, all assigned through `Math.random()`. The code uses React 18 for component composition, D3 v7 for the `arc()` shape generator, and renders to SVG via a shared `FaceContainer`.

Aug 16, 2023