Bo Yang

@LoganYangBo·14 public vizzes

6 weeks Covid-19 cases of 3 Counties, Ohio

This visualization presents six weeks of daily COVID-19 case counts for three Ohio counties—Butler, Hamilton, and Montgomery—as separate heatmaps stacked vertically. Each chart maps week on the y-axis and day of week on the x-axis, with cell color intensity reflecting case volume via a blue sequential scale. Hovering reveals the exact date and case number. The code uses D3.js v6 to load CSV data, build band scales, and render SVG rectangles with tooltip interactions.

Dec 6, 2021

Loading thumbnail…

Mapping vehicle pollution and vegetation removed pollution in USA

A choropleth map of the United States displays the net effect of vehicle pollution versus the pollution removed by vegetation for each county, with a sequential blue-yellow-red color scale indicating the balance. The visualization uses D3.js v4 with the `d3.geoAlbersUsa` projection and `d3.geoPath` to render county boundaries from Census Bureau data, while an animated bar chart details the pollution contribution for a hovered county. The map is interactive, supporting zoom and pan via `d3.zoom()`, and color encoding uses the `d3.interpolateRdYlBu` scale.

Nov 30, 2021

Loading thumbnail…

PM2.5 in US

A choropleth map of the United States displays county-level PM2.5 concentration for each year from 2000 to 2018, using a yellow-to-blue color scale to indicate air pollution levels. An interactive vertical slider and a play button animate through the years. Built with React and D3, it uses `d3.geoPath` for the map, `d3.interpolateRdYlBu` for the color gradient, and TopoJSON for state and county boundaries. Data comes from county PM2.5 measurements, with missing areas in grey.

Nov 30, 2021

Loading thumbnail…

The comparasion of availiable hospital beds

This interactive donut chart compares available hospital beds across five Ohio regions, toggling between Critical Bed and Med/Surg Bed categories via radio buttons. Built with D3.js, it uses `d3.pie` and `d3.arc` to generate the arcs, with a legend of colored dots and labels. The visualization animates transitions between datasets using `transition.attrTween` and an arc interpolation function, while the SVG renders the chart and legend from a local JSON data source.

Nov 29, 2021

Loading thumbnail…

Hospital Capacity in Ohio

This visualization shows hospital capacity across Ohio counties, comparing the number of beds in use against total capacity for both critical care and medical/surgical units. A grouped bar chart uses `d3.scaleBand` for counties and bed types, with `d3.scaleLinear` for the y-axis and `d3.scaleOrdinal` for color encoding. The data comes from `data2.csv`, rendered as SVG rectangles via D3 v5, with axis labels and a manually constructed legend.

Sep 11, 2021

Loading thumbnail…

R(t) for Franklin & Ohio

This visualization tracks the effective reproduction number R(t) for Franklin County and Ohio from October 2020 to March 2021, showing two time-series lines that reveal infection trends over time. The chart uses d3.csv to load the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to create smoothed paths. A d3.nest operation groups data by city, and d3.scaleOrdinal with schemeCategory10 assigns colors. The visualization includes gridlines via axis tick sizing, a custom color legend rendered in SVG, and a title annotation.

Sep 11, 2021

Loading thumbnail…

Everyday Cases for four Counties in Ohio

Four county-level COVID-19 case counts appear as smooth, colored line charts over time, with a categorical color legend identifying each county. The visualization uses D3 v5 with an SVG renderer, nesting the CSV data by county and drawing paths with `d3.line` and `curveBasis`. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, while a custom `colorLegend` function renders the ordinal scale.

Sep 11, 2021

Loading thumbnail…

Temperature in San Francisco Line Chart

The chart displays the daily case counts for Allen and Butler counties across the first quarter of 2021, with both series plotted against the same time axis on a dual-line chart. The code uses the d3 library's `csv`, `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` functions to parse the data and construct the SVG rendering. Two separate `line` generators with `curveBasis` create smooth paths, while the left y-axis is labeled twice for each series, and grid lines are drawn via the axes' `tickSize` settings.

Sep 11, 2021

Loading thumbnail…

Temperature in San Francisco area Chart

This area chart shows temperature measurements in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The chart is rendered as an SVG using D3 v5, with a maroon area fill beneath a basis curve. The code employs D3's `scaleTime`, `scaleLinear`, `area`, and `curveBasis` APIs to create the visualization, along with `axisBottom` and `axisLeft` for labeled, grid-lined axes. The data is loaded from a CSV file, with timestamps parsed into Date objects and numerical temperatures.

Aug 28, 2021

Loading thumbnail…

World Population Area Chart

This area chart displays world population growth over time, with population values on the y-axis and years on the x-axis. The chart is rendered as a filled SVG path with a maroon area, using data from a CSV file that includes population figures by year. The visualization is built with D3 v5, utilizing `scaleLinear`, `scaleTime`, `area`, `curveBasis`, and `axisBottom`/`axisLeft` functions. Axis ticks are formatted to abbreviate large numbers, and axis labels like "Time" and "Population" are rotated and positioned within the SVG canvas.

Jul 29, 2021

Loading thumbnail…

Cars Scatter Plot

This scatter plot shows the relationship between fuel efficiency (MPG) and engine power (horsepower) for a collection of cars, with each red semi-transparent circle representing a single vehicle. The visualization uses d3.csv to load data from the auto-mpg dataset and d3.scaleLinear with d3.extent to map values to positions, while d3.axisBottom and d3.axisLeft construct the labeled axes. The chart is rendered as an SVG with custom margins, tick formatting, and axis labels using d3.format.

Jul 21, 2021

Loading thumbnail…

Temperature in San Francisco Scatter Plot

This scatter plot displays a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The visualization uses D3 v5 to render an SVG with grid lines, axis labels, and circle marks, leveraging `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. Data is loaded via `d3.csv` from a remote CSV file, with timestamps converted to Date objects and temperatures parsed as numbers.

Jul 21, 2021

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the top 10 most populous countries using a 2018 United Nations estimate, mapping population on the x-axis and country names on the y-axis. It uses D3 v5 with SVG rendering, employing `scaleLinear` for the population axis, `scalePoint` for categorical positioning, and `axisBottom`/`axisLeft` for gridlines and tick marks. The code formats population values using `format` with a B suffix for billions.

Jul 20, 2021

Loading thumbnail…

Customizing Axes

This example demonstrates a horizontal bar chart of the top 10 most populous countries, highlighting customized axis styling. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population and country names, with `axisBottom` and `axisLeft` rendering ticks. The code removes default axis domains and gridlines, applies custom tick formatting via `format('.3s')` to abbreviate numbers, and sets an SVG title. Data loads from a CSV file, and rendering uses SVG with `select` and `csv` from D3.

Jul 20, 2021