Chiedu Egbumokei Jr

@ChieduEgbumoekiJr-Dev·8 public vizzes

Refactoring Bar Chart

This example visualizes the top 10 most populous countries as a horizontal bar chart, using population data from the United Nations World Population Prospects 2019. The visualization renders bars via SVG `<rect>` elements, with axes built from D3 v5 scales (`scaleBand` and `scaleLinear`) and React components for the axes and marks. The code also includes a custom tooltip via an SVG `<title>` element and uses D3’s `csv` loader to fetch the data.

Jan 1, 2022

Loading thumbnail…

Bar Chart

This bar chart displays the top 10 most populous countries using data from the United Nations World Population Prospects 2019. The visualization uses React with hooks to fetch and process the CSV data, then renders SVG rectangles scaled by population values. The code employs d3.csv, scaleBand, and scaleLinear to position bars and create x-axis ticks, though no y-axis labels are drawn. A loading state shows "Loading..." via a pre element until the dataset is ready.

Dec 26, 2021

Loading thumbnail…

Bar Charts

This example shows a horizontal bar chart of country populations, with each country’s bar length proportional to its 2020 population value. Built with React and D3 v5, it loads CSV data via `d3.csv`, maps the population field, and renders SVG rectangles using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The bars are positioned and sized based on the scales, with the chart updating once the asynchronous data fetch completes.

Dec 26, 2021

Loading thumbnail…

Rendering Data with React & D3

This example creates an interactive donut chart from a CSV file containing CSS named colors, loading the data with d3.csv and rendering each color as an SVG path. The React component manages the data loading state, while D3’s pie() layout and arc() generator compute the angular positions and path geometry. Each slice is filled with its corresponding hex value from the dataset, producing a colorful circular visualization of named colors.

Dec 26, 2021

Loading thumbnail…

Vega-Lite API

This example visualizes the relationship between car origin, horsepower, and model name using the Vega-Lite API, a JavaScript wrapper for Vega-Lite. It renders a scatterplot of points colored by origin, with tooltips displaying car names. The code loads automobile data from a CSV file via d3.csv and uses Vega-Lite’s declarative mark and encoding methods to specify the chart, which is then rendered to SVG with Vega. Appearance is customized through a configuration object, and the chart is sized to fit the browser window.

Dec 22, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file with D3, displaying the file size, row count, and column count as large text. It uses d3.csv to fetch the dataset from a GitHub gist of CSS named colors, then relies on d3.csvFormat and data.columns to compute the metrics. The page is a minimal HTML document with a pre element for output, styled with em-based font sizing, and the visualization updates once the asynchronous data loading completes.

Dec 21, 2021

Loading thumbnail…

Mouse Follower

A single yellow circle follows the mouse cursor across an SVG canvas. The example combines React state management with D3’s rendering capabilities, using the `useState` hook to track cursor coordinates and an SVG `onMouseMove` event handler to update them. The circle’s position is updated reactively on every mouse movement, demonstrating a simple interactive data binding between user input and a rendered visual element. The code imports React and ReactDOM directly, while D3 v5 is loaded via a CDN script tag for integration.

Dec 20, 2021

Loading thumbnail…

Hello HTML

This example displays a grid of eighteen smiling faces, each generated with randomized eye and mouth dimensions. Built with React and rendered as SVG, the faces are composed of reusable components: a yellow background circle, two eyes, and a mouth. The mouth path is created using the D3 arc generator. The visual variety emerges from randomly scaling the eye radius and mouth width for each face within a fixed canvas.

Dec 20, 2021