Skip to main content
Log in
M

mhzahdeh@dons.usfca.edu

@mhzahdeh·16 public vizzes

Loading thumbnail…

Fork of HTML Starter

This example displays a choropleth of Middle Eastern countries on a Mercator projection, highlighting listed nations and showing their assigned ID numbers in a tooltip on hover. It loads world GeoJSON data and uses `d3.geoMercator` with `fitExtent` to focus the map on the relevant region. The SVG visualization relies on `d3.json` for data loading and `d3.select` for DOM interaction, with country shapes styled and tooltips positioned using CSS transitions.

Jan 18, 2026
Loading thumbnail…

Map

This interactive bar chart displays the frequency counts of letters A through G, with bars that respond to mouse clicks. Clicking a bar highlights it in a darker color and dims the others; clicking again deselects it. The visualization is built by combining React for the component lifecycle with D3 v7 for SVG rendering, scales, and axes. It loads data from a CSV file and dynamically resizes the chart to fit its container using a `ResizeObserver`.

Jan 18, 2026
Loading thumbnail…

Starting Salary Final Project Chart

This bar chart displays the average annual starting salary for 49 countries, ordered from highest to lowest income, with Bermuda and Norway leading at the top. The visualization uses D3 v7 to load the data from a CSV file, placing each bar horizontally and encoding salary values along the x-axis. The chart includes interactive tooltips, showing each country’s exact income on hover, and a text annotation highlighting that developed nations dominate the upper rankings. The data is sourced from Worlddata.info, and the SVG rendering uses a linear scale for income and a band scale for country names.

May 4, 2025
Loading thumbnail…

Final Project: Life Expectancy Bar Chart

This interactive bar chart visualizes the average life expectancy of the top 30 countries, with each bar's length and color intensity representing the life expectancy value. The visualization uses D3.js v7, rendering with SVG, and leverages the d3-legend and d3-annotation libraries for a color legend and explanatory labels. It reads data from a CSV file containing country and life expectancy figures, positioning horizontal bars on a categorical Y-axis and a linear X-axis. Hovering over a bar triggers a tooltip displaying the country name and its exact life expectancy value.

May 4, 2025
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example demonstrates a real-time force-directed network visualization, displaying nodes and edges that dynamically adjust their positions based on simulated physical forces. The graph uses `d3.forceSimulation` to compute node movement and repulsion, while SVG elements render the resulting structure. The visualization includes interactive controls for adjusting simulation parameters, and the node positions update every frame via a custom animation loop. The code uses the React framework to manage state and re-render the D3-based scene, with the simulation data loading from a JSON file.

Apr 30, 2025
Loading thumbnail…

GDP Average Chart

This D3.js bar chart visualizes the 2023 GDP per capita for the top 50 countries, using a green circle for each nation plotted along a categorical x-axis and a linear y-axis. Circles are positioned using `d3.scaleBand` and `d3.scaleLinear`, with interactive tooltips revealing the country name and GDP on hover. The SVG chart, built with `d3.svg` and `d3.axisBottom`/`d3.axisLeft`, reads data from the included `TopGDPCountries.csv` file, rotating x-axis labels for readability. Data originates from Worlddata.info.

Apr 29, 2025
Loading thumbnail…

Final Project TreeMap

This treemap visualizes the distribution of hedge fund assets under management (AUM) by country, with each rectangle sized proportionally to the total AUM for that nation. The chart uses d3.hierarchy and d3.treemap to compute the layout, then renders rectangles as SVG elements with a categorical color scale via d3.scaleOrdinal. Hovering a rectangle triggers a tooltip showing the country name and its aggregated AUM value, which the code sums from the CSV data source. The visualization is fully responsive, recalculating dimensions on window resize.

Apr 28, 2025
Loading thumbnail…

Final Project- Multiple line chart

This visualization shows GDP per capita trends from 2019 to 2023 for five selected countries: the United States, India, Germany, Brazil, and China. The chart displays five polylines, one per country, with distinct colors and a legend identifying each line. The SVG rendering uses `d3.line()` to generate the paths and `d3.scalePoint()` for the x-axis years, while `d3.legendColor()` creates the color legend. Data is loaded from a CSV file via `d3.csv()` and processed into long format for plotting.

Apr 7, 2025
Loading thumbnail…

Assignment #8 Node-link diagram with force-directed layout

This node-link diagram visualizes the relationships among Facebook food pages, using a force-directed layout to position nodes and edges. The graph is rendered as an SVG, with nodes as blue circles and labels placed nearby. The code utilizes the D3.js v7 library, specifically leveraging the `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` APIs to compute the layout. The data originates from the networkrepository.com fb-pages-food dataset, loaded from `nodes.csv` and `links.csv` files. The simulation continuously updates node, label, and link positions on each tick event.

Mar 25, 2025
Loading thumbnail…

Assignment #7 Multiple Line Chart

This example visualizes five automobile performance attributes—economy in miles per gallon, cylinder count, horsepower, weight, and 0-to-60 mph time—as a set of colored polylines plotted against car models from a CSV file. The chart reveals each model’s relative values across these disparate scales on a single axis. The code uses D3 v7 to load the CSV, define point and linear scales, draw the SVG paths with `d3.line`, and render axes with `d3.axisBottom` and `d3.axisLeft`. Each attribute uses a fixed stroke color, and a legend is constructed via `d3.scaleOrdinal`.

Mar 10, 2025
Loading thumbnail…

Assignment #6: Bar Chart with Color Legend

This example shows a bar chart of economy (MPG) values for eight car models, with car names on the x-axis and MPG on the y-axis. The chart is rendered as an SVG using D3 v7, loading data from a CSV file via `d3.csv`. Bars are drawn with `rect` elements, positioned using `scaleBand` for the x-axis and `scaleLinear` for the y-axis, with axes created via `d3.axisBottom` and `d3.axisLeft`.

Feb 28, 2025
Loading thumbnail…

Assignment #5 Bubble Chart

This bubble chart displays the relationship between car models, their fuel economy in miles per gallon, and engine cylinder count. Each car is represented as a circle positioned along the x-axis by car name and y-axis by economy rating, with circle radius encoding cylinder count. The visualization uses d3.csv to load sample.csv, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the y-axis, and d3.scaleSqrt for the radius mapping. SVG circles are rendered directly into the DOM, with axes generated via d3.axisBottom and d3.axisLeft.

Feb 25, 2025
Loading thumbnail…

Assignment #5 Bubble Chart

This bubble chart compares fuel economy (mpg) against the number of cylinders for eight car models from a CSV file, with each car positioned along the x-axis and its economy value plotted on the y-axis. The visualization uses D3 v7's `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `axisBottom`/`axisLeft` to render axes. Instead of traditional bars, it draws a line path using `d3.line`, mapping car names to x-coordinates and economy values to y-coordinates, with the y-axis explicitly sized to cylinder counts via a second linear scale. The SVG output is styled with steelblue strokes, and the chart title is displayed above the plotting area.

Feb 24, 2025
Loading thumbnail…

Assignment #2 Visualizing Amounts with P5

This example visualizes fuel economy (mpg) for eight car models using a static bar chart, with the title "Economy mpg by Car Type" and a CSV data source. The chart renders bars in steelblue, with axis labels and tick marks styled via CSS classes. The code uses d3.csv to load the data, d3.scaleBand for the categorical x-axis, d3.scaleLinear for the numeric y-axis, and d3.axisBottom and d3.axisLeft to draw the axes. The SVG output is created within a fixed 1500x500 container with margins, and bars are drawn as rect elements with heights proportional to the mpg values.

Feb 20, 2025
Loading thumbnail…

Assignment #3 Histogram

This histogram displays the distribution of cylinder counts in a dataset of cars, with the x-axis showing cylinder types and the y-axis showing the number of cars. The visualization uses p5.js to load a CSV file from a URL via `loadTable`, then counts occurrences per cylinder type in the `setup()` function. Bars are drawn in `draw()` using `rect()` calls, with heights scaled by count and positioned along a manually drawn coordinate system. The data originates from the Corgis cars dataset, specifically the fuel information column.

Feb 10, 2025
Loading thumbnail…

Fork of Histogram with p5.js

This visualization displays the number of cylinders for various car models as a series of vertical bars, with each bar labeled by the corresponding car name. The chart uses p5.js to load car data from a CSV file via `loadTable()`, then draws the bars and axes using `rect()` and `line()` within the `draw()` loop. The sketch includes a fixed canvas size, grid lines, and axis labels to contextualize the values, while the data is fetched from a remote GitHub Gist containing car specifications.

Feb 9, 2025