Skip to main content
Log in
P

phemmati

@phemmati·22 public vizzes

Loading thumbnail…

Final Project

This interactive choropleth map displays the worldwide incidence of COVID-19 cases and deaths over time. Users can hover over countries for tooltip details or click to isolate a country, while moving the mouse below the map scrubs through dates from January to May 2020. The visualization uses D3 v5 with `d3.geoNaturalEarth` projections and `d3.geoPath` for rendering the SVG map, with a log-scale color encoding for case counts and a line graph for temporal trends. Data is loaded from external GeoJSON and JSON files.

May 13, 2020
Loading thumbnail…

Untitled

A scatter plot tracks COVID-19 confirmed cases against deaths on logarithmic axes, with each point representing a country and its population and regional color encoding. Overlaid dark-red lines radiate from the origin, annotating fatality rates and country labels. A circular legend explains the point size, color, and opacity encoding. The React-based D3 visualization uses `d3.axisBottom`, `d3.min`, and `d3.ticks` for axes and grid, while custom functions render the legend, annotations, and rotated fatality labels, using county-level GeoJSON data from `county.json` as a backdrop.

May 12, 2020
Loading thumbnail…

Final Release

This visualization examines the death rate of Covid-19 across different global regions, using an interactive force-directed network graph where each node represents a country and connections imply regional relationships. The chart displays the variation in death rates, with node color and size encoding the severity, while a tooltip reveals precise numerical values on hover. Built with React and D3 v5, the graph uses `d3.forceSimulation` to position nodes, with SVG rendering for the links and circles, and a custom tooltip following the cursor. Data is drawn from the v3 source, presented within a Bulma-framed HTML interface.

May 9, 2020
Loading thumbnail…

Untitled

This visualization presents a hierarchical tree map of COVID-19 case data, showing confirmed cases, deaths, and recoveries by continent and country. The root node aggregates global totals, branching into regions like Asia and individual nations, with China expanding into its provinces. Built with D3.js v5, the code uses a standard tree layout to position nodes and likely links, with each node displaying its name and associated metrics. The static data is embedded directly in the script, sourced from real-world pandemic statistics as of late April 2020. The visualization uses a simple, unstyled SVG rendering without interactive features or transitions.

May 9, 2020
Loading thumbnail…

Untitled

This visualization displays a treemap of a hierarchical dataset with three group leaders and 14 employees. The rectangles are colored by parent group using a categorical scale and sized by leaf values, with opacity reflecting the numeric value. The code uses the D3.js hierarchy API and treemap layout to compute positions, then renders SVG rectangles and text labels, including group titles and individual data values. Data is loaded from a remote JSON file.

May 9, 2020
Loading thumbnail…

Untitled

This example visualizes a hierarchical tree of COVID-19 data, showing confirmed cases, deaths, and recoveries across continents and countries. The tree layout uses d3.tree to position nodes, with SVG circles and text labels for each location. Hovering over a node triggers a tooltip displaying the specific statistics. The visualization uses d3.v5 and React, with an animated tree structure that renders the data in a clear, drill-down format.

May 7, 2020
Loading thumbnail…

Untitled

A hierarchical radial tree visualizes COVID-19 case counts from a CSV dataset, organized by continent, country, and province, with leaf nodes sized by confirmed cases. The animation highlights nodes on hover by fading unrelated branches, while tooltips display case totals. Built with React and D3 v5, it uses `d3.nest()`, `d3.hierarchy()`, and `d3.cluster()` to compute the layout, with `d3.line()` drawing links and a viridis scale coloring nodes by depth.

May 6, 2020
Loading thumbnail…

tree

A radial tree visualization shows the hierarchical distribution of COVID-19 cases, with nodes representing top infected regions branching outward from a central root. The layout uses d3.cluster() to arrange nodes in a circular pattern, with each branch's position and length encoding the case counts loaded from data.csv. The visualization is rendered as an SVG with animation, using d3.hierarchy() to structure the data and d3.nest() to group entries by multiple categorical levels. React provides the component framework for this interactive chart.

Apr 29, 2020
Loading thumbnail…

Untitled

This example demonstrates a minimal React setup for data visualization, rendering a single blank HTML page. The code uses React to mount a component into the DOM, with a basic `styles.css` that resets the body margin to zero. The visualization itself is not implemented, showing only the initial scaffolding of a project. It relies on React's `createRoot` and `render` methods to manage the page structure, serving as a starting template for further d3 or other charting libraries.

Apr 29, 2020
Loading thumbnail…

Homework 3

This example maps tree maintenance requests in San Francisco for February 2020. It shows a choropleth-style basemap of Analysis Neighborhoods with individual requests overlaid as green circular points, using a Conic Equal-Area projection. The code loads GeoJSON boundaries and streets via D3’s `d3.json`, queries the SF 311 Cases SODA API endpoint with date filters, and renders everything as SVG using `d3.geoPath` and D3 v5.

Apr 10, 2020
Loading thumbnail…

SF Arrests

This visualization shows the geographic distribution of arrests in San Francisco over the last week, with each arrest marked as a circle over a map of city neighborhoods and streets. The map uses a conic equal-area projection via `d3.geoConicEqualArea` and `d3.geoPath`, while arrest records are fetched live from the SODA API. Hovering over a neighborhood highlights its outline and displays the district name in a tooltip, using D3’s event handlers and SVG rendering.

Mar 27, 2020
Loading thumbnail…

Line Chart

This line chart shows the number of passengers using different airlines from 2005 to 2019, with each airline’s trend encoded by a distinct color. The vertical axis represents passenger counts, the horizontal axis indicates the year, and it includes both domestic and international flights. It uses d3.v4 with SVG rendering, where the `line()` generator creates the paths and `d3.scaleTime` maps the time data. The design includes axis labels, a legend to identify airlines, and smooth animated transitions via `transition.attrTween` to update the lines.

Mar 13, 2020
Loading thumbnail…

Untitled

This interactive line chart displays the number of passengers for seven U.S. airlines from 2000 to 2015, with each airline represented by a colored line. Users can hover over a line to highlight it and dim the others, while moving the mouse over a line reveals the airline’s name at the top of the chart. The visualization uses d3.nest to group the data by airline, d3.scaleTime and d3.scaleLinear for axes, and d3.line for path generation. SVG rendering with CSS transitions animates opacity and stroke-width changes during hover interactions.

Mar 12, 2020
Loading thumbnail…

Homework 2

This scatterplot matrix visualizes relationships among four passenger statistics metrics—K Rank, Cond Parq1, Par Q1, and Par Top1Pc—for San Francisco Airport flights, with points colored by airline type (for-profit, private non-profit, or public). Built with D3.js v5 and rendered as SVG, the visualization uses d3.scaleLinear for axes, d3.axisBottom for tick marks, and individual scatterplot cells arranged in a grid to show pairwise correlations. The data comes from a CSV file containing airline performance metrics, and the plot includes hidden-point filtering via circle elements with fill-opacity.

Feb 25, 2020
Loading thumbnail…

Line Chart

This line chart compares the popularity of U.S. airlines by passenger count over time, colored by carrier and showing a notable rise for United Airlines between 2012 and 2018. The SVG visualization is built with D3.js v4 within a React framework, using the `d3.scaleLinear` and `d3.axisBottom` APIs to map data from a CSV file. The chart contrasts a D3-rendered interactive plot with a static Tableau image, both displaying trends in domestic and international flight passengers from 2005 to 2019.

Feb 25, 2020
Loading thumbnail…

Gun Deaths in Florida

A line chart depicts the annual number of firearm murders in Florida from 1971 to 2017, with data sourced from the Florida Department of Law Enforcement and rendered as an SVG using D3 v5. The visualization plots total firearm deaths on a linear scale, marking each year with a point connected by a purple line. The code filters years, draws axes with decade labels, and includes annotations for the 2005 "Stand Your Ground" law.

Feb 21, 2020
Loading thumbnail…

Bar Chart

This bar chart visualizes passenger volumes by region for San Francisco Airport, showing that the US dominates with over 487 million passengers, followed by Asia and Europe. Built with D3 v5 and SVG, the visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with data loaded from a CSV file via `d3.csv`. The chart features purple bars that turn brown on hover, with axis labels applied through `d3.axisBottom` and `d3.axisLeft`.

Feb 14, 2020
Loading thumbnail…

Line Chart

This line chart visualizes the popularity of US airlines based on passenger numbers at San Francisco Airport from 2005 to 2019. The D3 v4 implementation renders an SVG chart with smooth animated lines, using the Bulma CSS framework for page styling. The visualization compares passenger volumes across multiple airlines over time, with data structured as arrays of date-value pairs. The code includes axis rendering, styled line paths, and interactive navigation within a React-based gallery page.

Feb 14, 2020
Loading thumbnail…

Line Chart

This line chart shows passenger counts for US airlines over time, with each airline represented as a separate colored line. The visualization uses D3.js v4 to render SVG paths and scales, with data embedded directly in the script. The chart includes axes labeled with dates and passenger numbers, and is styled with custom CSS for line thickness and font. The visualization is part of a larger air traffic dashboard for San Francisco Airport, presented within a Bulma-styled HTML page.

Feb 14, 2020
Loading thumbnail…

Mobility Rate Bubble Chart

A bubble chart displays mobility rates for California universities, plotting median parent household income against mobility rate (the percentage of students from the bottom income quintile reaching the top). Circle size encodes average cohort size, while color represents the trend in parents from the bottom 40%. The visualization uses D3.js v5 with `d3.scaleSqrt` for bubble sizing, `d3.scaleDiverging` for color, and `d3-legend` for legends. Data comes from Opportunity Insights' Mobility Report Cards dataset, filtered to California institutions, with labels for select universities.

Feb 14, 2020
Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that sets up an SVG canvas for data visualization. It initializes a fixed-width and fixed-height SVG, applies margins to create a plot region, and defines quantitative scales for x, y, radius, and color using d3.scaleLinear, d3.scaleSqrt, and d3.scaleDiverging with the RdYlGn interpolator. The scales establish ranges for axes and encode data attributes, though no data is plotted. The code imports D3 v5 and the d3-legend library for potential legend rendering.

Feb 14, 2020
Loading thumbnail…

Untitled

This visualization displays air traffic passenger statistics for San Francisco Airport from 2005 to 2019, using multi-series line charts to compare passenger volumes across airlines like Alaska and American. The code uses D3 v4 to create SVG-based line charts with scaling axes and path generation. Data is embedded directly in the script as JavaScript arrays. The visualization is styled with Bulma CSS for the header and navigation, with Font Awesome icons, and initializes the chart in a div element with the ID “chart.”

Feb 14, 2020