Skip to main content
Log in
S

Shazil Taqi

@ShazilT2005·25 public vizzes

Loading thumbnail…

A9- Choropleth Map

A choropleth map displays the poverty rate for every county in the US for 2021, with counties colored on a sequential red scale. Hovering over a county reveals its name and poverty percentage via a tooltip. Built with React and D3 v7, the visualization uses `d3.geoPath` to render county and state boundaries from a TopoJSON file, while `d3.json` and `d3.csv` load geographic and poverty data. A legend, created with `d3.scaleLinear` and `d3.axisBottom`, maps the color scale to percentages.

Apr 2, 2024
Loading thumbnail…

A6 Scatterplot

This scatterplot visualizes the relationship between age and income, with each circle colored by gender using a categorical color scale. The chart uses D3.js v7 to load CSV data from a GitHub gist, scales the x-axis starting at age 15 and the y-axis from 5000 income, and renders SVG circles with axes labeled "Age" and "Income." A d3-legend color legend titled "Gender" identifies the categories, while the styling sets black axis lines and text. The rendering approach is SVG, with scales defined via `d3.scaleLinear` and `d3.scaleOrdinal`.

Mar 27, 2024
Loading thumbnail…

A6 DIVERGING BAR CHART

This diverging bar chart compares monthly crude oil and natural gas prices over time, with blue bars extending to the right for natural gas and red bars to the left for crude oil. It uses a shared baseline at the center of the chart to emphasize the relative magnitude and divergence between the two commodities across dates. The visualization is built with D3.js v7, employing linear scales for both axes, a band scale for the categorical date axis, and SVG rectangles for rendering. Data is loaded as CSV from a remote GitHub gist.

Mar 27, 2024
Loading thumbnail…

A6 BAR CHART

This D3.v7 bar chart visualizes total goals scored in each World Cup year, using a sequential blue color scale where darker bars indicate higher goal counts. The chart loads its data from a CSV file hosted on GitHub, and renders bars as SVG rectangles with rotated x-axis labels for year readability. A legend on the right includes a linear gradient swatch with tick labels, while the color scale is defined via `d3.scaleSequential` and `d3.interpolateBlues`. The code also employs `d3.scaleBand`, `d3.scaleLinear`, and standard axes through `d3.axisBottom` and `d3.axisLeft`.

Mar 27, 2024
Loading thumbnail…

A7 HeatMap

This heatmap visualizes user demographics by profession and gender, with color intensity representing income levels. Built with D3.js v7 and React, it uses SVG rendering to display the grid of colored cells. The visualization includes a sequential blue color scale for income values, a gradient legend, and interactive tooltips showing detailed demographic information. The data is loaded from an external CSV file using d3.csv, with d3.autoType parsing the data. Axes are rendered using d3.axisBottom and d3.axisLeft, while d3.scaleBand positions the categorical variables.

Mar 26, 2024
Loading thumbnail…

A8- Edge Bundling

This example shows a force-directed graph of Bitcoin transaction relationships, where nodes represent addresses and links represent transactions. The visualization uses d3.forceSimulation with link, charge, and center forces to position the nodes, while d3.drag enables interactive node movement. Links are rendered as SVG lines, nodes as circles with title tooltips, and the data loads from a remote CSV file containing node pairs. The simulation updates node and link positions on each tick, with the alphaTarget method controlling simulation restarts during dragging.

Mar 26, 2024
Loading thumbnail…

adjacency matrix - A8

This example displays a Bitcoin transaction network as an adjacency matrix, where cells represent the summed transaction weights between node pairs and darker blue indicates higher values. The visualization updates dynamically as users hover over cells, triggering a tooltip that reveals the exact weight. Built with D3 v7 and SVG, it converts CSV data into an undirected matrix by aggregating edge weights symmetrically. CSS transitions animate cell color and scale on hover, while row and column labels rotate for readability. The entire interaction is immediate and reactive to user input.

Mar 25, 2024
Loading thumbnail…

A8- Adjacency Matrix

This example visualizes Bitcoin transaction data as an adjacency matrix, where each cell represents the connection weight between two nodes. The SVG rendering uses colored rectangles—darker blue indicates higher transaction weights, while gray represents no connection, with logarithmic scaling applied to the color intensity. The code loads CSV data via `d3.csv`, builds a symmetric matrix for the undirected graph, and renders rows and columns using D3 data joins. Hovering a cell triggers a CSS transition that scales and highlights it, and node labels appear along both axes. The implementation relies on D3 v7 selection methods and SVG transformations, with no external layout algorithms.

Mar 25, 2024
Loading thumbnail…

A8- Nodelink w/ force

This interactive visualization displays a Bitcoin transaction network as a node-link diagram with force-directed layout. Nodes represent transaction addresses, and links show transactions with stroke width proportional to transaction weight. The network is rendered as SVG circles and lines, animated through a physics simulation using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` forces. Node drag interaction and a hover tooltip showing node ID and total weight are implemented. Data is loaded from a remote CSV file.

Mar 25, 2024
Loading thumbnail…

A8- adj matrix

This example shows an adjacency matrix of Bitcoin transaction data, where each row and column represents a node and colored cells indicate weighted connections between them. The matrix is built by parsing a CSV file with d3.csv, creating a dense array of weights from the node pairs, and rendering it as an SVG grid of blue rectangles with opacity proportional to edge weight. The visualization uses D3 v7 for data binding and DOM manipulation, with a hover tooltip that displays the exact weight value via d3.select and transition. The animation-like interactivity comes from mouseover and mouseout events, while the white cell strokes and black hover outlines make the grid structure easy to read.

Mar 25, 2024
Loading thumbnail…

A8- Adj Matrix

This example renders an adjacency matrix from a bitcoin transaction dataset loaded via `d3.csv`. Each cell represents a connection between two nodes, with transparency indicating the presence of a link and blue fill for edges. The visualization uses D3 v7 with SVG `rect` elements, computing the matrix from unique node pairs. Hovering triggers a `mouseover` event, turning cells red and displaying the edge weight in a temporary HTML tooltip appended to the body.

Mar 25, 2024
Loading thumbnail…

A8 - adjacency matrix

This example visualizes a Bitcoin transaction network as an adjacency matrix, where rows and columns represent nodes and cell opacity reflects link weight. The SVG rendering uses D3.js v7 to load CSV data, construct a symmetric matrix, and generate individual `<rect>` elements sized proportionally to the matrix dimensions. Hovering over a cell highlights it in red and displays the corresponding weight value as a temporary text label near the cursor, while mouseout restores the blue fill and removes the tooltip.

Mar 25, 2024
Loading thumbnail…

A8 - Node-link diagram with force-directed layout

This example displays a food network as a node-link diagram with a force-directed layout. It uses D3.js v7's `d3.forceSimulation` with link, charge, and center forces to position nodes and edges. Node interactions include hover effects that enlarge circles and reveal a tooltip with the node ID. Data is loaded from a CSV file via `d3.csv`, and the visualization is rendered as animated SVG elements.

Mar 25, 2024
Loading thumbnail…

A7 Multi Line Chart

This multi-line chart visualizes FIFA World Cup goals scored across different tournament years, with each line representing a distinct number of teams participating. The chart uses SVG rendering with D3.js v7 to draw lines and circle markers for individual data points, while a color legend distinguishes team counts. Built with React, the visualization reads from a CSV dataset and includes interactive tooltips on hover. Axes are labeled for year and goals scored, with the legend oriented horizontally at the bottom. The implementation leverages D3 scales, line generators, and the d3-legend library for the color key.

Mar 19, 2024
Loading thumbnail…

A7 SteamGraph

This visualization presents a streamgraph of FIFA World Cup data, showing how metrics like goals scored, team count, games played, and attendance (in millions) shift across tournament years. The stacked area chart uses the d3.stack() layout with a wiggle offset to vary the baseline, making each layer’s fluctuations visible. Color-coded layers correspond to a legend on the right. The code loads CSV data via d3.csv, computes the stacked series, and renders the result as SVG paths using d3.area(). Axes, a color scale from d3.schemeTableau10, and interactive tooltips are also implemented.

Mar 19, 2024
Loading thumbnail…

A7 Small Multiples

This visualization uses small multiples to compare four World Cup metrics—goals scored, teams, games, and attendance—as line charts over time. Each metric gets its own SVG chart with shared axes, making trends easy to scan. The code loads data from a CSV via `d3.csv`, parses numeric fields, and uses `d3.line` with linear scales for each chart. A color-coded legend, created with `d3.legendColor`, maps the four categories, while titles label each small multiple. The layout relies on D3 v7’s axis generators and a fixed SVG structure for consistent comparison.

Mar 19, 2024
Loading thumbnail…

A6 DIVERGENT BAR CHART

This divergent bar chart displays positive and negative values extending in opposite directions from a central zero axis, using color to distinguish between categories. Built with React and D3, it maps data to horizontal bars via SVG rectangles, with scales and axes generated through d3-scale and d3-axis. The chart imports data from a local CSV file and updates dynamically based on user selection.

Mar 4, 2024
Loading thumbnail…

Bubble Plot D3

A bubble chart displays FIFA World Cup data, mapping tournament years on the x-axis, the number of participating teams on the y-axis, and bubble size to total attendance. Bubble color encodes the number of games played, using a viridis sequential color scale. The D3 v7 code creates an SVG with linear and band scales, square-root scaling for radii, and includes axes, titles, and legends. Data is loaded from a remote CSV file via `d3.csv`.

Feb 27, 2024
Loading thumbnail…

Boof looking scatter plot A4 D3

This scatter plot visualizes the relationship between age and time spent on social media, with each pink circle representing an individual data point. The chart uses D3 v7 to load CSV data from a GitHub gist, then applies linear scales to map age and time_spent values to screen coordinates. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, while text labels provide context for both axes and the title. The SVG rendering approach keeps the visualization lightweight and directly manipulable within the DOM.

Feb 21, 2024
Loading thumbnail…

A4 Bar Chart

This example shows a bar chart of car prices, displaying the price distribution for various car models. The chart uses an SVG rendering approach with D3 v7, implementing a band scale for the x-axis and a linear scale for the y-axis. Bars are drawn as rectangles, with price labels positioned above each bar. Data is loaded asynchronously from a CSV file hosted on GitHub, and axes are generated using D3’s axisBottom and axisLeft components.

Feb 20, 2024
Loading thumbnail…

Boxplot

This example renders a box plot using the p5.js library through its `rect()` and `line()` functions within the `draw()` loop. The visualization displays five-number summary statistics—minimum, first quartile, median, third quartile, and maximum—as a rectangular box with whiskers extending to the extremes. Synthetic data is generated directly in the sketch using JavaScript arrays and mathematical calculations. The plot is drawn on a canvas created by `createCanvas()`, with axes and labels positioned manually through coordinate arithmetic. The code demonstrates a straightforward implementation of statistical visualization without external data sources.

Feb 13, 2024
Loading thumbnail…

Histogram

A histogram displays the distribution of car prices from a CSV file loaded from a GitHub gist. The chart divides the price range into ten equal bins and plots the frequency of cars within each bin as vertical bars. The p5.js library handles the data loading via `loadTable()` and the drawing with `createCanvas()`, `rect()`, and `map()`. A background grid and labeled axes for price and frequency support the visualization, which includes tick marks showing price values at each bin boundary.

Feb 12, 2024
Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between car names and their prices using a dataset loaded from a CSV file hosted on GitHub. The code uses p5.js with the `loadTable` function to fetch and parse the data, then renders each car as a blue ellipse positioned along an x-axis and scaled y-axis. The visualization includes labeled axes, a title, and tick marks with price values, all drawn using p5.js canvas drawing functions like `ellipse` and `line`.

Feb 5, 2024
Loading thumbnail…

p5 bar chart

This example displays a simple bar chart comparing car names to their prices, rendered on an 800x800 canvas. The visualization loads car data from a remote CSV file using p5.js’s `loadTable` in the `preload` function, then draws the bars with blue rectangles and labels in the `draw` loop. Axis lines and custom tick marks are added using p5.js drawing functions like `line` and `text`, with the chart titled “Cars vs Price”.

Feb 5, 2024
Loading thumbnail…

Cars Bar Chart

This bar chart displays the top 10 most populous countries as of January 1, 2024, ranking them by total population in thousands. It uses D3.js scales (scaleBand and scaleLinear) and axis functions to render the visualization, with the y-axis label indicating population. Data comes from the @curran/un-population-estimates-2024 dataset, filtered to country/area types before sorting. The viz.js module handles rendering with reusable axis-label utilities from @curran/axis-labels, making the chart adaptable to other datasets.

Feb 5, 2024