StefanZhang

@StefanZhang·10 public vizzes

COVID-19 Viz

This visualization shows COVID-19 death trends across U.S. states over time, with a line chart revealing that most states remain below 5,000 deaths, while Florida, California, and Texas spike dramatically during summer. The chart encodes date on the x-axis, deaths on the y-axis, and state as color, with tooltips displaying cases. Built with vega-lite-api and d3.csv, it fetches data from a GitHub gist and renders using Vega-Lite’s markLine with monotone interpolation. Custom axis and label styling improve readability, and the visualization automatically fits the window size.

Oct 20, 2020

Loading thumbnail…

Experiment

This bar chart visualizes temperature measurements over time, derived from a Twitter sentiment dataset hosted at sentiment.stefanzhang.com. The visualization uses Vega-Lite’s API via `vega-lite-api`, with the chart configured through `vl.markBar()` and encoding time on the x-axis and temperature on the y-axis, both with scales that do not include zero. It fetches data asynchronously using `d3.csv` from the D3 library, then renders the plot to fill the browser window with a custom dark theme and tooltip support from `vega-tooltip`.

Oct 14, 2020

Loading thumbnail…

Scatter Plot with Menus and Color legend

This interactive scatter plot explores the Bike Sharing Dataset from the UCI ML Repository, showing relationships between normalized temperature, humidity, and wind speed across 731 days. Users select variables for the x- and y-axes via ReactDropdown menus, while weather conditions are encoded by circle color using d3.scaleOrdinal with a custom ColorLegend component. The visualization uses d3.csv to load data, d3.scaleLinear for coordinate mapping, and React hooks to manage state, rendering SVG marks with d3.axis components.

Oct 9, 2020

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Bike Rental Dataset from UCI ML Repository, allowing users to compare three weather attributes—temperature, humidity, and windspeed—through dropdown menus that control the X and Y axes. The visualization updates dynamically using React's useState hook and the react-dropdown component. D3.js scaleLinear and extent functions handle axis scaling, while pre-rendered SVG circles represent 731 data points. The chart uses separate AxisBottom and AxisLeft components built with D3 ticks, with manual React rendering of axes rather than D3 axis generators.

Oct 4, 2020

Loading thumbnail…

Covid-19 Records in MA

This visualization shows the trend of confirmed COVID-19 cases in Massachusetts from February to September 2020, plotted as individual circles on a time-series scatterplot using React and D3 v5. The SVG chart uses `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with custom `AxisBottom` and `AxisLeft` components rendering ticks and labels. Data is loaded asynchronously via `d3.csv` from a GitHub gist, with the y-axis formatted in compact notation and tooltips showing the month via the native SVG `<title>` element.

Sep 28, 2020

Loading thumbnail…

Bike Rental DataViz Humidity vs Temperature

This visualization uses a scatterplot of humidity against temperature, with circle size encoding the total bike rental count and color distinguishing weather types. It reveals that higher humidity reduces rentals more sharply than high temperatures, while low temperatures also deter riders. The data comes from the Bike Rental dataset, processed via d3.csv. The chart is built with vega-lite-api, using vl.markCircle, vl.x, vl.y, vl.color, vl.size, and vl.tooltip, rendered through vega and vega-lite with d3 v5.

Sep 18, 2020

Loading thumbnail…

Bike Rental DataViz using Vega-Lite API

This example visualizes daily bike rental counts across months, colored by weather condition, using a scatter plot with circle marks. It reveals higher rental volumes during warmer months (March–October) and notable drops during extreme weather events, especially in summer. The visualization is built with the Vega-Lite API, registered through Vega and Vega-Lite, and renders as SVG with tooltips powered by vega-tooltip. Data is loaded asynchronously from a CSV file via D3’s `csv` function, with custom axis and label styling defined in a separate configuration module.

Sep 18, 2020

Loading thumbnail…

PM 2.5 2018 in US

A scatterplot displays PM2.5 air quality levels for U.S. counties in 2018, with each circle plotted by county FIPS code on the x-axis and annual PM2.5 concentration on the y-axis. The visualization reveals that Alaska and Wyoming have the cleanest air, while California suffers the worst due to wildfires. Built with d3.v5 and the vega-lite-api, it loads CSV data, uses vega-lite’s markCircle encoding, and applies a custom configuration for improved readability.

Sep 18, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse three CSV datasets from GitHub Gists using D3 v5. It displays the file size in kilobytes, row count, and column count for each dataset—PM2.5 air quality data, bike rental records, and COVID-19 infection statistics—inside a styled `<pre>` element. The code uses the `d3.csv` method to fetch and parse each file, then `d3.csvFormat` to calculate the raw data size, and `data.length` and `data.columns.length` to report the dimensions. Results are appended incrementally as each promise resolves, with the final output rendered to the page.

Sep 18, 2020

Loading thumbnail…

Smiley Face Part II (Pig face)

A pig face rendered in SVG appears at the center of a responsive canvas, with a pink circular head, black-outlined features, and two elliptical nostrils. The face is constructed using React components that generate SVG shapes, including circles for the eyes and ellipses for the nose and nostrils. The mouth is created with a D3 arc generator, using specific angle and radius values to define its curved smile.

Sep 18, 2020