hi4u2qzy@gmail.com

@HE14HE14·9 public vizzes

Inflation Final Project

This interactive visualization explores global inflation trends from 1970 to 2022 using IMF data. Users can compare countries and inflation types, with options to switch between horizontal and horizon chart views. The horizon chart, built with d3.area and custom clipping paths, displays time-series data across multiple countries in a compact, layered format. Interactive controls allow zooming, panning, and applying a square-root transformation to the y-axis, while dropdown menus filter by country and inflation metric. The SVG rendering uses d3.scalePoint for the x-axis and d3.scaleLinear for the y-axis.

Feb 19, 2024

Loading thumbnail…

ThemeRiver of the House Property Sales

A ThemeRiver visualization displays median property sale prices over time for houses with different bedroom counts (2–5) in Melbourne, Australia. The stacked silhouette chart uses a custom year adjustment function to plot seasonal quarterly data from 2007–2019. Users can reorder the stream layers via a dropdown menu, which updates the selection and re-renders the SVG. The code uses d3.stack with stackOffsetSilhouette and d3.area to draw the streams, with interactive tooltips showing price and season per data point on mouse hover, while reading data from a CSV file.

Dec 28, 2023

Loading thumbnail…

Horizon Chart

This interactive visualization displays daily average air pollutant concentrations (SO2, NO2, O3, CO, PM10, PM2.5) across multiple monitoring stations. Users select a year and the number of color bands through dropdown menus. Six horizon charts, one per pollutant, show temporal trends using d3.scaleLinear, d3.axisBottom, d3.axisLeft, and the d3.curveLinear path generator. Data comes from Iris.csv, preprocessed by averaging hourly measurements into daily values per station. The horizon chart technique stacks mirrored areas in alternating colors to increase perceptual resolution of small variations.

Nov 29, 2023

Loading thumbnail…

Fork of Correlation Matrix

This visualization shows a correlation matrix of abalone physical measurements, with cells colored by Pearson correlation coefficients. A dropdown menu filters the matrix to display correlations for male, female, or infant abalones from the `abalone.data` dataset. The matrix uses `d3.scaleBand` for axes, `d3.scaleSequential` with `interpolateRdYlBu` for color encoding, and displays correlation values as text labels. Animations transition cells between states using `transition.attr`, with axes rendered via `d3.axisLeft` and `d3.axisBottom`.

Nov 29, 2023

Loading thumbnail…

Sankey diagram

This Sankey diagram visualizes the flow of car attributes from the UCI Auto MPG dataset, showing how combinations of buying price, maintenance cost, doors, persons, luggage boot, and safety lead to overall acceptability ratings. Users can reorder the attribute sequence using a dropdown menu, which rearranges the flow columns accordingly. The implementation uses the `d3-sankey` extension library on top of D3 v6, rendering nodes as rectangles and links as horizontal paths within an SVG canvas. Node and link colors are assigned via `d3.scaleOrdinal`, and nodes are draggable through D3's drag behavior.

Nov 9, 2023

Loading thumbnail…

Fork of Stacked Bar Charts

This stacked bar chart visualizes the 2010 estimated religion breakdowns of the world’s 20 most populous countries, with each bar segmented by religious affiliation. Users can reorder the bars by overall score or any of five component metrics (teaching, research, citations, industry income, international outlook) and sort ascending or descending. Hovering over a segment reveals a tooltip with the exact value and country name via d3.event, while selecting a legend item highlights that religion. The chart uses d3.stack, d3.scaleBand, and d3.axisBottom/Left, rendering as SVG, with data from Pew Research’s Global Religious Landscape.

Oct 26, 2023

Loading thumbnail…

Iris Scatter Plots V2

This interactive visualization displays the classic Iris dataset, showing measurements of sepal and petal dimensions for three flower species. Dropdown menus allow users to select which attributes map to the X and Y axes, updating the scatter plot through D3 v5 data joins. The SVG rendering uses d3.scaleLinear for axes, d3.axisLeft, and d3.axisBottom with gridlines, while colored circles animate to new positions via transition().duration(). The plot includes a legend identifying the three Iris classes and uses a custom color function.

Oct 17, 2023

Loading thumbnail…

Brushable Scatter Plot Matrix

This interactive scatter plot matrix visualizes the Iris dataset, showing pairwise relationships between four flower measurements—sepal length, sepal width, petal length, and petal width—with points colored by species. Using d3.brush, users can drag across any off-diagonal cell to filter and highlight points across all other cells simultaneously, while diagonal cells display histograms of each variable's distribution. The visualization is built with d3.v4, rendering axes and circles as SVG elements, with scales derived from the CSV data's numeric ranges.

Oct 14, 2023

Loading thumbnail…

Iris Parallel Coordinate Plots

This interactive visualization displays the classic Iris dataset, showing measurements of sepal length, sepal width, petal length, and petal width as four connected axes. Each flower is represented by a colored polyline based on its species, with dropdown menus letting users change which attribute appears on each axis. The visualization uses d3.csv, d3.scaleLinear, d3.axisLeft, and d3.axisBottom for data loading, scaling, and axes. Path elements transition smoothly via d3 transition when axes change, with the dataset sourced from the bundled Iris.csv file.

Sep 26, 2023