Skip to main content
100%

Redo Matrix

✓ Published0🌍 Public
ZZoeLeBlanc
Last edited Apr 3, 2018
Created on Apr 3, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Matrix Graph

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.

ZZoeLeBlanc
86% 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…

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
71% 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
71% 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
70% match
Loading thumbnail…

Student Network Graph

A force-directed node-link diagram displays a network of students, with each node colored by academic outcome (green for graduate, blue for enrolled, red for dropout). The visualization uses `d3.forceSimulation` with `d3.forceManyBody` and `d3.forceCenter` to compute node positions, rendered as SVG circles. Student data from a CSV file is loaded via `d3.csv`. Hovering over a node logs its information to the console.

Zzeyneb.mhamedi@gmail.com
69% match
Loading thumbnail…

Social Network Graph

A social network diagram shows ten fictional people grouped by academic department, with colored nodes and gray edges representing connections. Red links highlight relationships between members of different groups, such as Math and English. The visualization uses D3 v5’s `forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while SVG circles and text labels render each person’s name. A `scaleOrdinal` with `schemeCategory10` assigns distinct colors to each department, and a tick handler updates node and link coordinates.

OOluoch Odhiambo
68% match
Loading thumbnail…

Bipartite Community Graph

This bipartite force-directed graph visualizes connections between people and institutions, with nodes colored by community and labeled with their names. The network layout is computed using D3 v4's force simulation, applying link, charge, and centering forces. Nodes are rendered as small circles with adjacent text labels, created by wrapping circle and text elements in SVG groups, while links are drawn as gray lines. The data shows relationships among individuals and universities, with node color encoding community membership and node position determined by the simulation. Users can drag nodes to rearrange the network, and the visualization updates in real time. This example adapts Mike Bostock's classic force-directed graph of character co-occurrence in *Les Misérables* to display a bipartite network of people and institutions.

ZZoeLeBlanc
67% match