shialian

@shialian·4 public vizzes

Adjacency Matrix

This example visualizes a network of 410 nodes and their connections as a symmetric adjacency matrix, using the infect-dublin edge dataset. The matrix cells are rendered as SVG rectangles, with rows and columns colored by node group. Users can brush along the top axis to filter the matrix; a selection triggers animated transitions that re-scale the axes and reposition the corresponding cells. Built with D3.js v4, it relies on `d3.scaleBand`, `d3.brushX`, and `transition.attr` to update the visualization.

Jul 16, 2021

Loading thumbnail…

Iris Parallel Corrdinate Plots

This example visualizes the classic Iris dataset using parallel coordinate plots, showing four flower measurements across vertical axes with polylines colored by species. Users can hover over lines to highlight all flowers of the same class while dimming others, or drag axis labels to reorder dimensions. The implementation uses d3.csv for data loading, d3.scaleLinear and d3.scalePoint for scales, d3.line for path generation, d3.axisLeft for axes, and d3.drag for interactive axis repositioning. Transitions animate the line redrawing during drag operations.

May 7, 2021

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements. Three species are distinguished by color, with data points smoothly animating to new positions when the axis selection changes. The visualization uses D3 v5's `scaleLinear`, `axisBottom`, and `axisLeft` APIs to render the plot, alongside a custom dropdown menu system. The chart transitions circle positions using `transition().duration(1000)`, with SVG rendering for all graphical elements.

Jan 27, 2021

Loading thumbnail…

Node-link Diagram and Adjacency Matrix

This example presents a network dataset as both a force-directed node-link diagram and an adjacency matrix. The left panel uses `d3.forceSimulation` to position nodes, with zoom and drag interactions; hovering highlights connected nodes. The right panel uses `d3.brushX` for range selection, updating the matrix axes and highlighting corresponding nodes. Data comes from the included edge list, rendered with SVG and animated ticks.

Nov 6, 2020