stanley.shen2003@gmail.com

@stanleyshen2003·10 public vizzes

Horizon chart

This visualization uses horizon charts to compare six air pollutants (SO2, NO2, CO, O3, PM10, PM2.5) across multiple monitoring stations over time. Each pollutant’s daily median values are rendered as a series of stacked, color-shaded bands, where the number of bands is user-adjustable, revealing amplitude variations. The charts are built with D3.js (v5 and v7), using `d3.rollup`, `d3.area`, and `d3.scaleUtc` to aggregate and lay out the data, with a custom color scheme per pollutant. The interface allows selecting a specific year and band count, updating all six SVG views accordingly.

Jan 16, 2024

Loading thumbnail…

Scattered plot

This interactive scatter plot visualizes the classic Iris dataset, showing the relationship between two selected flower measurements. The D3.js visualization uses radio buttons to let users choose which of the four attributes (sepal length, sepal width, petal length, petal width) to plot on the x- and y-axes, with the plot rendering as an SVG. Points are colored by iris species (setosa, versicolor, virginica) using D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs, with data loaded via `csv`.

Jan 16, 2024

Loading thumbnail…

Fork of Final project

This interactive visualization explores global happiness data (2015–2019) across multiple dimensions, including economy, family, health, freedom, trust, and generosity. It presents a choropleth world map colored by selected metrics, a leaderboard for ranking countries, a detail view for individual country comparisons, and a correlation matrix between factors. Users can switch views, filter by year or region, and adjust rank ranges. Built with D3 v7, it uses `d3.geoPath` with Natural Earth projections for the map, `d3.scaleSequential` for color encoding, and animated transitions for temporal changes, rendering in SVG.

Jan 16, 2024

Loading thumbnail…

Correlation matrix

This visualization shows a correlation matrix for the Abalone dataset, displaying the relationships between eight physical measurements and age rings. The matrix uses colored rectangles, with a tomato-to-steelblue color scale via chroma-js, to represent correlation values between variable pairs. Built with React and D3 v4, the code uses `jz.arr.correlationMatrix` to compute correlations and `data2grid.grid` to structure the data. Hovering over a rectangle highlights the corresponding row and column labels while displaying the exact correlation coefficient in a tooltip.

Nov 23, 2023

Loading thumbnail…

SANKEY

This visualization uses a Sankey diagram to show the flow of categorical attributes from a car evaluation dataset, with nodes representing distinct values for features like buying price, maintenance, doors, people, luggage boot, and safety. The diagram is rendered using D3 v4's SVG API and a custom `d3.sankey` layout to position nodes and links. Users can drag node rectangles to rearrange the layout, which calls `sankey.relayout`, and the interactive buttons highlight the specified data columns. The dataset is loaded from a static `sankey.data` file using `d3.text` and parsed with `d3.csvParseRows`.

Nov 17, 2023

Loading thumbnail…

Stream graph

This interactive stream graph visualizes quarterly median house and unit prices in Sydney from 2007 to 2019, using a silhouette layout to show price trends across seven property categories. Built with D3 v5 and SVG, it loads CSV data and uses `d3.stack` with `stackOffsetSilhouette` to generate layered areas, while `d3.scaleOrdinal` and `d3.schemeDark2` handle coloring. Users can drag sortable buttons to reorder series, and hovering over an area highlights it and displays its name. The chart includes a customized time axis with tick marks.

Oct 27, 2023

Loading thumbnail…

Stacked bar chart

This stacked bar chart visualizes the weighted component scores of universities from the Times Higher Education World University Rankings. Users can sort universities by total score or individual metrics like teaching or research, toggle between ascending and descending order, and filter the displayed range. The chart uses D3 v7 with an SVG rendering approach, employing `d3.stack` to layer the five score categories and `d3.scaleBand` for the categorical x-axis. Interactive radio buttons and number inputs control sorting and filtering, while hover tooltips reveal detailed score information for each university.

Oct 19, 2023

Loading thumbnail…

Brushable scattered plot

This visualization presents a brushable scatter plot matrix of the classic Iris dataset, showing pairwise relationships between four floral measurements across 150 flowers. Users can brush points in any scatter plot pane to highlight selections, which are then reflected in all other panels and as color-coded, stacked histograms along the diagonal. The chart is built with D3 v7, using `d3.brush` for interactive selection, `d3.scalePoint` for panel positioning, and SVG elements for all rendering. Each flower is colored by its species using an ordinal scale, with unselected points rendered in black.

Oct 3, 2023

Loading thumbnail…

Untitled

This visualization presents a scatter plot matrix of the Iris flower dataset, with each pair of the four numeric variables (sepal and petal length and width) displayed as separate small multiples. The diagonal cells show histograms of each variable’s distribution, while off-diagonal cells show scatter plots colored by species using `d3.scaleOrdinal`. Built with `d3.scalePoint` to position each cell, `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for ticks, it uses `d3.extent` to compute per-cell domains and the `d3.histogram` API to bin data for the diagonal plots. Data is loaded as CSV from a remote URL, rendered as SVG circles and rectangles.

Oct 3, 2023

Loading thumbnail…

parallel coordinate plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, with each flower’s measurements drawn as a polyline across four vertical axes. Users can drag the labeled buttons—sepal width, sepal length, petal width, and petal length—to reorder the dimensions, which rebuilds the chart using `d3.scaleLinear`, `d3.scalePoint`, and `d3.line`. Paths are color-coded by species via CSS classes, rendering in SVG with data loaded from an external CSV file.

Sep 24, 2023