Wei-Che Chang

@wcchang1019·11 public vizzes

Heatmap

This heatmap visualization reorders rows and columns of a binary matrix using the `reorder.v1.js` library. The matrix cells are rendered as SVG rectangles, with fill color intensity mapped through a D3 linear scale. Buttons trigger algorithms like optimal leaf ordering and random permutation, with a D3 transition smoothly animating the reordering over 1.5 seconds. The `table.js` script sets up the grid and labels, while the `science.v1.js` library provides supporting statistical functions.

Nov 16, 2020

Loading thumbnail…

Force Directed Graph

A force-directed graph displays a network of 410 nodes and their connections, with node colors assigned by group via `d3.schemeCategory10`. The visualization pairs the graph with an adjacency matrix rendered as SVG rectangles, where users can click either nodes or grid cells to highlight corresponding links and matrix positions. Built with `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, the graph supports drag-and-drop node repositioning and zoom/pan interactions through `d3.zoom`. The adjacency matrix uses `d3.select` to update stroke and fill opacity based on edge weights.

Nov 6, 2020

Loading thumbnail…

Untitled

This visualization combines a force-directed network graph with a collapsible adjacency matrix. The SVG renders 410 nodes and their connections from a TSV file, with nodes colored by group and links shown as lines. Users can drag nodes via d3.drag to rearrange the simulation, which uses d3.forceSimulation with link and charge forces. The matrix view, built with d3.scaleBand and scaleLinear, displays node co-occurrences, and a dropdown allows switching between name- and group-based ordering.

Nov 6, 2020

Loading thumbnail…

Force Directed Graph

This visualization pairs a force-directed graph with an interactive adjacency matrix to show node connections and hub activity. The left panel renders 410 nodes and 1,342 edges as a SVG graph, while the right panel displays the matrix, colored by connection weight. Users can click a node or matrix cell to highlight corresponding links and rows in both views. The graph uses `d3.forceSimulation` with `forceLink` and `forceManyBody` for layout, and the matrix applies `fill-opacity` based on data values. Panning and zooming are handled through D3’s zoom behavior.

Nov 6, 2020

Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes dependencies between Canadian military equipment and infrastructure programs, with nodes colored by capability group and size representing connection count. Draggable nodes and zoomable panning allow exploration of the network. The code uses `d3.forceSimulation`, `d3.forceLink`, and `d3.zoom` on SVG elements, loading edge data from a CSV file and clustering nodes by degree into categorical groups.

Nov 4, 2020

Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes the dependencies between Canadian military programs, with nodes colored by program group and links by dependency type. The d3.forceSimulation layout positions nodes and links, while a color legend allows interactive filtering by clicking to highlight specific groups. Data is loaded from a JSON file and rendered as SVG using D3 v5.

Oct 27, 2020

Loading thumbnail…

Iris Parallel Coordinate Plot

This interactive parallel coordinate plot visualizes the classic Iris dataset, showing four measured features (sepal and petal length/width) across three flower species. Each polyline represents one flower, with colors mapped to species via d3.scaleOrdinal and schemeCategory10. Users can drag the vertical axes to reorder dimensions, triggering smooth transitions with d3.transition(). The visualization uses d3.scalePoint for categorical axis positioning, d3.scaleLinear for value mapping, and axisLeft/axisBottom to render tick marks with SVG.

Oct 19, 2020

Loading thumbnail…

Untitled

This visualization displays a parallel coordinates plot of automobile data from the cars.csv file, with each line representing a car and each vertical axis a numeric attribute such as economy, horsepower, or weight. The axes can be dragged to reorder dimensions, and brushing on an axis filters the foreground lines to highlight cars matching the selected range. The implementation uses D3 v3 with d3.svg.line for paths, d3.svg.axis for scales, and d3.svg.brush for interactive filtering, rendered as animated SVG.

Oct 15, 2020

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot displays the classic Iris dataset, showing measurements of sepal length, sepal width, petal length, and petal width for three species of iris flowers. Users can change the variables plotted on the x- and y-axes via dropdown menus, with each species colored differently using `d3.scaleOrdinal` and `d3.schemeCategory10`. The visualization uses D3 v5 with SVG rendering, employing `d3.axisBottom` and `d3.axisLeft` for axes, `d3.scaleLinear` for positioning, and `d3.extent` to set the scale domains.

Oct 3, 2020

Loading thumbnail…

Iris Scatter Plot

This interactive scatter plot visualizes the Iris dataset, displaying measurements of sepal length, sepal width, petal length, and petal width across three iris species. Users can select which measurements appear on the x and y axes via dropdown menus, and the plot updates accordingly. The visualization uses d3.csv for data loading, d3.scaleLinear for axis scaling, and d3.scaleOrdinal with schemeCategory10 for species coloring. SVG circles represent individual data points, with axes rendered using d3.axisBottom and d3.axisLeft.

Sep 29, 2020

Loading thumbnail…

Interactive Color Legend

A scatter plot of the Iris dataset shows petal length against sepal width, with points colored by species. An interactive color legend on the right highlights points of a selected species while fading all others. Built with React and D3, it uses `scaleLinear` for axes, `scaleOrdinal` for colors, and SVG circles. Mouse events on the legend trigger a re-render that filters the data into separate highlighted and faded point layers.

Sep 29, 2020