LSAWB

@LSAWB·10 public vizzes

Correlation Matrix

This visualization presents a correlation matrix for the Abalone dataset, split into three separate SVG grids for male, female, and infant samples. Each cell color encodes the correlation coefficient between two variables, using a red-to-white-to-steelblue Chroma.js scale. Hovering over a cell highlights the corresponding row and column axis labels and displays the exact correlation value in a tooltip. The implementation uses D3 v4 scales and axes, the `jz.arr.correlationMatrix` function from the jeezy library for computation, and `data2grid` for grid layout.

Dec 3, 2023

Loading thumbnail…

TEST

This visualization shows the spread of COVID-19 between countries in the early stages of the outbreak, using a Sankey diagram to trace the rate of transmission from China to other global regions. The diagram makes visible how provinces in China acted as primary carriers, with secondary travel from Europe and Australia facilitating further spread to America and Africa. Implemented with D3.js v5 and custom Sankey layout code, the visualization uses SVG rendering with draggable node rectangles and curved link paths whose thickness represents transmission value. The data is loaded from a local JSON file containing country-to-country links with numerical spread weights.

Nov 12, 2023

Loading thumbnail…

HW5: Stacked Bar Charts

This interactive stacked bar chart visualizes university rankings across five weighted performance indicators: Teaching, Research, Citations, Industry Income, and International Outlook. Users can sort universities by overall score or individual metrics in ascending or descending order via dropdown menus. The chart employs React with D3.js v6, using d3.stack() to compose the stacked bars and d3.scaleBand() for the x-axis. An SVG legend provides hover highlighting, adjusting bar opacity to emphasize selected categories while dimming others.

Oct 31, 2023

Loading thumbnail…

BarChart Testing

This bar chart visualizes the estimated 2010 religion breakdown of the 20 most populous countries, using a stacked layout where each bar represents a country and color-coded segments show religious affiliations. Hovering over a bar displays a tooltip with the religion, country, and population figure, while hovering over the legend highlights that religion’s segments across all bars by fading the rest. The visualization uses D3.js version 3 for scales, axes, and the stacking layout, with d3-tip for tooltips and d3-legend for the interactive color key. Data originates from Pew Research’s Global Religious Landscape.

Oct 17, 2023

Loading thumbnail…

HW3 : Brushable Scatter Plot Matrix

This example shows a brushable scatter plot matrix of the Iris dataset, with each cell comparing two flower traits (sepal length, sepal width, petal length, petal width) and points colored by species. A user can drag on any cell to brush a rectangular region, which highlights matching data points across all other cells. The visualization is built with React and rendered as an SVG using D3 v6, employing d3.scaleLinear for positioning, d3.scaleOrdinal for color, and custom mouse event handlers for the brushing interaction.

Oct 15, 2023

Loading thumbnail…

HW1 : Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, displaying measurements of sepal and petal length and width for three species. Users select axes from dropdown menus and confirm their choices to update the visualization, which uses colored circles to distinguish Iris-setosa, Iris-versicolor, and Iris-virginica. Built with D3 v5, the code employs d3.scaleLinear, d3.extent, d3.axisBottom, and d3.axisLeft to render axes and SVG circles, with data loaded from a local CSV file.

Oct 6, 2023

Loading thumbnail…

HW2 : Parallel Coordinate Plots

This visualization displays the classic Iris dataset using a parallel coordinate plot, with each of the four flower measurements (sepal length, sepal width, petal length, petal width) mapped to a vertical axis. Users can exchange the positions of any two axes via dropdown menus and a confirmation button, which triggers a redraw. The plot uses `d3.scaleLinear` for each dimension, `d3.scalePoint` for axis placement, and `d3.line()` to generate the colored polylines, with a legend identifying the three Iris species.

Oct 2, 2023

Loading thumbnail…

HW2 : Parallel Coordinate Plots

This example visualizes the Iris dataset using a parallel coordinate plot, where each flower’s measurements are drawn as a colored line across four vertical axes representing sepal length, sepal width, petal length, and petal width. The lines are color-coded by species using a d3.scaleOrdinal with a custom purple-to-yellow palette. Two dropdown menus and a button let users swap the order of any two axes, rebuilding the chart via d3.line and d3.scalePoint. The visualization is rendered with SVG and uses d3.axisLeft for tick marks.

Oct 2, 2023

Loading thumbnail…

Scatter Plot Test

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset, with each red circle representing a vehicle. The visualization uses D3 v5's `scaleLinear` to map data values to pixel coordinates, `axisBottom` and `axisLeft` for the axes, and SVG circles for rendering. The code loads data via `csv` from a remote URL, converts numeric fields, and includes labeled axes and a title.

Sep 21, 2023

Loading thumbnail…

Homework 1: Scatter Plots

This interactive scatter plot, built with D3.js v5, visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements by selecting different attributes for the X and Y axes via dropdown menus. The SVG-based rendering uses D3's linear scales and axes to map the data points, which are drawn as red, semi-transparent circles. The code leverages D3's selection, CSV parsing, and scale functions to handle data loading and coordinate mapping, while the HTML interface and CSS styling provide the interactive controls and visual theming.

Sep 21, 2023