Manh Pham

@MikePham05·9 public vizzes

Final Project

This interactive choropleth map shows cumulative COVID-19 cases per U.S. state as of September 2021, with darker fills representing higher case counts. Clicking a state displays a tooltip with its name, total cases, and total deaths. The visualization loads county-level data from a CSV via `d3.csv`, aggregates it by state using `d3.rollup`, and renders SVG paths from TopoJSON using `d3.geoPath`. Color opacity is scaled proportionally to each state’s case total, with a bivariate legend circle appended on click.

Sep 13, 2022

Loading thumbnail…

Final Project

This interactive map displays confirmed COVID-19 deaths and cases by U.S. county, with each state labeled at its geographic centroid. The visualization projects TopoJSON boundary data using `d3.geoPath` and renders state shapes as SVG paths, colored steelblue with white borders and hover states that turn red. County-level CSV data is loaded via `d3.csv` and parsed, though the map currently presents only the state-level geometry rather than county-specific values. The implementation uses React without explicit components, importing utilities directly from D3 v4.

Dec 5, 2021

Loading thumbnail…

Interactive Bar Charts for Various COVID 19 Stats in the US

This interactive bar chart displays COVID-19 statistics for 20 US counties, showing metrics like confirmed cases and deaths selected via a dropdown menu. The bars are sorted by ascending death counts. Built with D3.js v6, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render the SVG visualization. Data comes from a New York Times dataset loaded as a CSV, with user interactions handled through a custom menu component using D3’s `dispatch` for change events.

Dec 5, 2021

Loading thumbnail…

Untitled

This choropleth map of the United States displays sample data for each state, with tooltips showing low, average, and high values on hover. Built with React and D3 v3, it renders states as SVG paths using the `uStates.js` helper, and colors each state via `d3.interpolate` from a yellow-to-dark-red scale based on randomly generated data. The custom tooltip div appears on mouseover, populated by the `tooltipHtml` function.

Nov 30, 2021

Loading thumbnail…

Untitled

This example displays a map of the United States with individual state boundaries rendered as SVG paths. The visualization uses TopoJSON data from the us-10m dataset, with states drawn via d3.geoPath and state borders emphasized with a white stroke. The code employs the D3 v4 library and topojson.feature to extract state geometries, while a CSS hover effect turns states red for interactive feedback. The rendering is purely SVG-based within a React framework.

Oct 26, 2021

Loading thumbnail…

Bar Chart Covid Data Manh Pham

This bar chart displays the confirmed COVID-19 death counts for ten counties, sourced from New York Times data hosted in a GitHub Gist. The visualization uses D3 v7’s `scaleLinear` and `scaleBand` to map death counts to horizontal bar lengths and county names to vertical positions, respectively. The SVG renders steelblue rectangles with axes generated via `axisLeft` and `axisBottom`. The chart adapts to the browser window size, with margins and data sliced to the first ten rows of the CSV file.

Sep 30, 2021

Loading thumbnail…

Scatter Plot OCED Manh Pham

This scatter plot shows the relationship between housing prices in Australia and Belgium for each quarter from 1975 to 2012, using OECD data loaded from a GitHub Gist. Each circle represents one quarter, with its x-position determined by the Australian price and its y-position by the Belgian price. The visualization uses D3 v7’s `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to parse the data, map it to pixel coordinates within a full-window SVG, and render the axes. Circles are appended with a fixed radius of 2 pixels.

Sep 30, 2021

Loading thumbnail…

Scatter Plot Covid Data Manh Pham

This scatter plot visualizes COVID-19 data from The New York Times, mapping probable deaths on the x-axis against confirmed deaths on the y-axis for U.S. counties. Each circle represents a county, revealing the relationship and potential discrepancies between the two death counts. Built with D3 v7, the visualization uses `d3.csv` to load data, `scaleLinear` with `extent` for scales, and `axisLeft`/`axisBottom` to render axes. The SVG circles are positioned dynamically based on the data, with margins adapting to the full browser viewport.

Sep 30, 2021

Loading thumbnail…

Scatter Plot ATP Match Statistic

This scatter plot visualizes ATP tennis match statistics from 2015, plotting each match’s winner ranking on the x-axis and loser ranking on the y-axis. The chart uses d3.csv to load the data, then applies d3.scaleLinear and d3.extent to map rankings to screen coordinates, with circles rendering the data points. Axes are generated using d3.axisLeft and d3.axisBottom, and the SVG output fills the entire viewport. The dataset comes from a public Gist containing the 2015 ATP match records.

Sep 30, 2021