yihsuan

@yihsuan29·6 public vizzes

Final project

This interactive visualization explores global happiness data from 2015–2023, allowing users to switch between a choropleth map, leaderboard, line chart, and correlation matrix. The map colors countries by selected factors using d3.scaleSequential with interpolateYlGnBu, while the line chart compares individual country trends against the global average. The visualization uses d3-geo projections, d3-scale-chromatic, and SVG rendering, with support for zooming, tooltips, and animated year sliders.

Jan 4, 2024

Loading thumbnail…

Fork of HTML Starter

This visualization shows how a selected country’s happiness and its contributing factors (economy, family, health, freedom, trust, generosity) change from 2015 to 2023, either as raw scores or as differences from the global yearly average. The user can switch between these two modes via a flag. The chart renders multiple colored lines, one per feature, using d3.line and d3.scaleOrdinal with d3.schemeSet2, and includes axes from d3.axisBottom and d3.axisLeft. Data comes from the CSV file, which is loaded with d3.csv.

Jan 3, 2024

Loading thumbnail…

Fork of 2015 Internet Users World Map

This world map visualizes internet users per 100 people for each country in 2015, using a green color scale with darker shades indicating higher usage. The map is rendered using `d3.geoPath` and `d3.geoNaturalEarth1`, with graticule lines and an outlined border. Users can hover over a country to see its name and percentage via a tooltip, and zoom by using the `d3.zoom` API. The data comes from a CSV file, and the color legend is built with `d3.scaleOrdinal`.

Dec 18, 2023

Loading thumbnail…

Fork of Fork of Choropleth Map with Interactive Filtering

This choropleth map colors world countries by their economy group, using a spectral color scale. Users can click any color legend swatch to isolate that economy category, while all other countries fade to low opacity. Hovering a country highlights it in red. The map renders with `d3.geoPath`, updated via a D3 zoom interaction, while `d3.scaleOrdinal` and `d3.schemeSpectral` drive the categorical colors. Data comes from the `world-atlas` package, joined with TSV income-group values.

Dec 18, 2023

Loading thumbnail…

109705001_hw3

Three side-by-side correlation matrix heatmaps visualize the Abalone dataset, split by sex (M, F, I), with each cell colored by Pearson correlation strength using a diverging scale. Hovering a cell outlines it in red and displays the compared variables and correlation value in a text panel below. The visualization uses D3 v5 with SVG rendering, the `jz.arr.correlationMatrix` utility from the jeezy library for computations, and a custom color legend derived from a linear scale.

Sep 29, 2023

Loading thumbnail…

hw1

This interactive scatterplot visualizes the Iris dataset, displaying flower measurements selected via radio buttons for both the X and Y axes. Users can switch between sepal length, sepal width, petal length, and petal width to explore relationships among the 150 samples. The code uses D3.js scaleLinear and extent functions to map data coordinates, with axes rendered using axisLeft and axisBottom. Radio button events trigger re-rendering of the SVG visualization, updating the circle positions accordingly.

Sep 18, 2023