ChenLeah

@ChenLeah·7 public vizzes

test

Interactive force-directed network visualizes 410 nodes connected by 189 links derived from a TSV dataset, with node groups assigned by link-count thresholds. Users can drag nodes and reorder the adjacency matrix by name, group, or leaf-order optimization using the `reorder` library. The SVG rendering combines `d3.forceSimulation` for layout with color-coded nodes from `d3.schemeCategory10`, while the adjustable ordering reveals clustering patterns through matrix reconfiguration.

Nov 25, 2020

Loading thumbnail…

test

This force-directed graph shows the connections between 410 automobile records from the UCI Auto MPG dataset, with nodes colored by their group assignment. The visualization combines a reorderable adjacency matrix with a draggable network view, allowing users to sort nodes by name, group, or computed leaf order. The matrix uses `d3.scaleBand` and `opacityScale`, while the interactive network relies on `d3.forceSimulation` with link and charge forces. Node grouping is derived from link counts, and the leaf-order calculation uses the reorder.js library with Manhattan distance.

Nov 25, 2020

Loading thumbnail…

Force Directed Graph

This example presents a force-directed graph of a network, where nodes are positioned by a physics simulation and linked by weighted edges. The visualization couples the graph with an adjacency matrix, allowing users to click a node to highlight its corresponding row and column, or click a matrix cell to highlight the related links. The implementation uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` forces, while the matrix is rendered as SVG rects. Node dragging and zooming are also supported.

Nov 23, 2020

Loading thumbnail…

Iris Scatter Plot

This scatter plot visualizes the Iris dataset, showing sepal and petal measurements for three iris species. Users can select which measurement appears on the x- and y-axes via dropdown menus, with each species color-coded. The visualization uses d3.scaleLinear for axes, d3.scaleOrdinal for colors, and d3.axisBottom/axisLeft for gridlines. Data loads from a CSV file using d3.csv, and circles are rendered as SVG elements.

Nov 5, 2020

Loading thumbnail…

Iris Parallel Coordinate Plot

A parallel coordinate plot of the classic Iris dataset displays four flower measurements (sepal length, sepal width, petal length, and petal width) as polylines, colored by species via `scaleOrdinal`. Users can drag any axis to reorder dimensions, with `d3.drag` updating the axis positions and line paths with animated transitions. Built with `d3.scalePoint`, `d3.scaleLinear`, and `d3.line` in an SVG rendered by React, the example reads data from `iris.csv` and includes a static legend for the three species.

Nov 5, 2020

Loading thumbnail…

Polished Scatter Plot with Menus

A scatter plot of the Iris dataset displays sepal width against petal length, with points colored by species via a d3.scaleOrdinal mapping. Dropdown menus let users switch which quantitative attribute is plotted on each axis. Built with React and D3 v5, the visualization uses d3.csv for data loading, d3.scaleLinear for axes, and SVG circles with tooltips for each flower sample.

Oct 2, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for cars from the UCI Auto MPG data set, with each red semi-transparent circle representing a single vehicle. The visualization uses d3.csv to load the data, d3.scaleLinear for both axes, and d3.axisBottom and d3.axisLeft to render the tick marks and labels. The SVG output includes axis labels and a title, with circles positioned via the x and y scales and styled through CSS opacity.

Oct 1, 2020