n90098@gmail.com

@zihzi·5 public vizzes

Untitled

This example shows a stacked area chart of house and unit sales over time, with the MA (moving average) values across seven property types. The chart uses a silhouette offset, centering the data around zero. A list on the side enables the user to reorder the stacking sequence, and the chart redraws accordingly. It is built with D3.js, using `d3.stack`, `d3.area`, `d3.scaleTime`, and `d3.scaleOrdinal`. The data comes from a CSV file loaded via `d3.csv`, and hover interactions highlight individual areas with a tooltip.

Nov 4, 2023

Loading thumbnail…

Fork of HW4 Brushable Scatterplot Matrix

This interactive scatterplot matrix visualizes the Iris dataset, displaying pairwise relationships between sepal and petal measurements across all combinations. Each off-diagonal cell shows a scatterplot of points colored by species, while diagonal cells display histograms of individual variables. Users can brush selections within any scatterplot cell to highlight corresponding points across all other cells simultaneously, with brushed points remaining visible while others fade to gray. The visualization uses D3 v7 with SVG rendering, employing `d3.brush()` for interactive selection, `d3.scaleLinear()` for axes, and `d3.bin()` to generate histograms.

Oct 14, 2023

Loading thumbnail…

Correlation Matrix

This visualization shows the relationships between four measurements from the Iris dataset using a parallel coordinates plot, where each flower is represented as a polyline crossing four vertical axes. The plot uses D3 v7’s `scaleLinear` for each dimension and `scalePoint` for axis positioning, with the axes labeled sepal length, sepal width, petal length, and petal width. Data is loaded from a CSV file and parsed into numeric values before being rendered as an SVG with semi-transparent circles at each data point.

Oct 7, 2023

Loading thumbnail…

Parallel Plot

This parallel plot visualizes the Iris dataset, showing sepal and petal measurements for three species of iris flowers. Each row in the dataset is drawn as a polyline that crosses four vertical axes, with color encoding the species: green for setosa, red for versicolor, and blue for virginica. The chart is built with D3 v7, using scaleLinear for each axis, scalePoint for the categorical horizontal positions, and the line generator to create paths. Users can drag and reorder the attribute labels below the chart, which updates the axis positions through dynamic re-rendering of the SVG.

Oct 7, 2023

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing the relationship between sepal and petal measurements across three flower species. Users select which measurements to plot on the x and y axes via dropdown menus, with matching options disabled to prevent duplicate axes. The visualization uses D3 v7 with SVG rendering, employing `scaleLinear`, `axisBottom`, `axisLeft`, and `scaleOrdinal` for color-coding species. Each selection change removes the existing graph and calls a `render` function to rebuild the plot with new scales and axes.

Sep 27, 2023