Assignment 8 adjacency matrix representation

Assignment 8 node-link diagram (force-directed)

This interactive adjacency matrix visualizes connections within a food-related network dataset. Hovering over a cell highlights its entire row and column, revealing the source and target node names in a tooltip. Built with D3.js v7, it uses an SVG rendering approach with `d3.csv` to load data files and matrix mapping from `food_edges.csv` to display the graph structure. The visualization animates tooltip opacity transitions on mouse events, providing an intuitive way to explore the bipartite relationships between food entities.

89% match

Assignment 8 adjacency matrix

This adjacency matrix visualizes relationships in a Bitcoin network, showing connections between nodes as colored cells in a square grid. Built with D3 v7, the visualization renders an SVG matrix where blue cells indicate edges between source and target node IDs, with node labels along both axes. Interactive features include hover highlighting that emphasizes the corresponding row and column labels while displaying a tooltip with the specific source and target pair. The implementation loads edge data from a CSV file and uses D3's data binding and selection methods to construct and style the matrix cells.

83% match

Rronnieferrufino4908@gmail.com

A8 - Adjacency Matrix

This adjacency matrix visualizes a network of 100 nodes using a grid where blue cells indicate connections between source and target nodes. Built with D3.js v7, the code loads edge data from a CSV file and uses a Map with Set collections to store connection pairs. Each cell is rendered as an SVG rectangle, with fill color determined by whether a connection exists between the corresponding row and column nodes. Row and column labels are added as rotated text elements, with nodes sorted by ID for consistent layout.

82% match

A8 - Adjacency Matrix

This adjacency matrix visualizes directed relationships between 34 nodes, using D3.js to render SVG rectangles that represent connections from the dataset’s source-target pairs. Green cells mark edges, while black diagonal cells highlight symmetry, and a mouseover interaction highlights the corresponding row and column by thickening strokes and turning the hovered cell yellow. The code loads data from a CSV file, builds the matrix with fixed cell dimensions, and includes legend headers and labels for student IDs. The visualization effectively reveals network structure through a traditional matrix layout.

RRavneet Singh Bhatia

80% match

Assignment 7 -- Force-Directed Graph & Adjacency Matrix

This example presents a food-related dataset as both an interactive force-directed graph and an adjacency matrix. The force-directed layout uses `d3.forceSimulation` to position nodes and links, with drag behavior and animated tick updates. The adjacency matrix encodes edge weights through square opacity levels, rendered as SVG rectangles, with tooltips showing source and target IDs. Both visualizations are built with D3 v6, using SVG and animation, drawing from a CSV file.

Vvishusikka

Assignment 8 adjacency matrix

This visualization shows an adjacency matrix of the top 200 nodes from a Bitcoin transaction network, with blue cells indicating directed edges between source and target nodes. The matrix is rendered as an SVG grid using D3 v7, where each row and column represents a node, allowing users to identify connection patterns and hubs. Hovering over any cell highlights the corresponding row and column labels and displays a tooltip with the source and target IDs. The code uses `d3.csv` to load the node and edge data, then constructs and displays the matrix with `d3.select` and SVG `<rect>` elements.

Nnathanjmuljadi@gmail.com

A8 Adjacency Matrix D3

This example renders a 20-node adjacency matrix as an SVG heatmap, using D3 v7 to visualize connections from the Facebook Pages-food network dataset. Rows and columns represent sorted nodes, with steelblue cells indicating an edge between the corresponding source and target nodes. The code uses `d3.csv`, `d3.csvParseRows`, and `d3.cross` to populate a binary matrix from node and edge CSV files, then draws each cell as a `rect` with a mouseover tooltip that displays row and column labels along with the edge value.

Assignment 8 node-link diagram (force-directed)

A circular node-link diagram arranged by a hierarchy, with edges bundled using D3's `d3.lineRadial` and `d3.curveBundle` to show connections between food-related entities. The chart, rendered as an SVG, draws food nodes from `food_nodes.csv` and edges from `food_edges.csv`, coloring links orange on hover to highlight a selected node's relationships. A slider adjusts the tension of the bundled curve, interactively reshaping the edge paths. The data, attributed to “Xhy51”, likely represents a network of food brands and chefs.