anna960073@gmail.com

@slovengel·6 public vizzes

HW5

A stacked bar chart visualizes university performance across five scored dimensions from the Times World University Rankings 2024 dataset. The visualization displays each institution as a horizontal bar, segmented by teaching, research, citations, industry income, and international outlook scores. Users can sort universities by any dimension in ascending or descending order using the provided dropdown menus. The implementation uses D3 v7 with the `d3.stack()` function to generate stacked series, `d3.scaleBand` for the categorical y-axis, and `d3.scaleLinear` for the numeric x-axis. Interactive tooltips show dimension values on hover, while a custom grid and axis formatting enhance readability.

Oct 8, 2024

Loading thumbnail…

HW2-2

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing measurements of sepal length, sepal width, petal length, and petal width for three iris species. Users can drag any axis horizontally to reorder the dimensions, with overlapping axes automatically repositioning to maintain even spacing. Hovering over a line highlights all lines of the same species while dimming others. The visualization uses d3.csv for data loading, d3.scaleLinear and d3.scalePoint for positioning, d3.axisLeft for axes, and d3.drag to enable axis reordering. Lines are rendered as SVG paths colored by species using d3.scaleOrdinal.

Sep 19, 2024

Loading thumbnail…

HW2

This interactive parallel coordinate plot visualizes the Iris dataset, showing four flower measurements across vertical axes colored by species. Hovering a line highlights all lines of that species while dimming others, using D3 v4’s scaleOrdinal for colors and path generation via d3.line. Users can drag axis labels to reorder dimensions, with d3.drag updating axis positions and adjusting the x-scale point mapping. The SVG renders 149 data rows from iris.csv, excluding one duplicate, with axes built using d3.axisLeft.

Sep 19, 2024

Loading thumbnail…

HW2-2

This interactive parallel coordinate plot visualizes the iris dataset from `iris.csv`, with each line representing a flower specimen and colored by its species. Users can reorder axes by dragging them, and hovering over any line highlights its entire species group while dimming others. The visualization is built with D3 v4, using SVG paths for the polylines, `d3.scaleLinear` for axis scaling, and the `d3.drag` module for interactive axis reordering. The view includes static axes for sepal length, sepal width, petal length, and petal width.

Sep 19, 2024

Loading thumbnail…

HW2-2

This interactive parallel coordinate plot visualizes the Iris dataset, displaying four measurements—sepal length, sepal width, petal length, and petal width—as connected polylines for 149 samples, colored by species (red, green, blue). Users can drag any axis horizontally to reorder dimensions, which updates the line paths accordingly. Built with D3 v4, it uses `d3.scaleOrdinal` for color mapping, `d3.scalePoint` for axis positioning, `d3.axisLeft` for rendering ticks, and `d3.drag` for interactive reordering, with hover highlighting that dims non-selected lines via `transition()` styling.

Sep 19, 2024

Loading thumbnail…

HW1

This interactive scatter plot visualizes the Iris flower dataset, encoding the three species—setosa, versicolor, and virginica—as distinct colors. Users can dynamically select any two of the four flower measurements for the x- and y-axes using radio buttons, and the chart recalculates its linear scales and redraws the points with updated axis labels. Built with D3.js v4, the visualization uses `d3.csv` to load the data, `d3.scaleLinear` for axis mapping, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The SVG rendering includes light grey grid lines and a custom legend near the top.

Sep 14, 2024