cpsu00

@cpsu00·6 public vizzes

HW5: Stacked Bar Charts

This example visualizes World University Rankings as stacked bar charts, displaying the contribution of five scoring categories (Teaching, Research, Citations, Industry Income, and International Outlook) for each university. Users can select a sorting methodology and order from dropdown menus to reorder the bars. The visualization uses React, D3 v6, and SVG, leveraging `d3.stack`, `scaleBand`, `scaleLinear`, and `axisBottom` to construct the chart. A tooltip shows exact segment values on hover, and hovering over legend items highlights the corresponding category while fading others.

Oct 23, 2023

Loading thumbnail…

Fork of HW04-Brushable Scatter Plot Matrix

This visualization is a brushable scatter plot matrix of the Iris dataset, showing pairwise relationships between sepal and petal measurements. Each off-diagonal cell displays colored scatter points by iris species, while diagonal cells show histograms of individual trait distributions. Users can brush over any cell to highlight corresponding points across all other plots. The code uses D3 v4 with SVG rendering, employing `d3.brush`, `d3.histogram`, `d3.scaleLinear`, and `d3.scaleOrdinal` to generate the interactive matrix. Data is loaded from a local CSV file.

Oct 16, 2023

Loading thumbnail…

hw3

This visualization displays a correlation matrix for the Abalone dataset, using three side-by-side heatmaps to compare different variable groupings. Hovering over a cell highlights it and displays the exact correlation value in the text area below. The implementation uses D3.js scales for color and positioning, `jz.arr.correlationMatrix` for computing correlations, and renders the matrix with SVG rectangles and circles, where the upper triangle uses colored circles to represent correlation strength.

Oct 9, 2023

Loading thumbnail…

Fork of Scatter Plot with Menus

An interactive scatter plot of the Iris dataset lets users select which flower measurements to compare on the x- and y-axes via two dropdown menus. Each point represents a sample, colored by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with a legend. The visualization uses D3 v5 to render SVG axes, circles, and labels, with transitions updating the plot whenever menu selections change.

Sep 25, 2023

Loading thumbnail…

Fork of Cars Scatter Plot

This scatter plot visualizes the Iris flower dataset, showing relationships between sepal and petal measurements. Interactive dropdown menus let the user select which measurements appear on the x- and y-axes, redrawing the plot with D3 scales and axes. The code uses d3.csv to load the data, d3.scaleLinear for positioning, and d3.axisBottom/axisLeft for grid lines and tick labels. Circles are rendered as SVG elements with fixed red opacity. The visualization originates from the UCI Machine Learning Repository’s Auto MPG dataset, though the loaded data is the Iris dataset instead.

Sep 25, 2023

Loading thumbnail…

Fork of Iris Data Scatter Plot

This scatter plot visualizes the classic Iris dataset, showing measurements of sepal and petal dimensions. Users can dynamically select which attributes to plot on the X and Y axes via dropdown menus. The visualization is built with D3 version 7, which draws an interactive SVG scatter plot. Data points are embedded directly in the JavaScript code, and the plot is redrawn from scratch whenever the user changes the selected axes.

Sep 25, 2023