Skip to main content
Log in
A

Ahmad Butt

@M-A-A-B·12 public vizzes

Loading thumbnail…

World Map

This visualization displays a world map using geographic data, rendering country boundaries as black strokes. The map is constructed with React and D3, utilizing the `d3.json` loader to fetch TopoJSON data from the `world-atlas` package, then converting it to GeoJSON features via the `topojson` `feature` API. The `Marks` component draws the map paths using D3’s `line` generator with the `curveNatural` interpolation, while also placing circular markers at data points from the SF temperature dataset. The SVG output is styled with a teal color scheme and Poppins font.

Mar 7, 2021
Loading thumbnail…

Stylized Line Chart

A stylized line chart displays San Francisco temperature trends over a week, using a smooth natural curve and teal accents against a minimalist axis. The React-based visualization loads CSV data via `d3.csv` and renders with SVG, mapping timestamps to a `scaleTime` and temperatures to a `scaleLinear`. The D3 v5 `line` generator with `.curve(curveNatural)` draws the path, while the custom `AxisBottom` and `AxisLeft` components generate ticks and gridlines. Poppins typography and styled circle marks enhance the clean, modern aesthetic.

Mar 5, 2021
Loading thumbnail…

Stylized Scatter Plot Iris Dataset

This example visualizes the Iris dataset, plotting sepal length against sepal width as individual circles. The D3 scaleLinear functions map the data values to pixel coordinates for the SVG rendering. React hooks manage asynchronous data loading via D3’s csv function. The Poppins font and custom axis ticks with formatted labels give the chart its stylized appearance. Tooltips on each circle display the sepal length in abbreviated form.

Mar 5, 2021
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries based on 2019 United Nations World Population Prospects data, with horizontal bars representing each nation’s population. The visualization uses React with D3 v5 libraries, employing `scaleBand` and `scaleLinear` for positioning axes and marks. SVG rectangles render the bars, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Population values are formatted using D3’s `format` function, converting numbers to abbreviated notation like “1.4B”.

Mar 5, 2021
Loading thumbnail…

Refactored Bar Chart

This example displays a horizontal bar chart of the top 10 most populous countries for 2020, using data from the United Nations World Population Prospects 2019. The React component structure separates axis and mark rendering into reusable subcomponents. It employs d3.scaleBand for the categorical y-axis, d3.scaleLinear for the quantitative x-axis, and d3.csv to load the data. SVG rectangles are positioned and sized using the scales, with axes generated via d3-scale’s ticks and domain mapping.

Mar 4, 2021
Loading thumbnail…

Bar Chart With React and D3

This interactive bar chart displays the top 10 most populous countries using 2019 UN World Population Prospects data. The visualization integrates React for state management and component rendering with D3.js (v5) for data loading, scaling, and SVG element generation. D3's `scaleBand` and `scaleLinear` position the bars, while React's `useEffect` hook asynchronously fetches and processes the CSV data. The chart also includes D3-derived tick marks and axis labels, creating a fully labeled though minimalist visualization.

Mar 4, 2021
Loading thumbnail…

Rendering Data With React and D3

A donut chart visualizes all 148 CSS named colors, with each color occupying a slice of equal size. The visualization uses React hooks, specifically `useState` and `useEffect`, to load the dataset via `d3.csv` and manage the loading state. D3's `pie` and `arc` generators compute the slice angles and paths, which are rendered as SVG `<path>` elements with the fill color set from the data's RGB hex values. The chart is centered within a 960 by 500 SVG canvas, demonstrating a simple integration of React for state management and D3 for data shaping and geometry.

Mar 4, 2021
Loading thumbnail…

Vega-Lite API Template

This example demonstrates a Vega-Lite API template that visualizes automobile data from a CSV file, plotting engine displacement against horsepower with semi-transparent points and tooltips showing car names. The code loads data using `d3.csv` from a GitHub gist, then constructs the visualization programmatically through the `vega-lite-api` library, which registers with `vega` and `vega-lite`. Custom styling via a `config` object improves readability, and the visualization is rendered as an SVG that fits the browser window using `autosize`.

Mar 3, 2021
Loading thumbnail…

Loading Data With React and D3

This example demonstrates how to load and summarize a CSV dataset using React state and D3. It fetches a list of CSS named colors from a GitHub gist, then displays a text summary showing the file size in kilobytes, the number of rows, and the number of columns. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous data loading, with `d3.csv` handling the request and `d3.csvFormat` computing the data size. The visualization renders as plain SVG-less text via React DOM.

Mar 3, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example displays the size and structure of a CSV dataset parsed from CSS Named Colors, showing the file size in kilobytes, total row count, and number of columns. The code uses d3.csv to fetch the remote CSV file and return a parsed array of objects, with d3.csvFormat measuring the raw data length. It also includes commented-out alternatives using fetch, async/await, and d3.csvParse, demonstrating different parsing workflows. The output renders as plain text in a pre element, with the statistics updated asynchronously after the data loads.

Mar 3, 2021
Loading thumbnail…

Mouse Follower

A single circle in an SVG viewport tracks the user's mouse in real time, following its position across the full screen. Built with React, the app uses the `useState` hook to store the current mouse coordinates and the `useCallback` hook to update them via the SVG `onMouseMove` event handler. The circle’s `cx` and `cy` attributes are bound directly to this state, causing a re-render on every pointer movement. The rendering approach is purely declarative, with the circle’s radius fixed at 30 pixels.

Mar 3, 2021
Loading thumbnail…

Smiley Face Project

This example shows a smiling face made of yellow, black, and simple SVG shapes, centered on a white background. The face is composed with React components, including a background circle, two eyes, and a mouth drawn with a d3 arc path. The Face component passes layout and sizing props like centerX, centerY, and eyeOffsetX into subcomponents, while FaceContainer renders the SVG and applies a translation transform. The mouth’s arc is configured with inner and outer radii plus start and end angles from the d3 library.

Mar 2, 2021