Matrix Graph

100%

✓ Published0🌍 Public

Last edited Apr 3, 2018

Created on Apr 2, 2018

A matrix graph shows the connections between graduate fellows and their academic departments at UVa, based on alumni data. The visualization uses a D3 adjacency matrix layout to render an SVG grid where each cell indicates a relationship between a person and their department. The data comes from a JSON file listing fellows with attributes like their UVa department, degree, and current organization, enabling viewers to see departmental clusters and patterns in career outcomes. This implementation uses D3 v4 with the d3-adjacency-matrix-layout helper library, licensed under MIT.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Redo Matrix

A matrix-style network graph maps the career trajectories of UVa Scholars' Lab graduate fellows. Each fellow is a circular node linked to their academic department; node color encodes department, and node size reflects degree. A force-directed layout positions nodes, with one central cluster of all fellows and their departments, plus a peripheral, highlighted community. The visualization reveals how cohorts of PhDs from the humanities moved into academic, postdoc, and other roles, using the alumni dataset to show departmental connections.

ZZoeLeBlanc

86% match

Loading thumbnail…

D3 in Action Chapter 6 - Example 1

This example uses D3’s adjacency matrix layout to display relationships in alumni data. Unlike arc diagrams or force-directed layouts, nodes are shown along both axes with links represented as filled grid cells where connected nodes intersect. The matrix includes helper functions that render x and y axes to label nodes. The data is drawn from alumni_data.json, which contains information about graduate fellows, their departments, and communities. The visualization is rendered using SVG and is based on a block by emeeks, with a current version available in the d3-plugins repository.

ZZoeLeBlanc

77% match

Loading thumbnail…

SNA Graph

This network graph visualizes the affiliations between people and organizations at the University of Virginia, using a force-directed layout with SVG rendering. Each node represents either an individual or an organizational unit, while edges encode membership or association relationships derived from the provided CSV data. The graph is built with D3 v4, with nodes positioned by a simulated physical force and links drawn as straight lines between connected entities. This example demonstrates how a simple tabular edge list can be transformed into an interactive network visualization to explore connections across digital humanities scholars, departments, and research centers at UVA.

ZZoeLeBlanc

76% match

Loading thumbnail…

Matrix diagram

This matrix diagram visualizes the relationships between people and organizations in a digital humanities network, with rows and columns representing nodes and cell colors encoding interaction strength—darker shades indicate more frequent connections, while light gray signifies none. The matrix is ordered by communities identified through Louvain modularity, which groups related nodes into blocks along the diagonal for easier pattern recognition. Built with D3 v4 and rendered as SVG, the visualization offers a readable alternative to node-link diagrams for dense networks, though it trades off path-following clarity and label legibility at scale. The underlying data includes computed node metrics such as degree, betweenness centrality, and community membership.

ZZoeLeBlanc

74% match

Loading thumbnail…

Bipartite Graph

This bipartite graph visualizes relationships between individuals and universities using a force-directed layout in D3 v4. Nodes are rendered as colored circles (grouped by category) with labels displayed alongside, implemented by wrapping circles and text in SVG groups. Links show connections between people and institutions, with simulation forces including charge, center, x, and y positioning. The visualization is adapted from Mike Bostock's Les Misérables co-occurrence graph, extended here to show node labels and support drag interactions. Data is loaded from a JSON file containing people and universities, with force-directed positioning and draggable nodes.

ZZoeLeBlanc

72% match

Loading thumbnail…

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

72% match

Loading thumbnail…

adjacency matrix

This adjacency matrix visualization uses a grid of colored cells to show connections between individuals in a social network, with darker orange cells indicating stronger relationships. The code loads node and edge data from CSV files, then constructs a matrix where each row and column represents a person, and cell opacity reflects edge weights. Built with D3.js v4, it renders SVG rectangles for the matrix cells, labels axes with node names, and highlights rows and columns on mouseover. The example uses D3’s selection, data binding, and event handling APIs to create an interactive overview of pairwise relationships.

663anp3ca

71% match

Loading thumbnail…

Matrix

This matrix visualization displays the adjacency relationships between 410 nodes from the infect-dublin network dataset. The code uses D3.js to render an SVG adjacency matrix where colored rectangles along the top and left edges represent node groups, and gray cells indicate connections. A brush interaction allows selecting a range of nodes, triggering a smooth transition that reorders the matrix to focus on the selected subset, with axis labels appearing when the selection is small enough.

Xx112358

70% match