test

100%

✓ Published0🌍 Public

Last edited Nov 25, 2020

Created on Nov 24, 2020

Forked from HW3

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.

AI-generated description

MIT Licensed

Similar vizzes

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.

WWei-Che Chang

85% match

Loading thumbnail…

test

This example combines a force-directed node-link diagram with an adjacency matrix visualization, allowing interactive exploration of network connectivity. Clicking a node in the diagram highlights its corresponding row and column in the matrix, while clicking a matrix cell reports the presence or absence of a link between the two nodes. The code uses d3.forceSimulation for layout, d3.zoom for panning and scaling, and SVG circles and rectangles for rendering. Data appears to be loaded from an external CSV or TSV source, and the interface supports dragging nodes and dynamically updating matrix highlights in response to selections.

TTimmyLu

83% match

Loading thumbnail…

Force Directed Graph

This visualization employs a force-directed graph to display a dataset of 410 linked nodes, loaded from a TSV file. The d3-force simulation, using `forceSimulation`, `forceLink`, and `forceManyBody`, positions the nodes with link thickness proportional to edge weight. Nodes are colored by a group value, and interactive dragging with `d3.drag` and zooming with `d3.zoom` are enabled. A separate, non-interactive adjacency matrix, built with `d3.select` and `reorder`, is shown but not linked to the graph.

Aa04775

83% match

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.

CChenLeah

82% match

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.

WWei-Che Chang

82% match

Loading thumbnail…

D3 Force Simulation

A force-directed network visualization shows 100 nodes and 300 random links in a 400-by-400 SVG canvas. The layout uses D3 v4’s `d3.forceSimulation` with `forceCenter`, `forceManyBody`, `forceLink`, and `forceCollide` to position and repel elements. Nodes render as steelblue circles, links as gray lines, and drag behavior lets users reposition nodes through `d3.drag`. The simulation updates node and link coordinates on every tick via the `ticked` function.

CCarlosACalvo

82% match

Loading thumbnail…

Force Directed Graph

A force-directed graph of 410 connected nodes is shown alongside an adjacency matrix, letting users explore network structure through either view. Clicking a node in the graph highlights its row and column in the matrix, while clicking a matrix cell highlights the corresponding link. The layout uses d3.forceSimulation with forceLink and forceManyBody, rendered as SVG circles and lines, with a zoom transform applied to both. The adjacency matrix is built from the same edge data, and hover effects use dynamically updated stroke colors and widths.

Aa04775

81% match

Loading thumbnail…

test

This example shows an adjacency matrix of 410 nodes, with cells colored by group and sized by link frequency. A dropdown menu reorders the matrix by name, group, or optimal leaf order, with animated transitions. The visualization uses d3.scaleBand, d3.scaleOrdinal, and reorder.optimal_leaf_order with Manhattan distance. Cells are rendered as SVG rects with hover tooltips, and the data comes from a TSV file loaded via d3.tsv.

Iimsohandsome123

81% match