LockingChiao

@LockingChiao·3 public vizzes

node-link diagrams vs. adjacency matrix

This example juxtaposes a node-link diagram with an adjacency matrix to compare two common approaches for visualizing the same network dataset of infection spread in Dublin. The left panel uses `d3.forceSimulation` with `forceLink` and `forceManyBody` to position 410 nodes and their edges, while the right panel renders a 410×410 matrix where each cell indicates a connection. Clicking a node or matrix cell highlights the corresponding row and column, and the code applies `d3.zoom` and drag handlers for interaction. The data comes from a CSV file of edges, and both views use SVG rendering with `d3.schemeCategory10` for node coloring.

Nov 8, 2020

Loading thumbnail…

Iris Parallel Coordinate Plots

This interactive parallel coordinate plot visualizes the Fisher Iris dataset, with each polyline representing a flower and its path colored by species (orange for setosa, blue for versicolor, green for virginica). Axes correspond to the four measured features—sepal length, sepal width, petal length, and petal width—scaled linearly from 0 to 9. Users can drag dimension labels to reorder axes, which triggers animated transitions of the foreground lines and background reference paths. The visualization is built with D3 v3, using `d3.scale.ordinal` for axis positioning, `d3.scale.linear` for value mapping, and SVG paths for rendering, with a custom legend and title added via the DOM.

Oct 20, 2020

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing relationships between sepal and petal measurements for three flower classes. Users can dynamically select which measurement appears on each axis via dropdown menus, with points colored by species (setosa, versicolor, virginica). Built with D3 v5, the visualization uses d3.csv for data loading, scaleLinear for axis scaling, and axisBottom/axisLeft for rendering gridlines. The render function rebuilds the SVG scene on each axis change, updating scales and redrawing circles accordingly.

Oct 19, 2020