Ahsan Ehtesham

@Ahsan-Ehtesham·6 public vizzes

Making Bar Chart with React & D3

This example shows a horizontal bar chart of population by country for 12 nations, using data from the UN Population 2019 dataset loaded via `d3.csv`. The chart displays a teal bar for each country, with a left axis labeling countries and a bottom axis formatting population values in billions using `d3.format`. React manages the component state and rendering, while D3’s `scaleBand` and `scaleLinear` position the bars and axes, producing an SVG visualization with CSS-styled ticks and hover tooltips through native SVG `title` elements.

Sep 1, 2021

Loading thumbnail…

Loading Data with React and D3

This example shows a donut chart of CSS named colors, loaded from a remote CSV file and rendered as an SVG pie using React and D3. The React component uses the `useState` and `useEffect` hooks to fetch data asynchronously via `d3.csv`, then maps the parsed rows with `d3.pie` and `d3.arc` to generate colored path segments. Each slice’s fill comes from the dataset’s `'RGB hex value'` field, and the chart displays a simple loading message until the data arrives.

Aug 31, 2021

Loading thumbnail…

Iterating Fast with Vega-Lite API

This interactive bar chart visualizes the top 5 religious groups by population across countries, using data from the UCI Machine Learning Repository via a Gist. Built with the Vega-Lite API, the visualization encodes country on the x-axis, population on the y-axis, and religion as color, with tooltips showing religious affiliation. The code registers Vega and Vega-Lite libraries, configures a dark-themed custom axis style, loads CSV data using d3.csv, and renders the chart with an auto-fit, full-viewport layout.

Aug 6, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data by fetching a remote file of CSS named colors. It shows the parsed dataset’s size in kilobytes and row count, displayed in large text. The code uses D3 v7’s `d3.csv` method to retrieve and parse the CSV from a GitHub Gist URL, then applies `d3.csvFormat` to measure the data length. It also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse` for comparison.

Aug 6, 2021

Loading thumbnail…

Interaction with React

A smiling face rendered as an SVG circle with two eyes updates its position in real time to follow the mouse cursor. Built with React, the example uses the `useState` hook to store the cursor's coordinates and the `useCallback` hook to handle `onMouseMove` events on an SVG `circle` element. The component re-renders on every mouse movement, demonstrating React's declarative approach to handling user interaction within a data-visualization context.

Aug 5, 2021

Loading thumbnail…

Make a Face with D3.js

This example uses D3.js v7 with React to draw a stylized human face entirely from SVG shapes. It centers on a large yellow circle for the head, then adds two eyes, a nose, an elliptical mouth using d3.arc, and ears positioned symmetrically around the center. The coordinates for facial features are computed as constants, with a BackgroundCircle component reused for the ears. The code renders through React DOM, while D3's arc generator creates the mouth path.

Jul 22, 2021