Shan Gao

@hbx124·5 public vizzes

Fork of Multiple Views with Brushing

This interactive visualization combines a world map of missing migrant incidents with a brushable time-series histogram. The map displays circles sized by the total dead and missing, while the histogram allows users to brush over time ranges to filter the map data. Built with React and D3 v5, it uses `geoNaturalEarth1` projections, `geoPath` for map rendering, `brushX` for temporal selection, and `scaleSqrt` for circle sizing. Data comes from the Missing Migrants Project dataset.

May 8, 2021

Loading thumbnail…

Fork of World Happiness and Health Expenditures Correlation

This visualization shows the correlation between national happiness scores and health expenditures per person, using a line chart to depict the trend across countries. It loads country-level data from a CSV file and renders it with Vega-Lite, using vega-lite-api and d3.csv for data fetching. The chart is customized with config.js for readability, and includes a layer for a least-squares regression line exported from lregression.js, which calculates the linear relationship fit to the data points.

May 5, 2021

Loading thumbnail…

Fork of Fork of ILINet Flu Surveillance Data

A multi-line chart displays annual ILI flu case totals across U.S. regions, with each line representing a year from 2015 to 2019 and encoded using an unordered color scale for the ordered year field, an improper choice that hampers temporal comparisons. The visualization aggregates weekly ILITOTAL values per year, region, and week, then plots them against week number using Vega-Lite’s API with markLine. Data originates from CDC FluView Interactive, loaded via d3.csv, and rendered with SVG through vega-tooltip for interactivity.

May 5, 2021

Loading thumbnail…

Fork of ILINet Flu Surveillance Data

This line chart visualizes annual ILI total flu cases in the U.S. from 2015 to 2019, with each year’s curve showing weekly case counts to compare season patterns year-over-year. The visualization uses an unordered color scale for the ordered year field, making it difficult to discern temporal progression. Built with Vega-Lite API and D3.js, it aggregates ILITOTAL by year, week, and region from CDC FluView data, rendering lines with a width based on window size and configuring axes and tooltips.

May 5, 2021

Loading thumbnail…

Fork of D3 Scatter Plot

This example visualizes the Iris dataset with a D3 scatter plot using SVG circles, mapping petal length on the x-axis and sepal length on the y-axis. It loads the CSV data via `d3.csv`, parses numeric fields, and derives scales with `scaleLinear` from the data extent, positioning each point based on those scales. Axes are rendered using `axisBottom` and `axisLeft`, while the plot fills the browser window. The code leverages d3.v6 destructured functions like `select` and `csv` to fetch and draw the points.

May 5, 2021