Skip to main content
100%

SNA Graph

✓ Published0🌍 Public
ZZoeLeBlanc
Last edited Mar 21, 2018
Created on Mar 19, 2018

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.

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

Fork of Organization Graph Diagram

This visualization shows the organizational network of Columbia University’s DSI Department, with a central node connected to dozens of labeled department clusters, each surrounded by small leaf nodes. It uses D3’s force simulation (`d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`, `d3.forceCenter`) to layout the graph, with drag interaction enabled. Nodes are rendered as SVG circles and links as lines, with data defined in separate modules for node/link generation and a color palette. The example adapts a pre-existing graph structure to display academic department connections.

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

Network Graph

This network graph visualizes relationships among individuals and locations, with nodes labeled by names like "UNT" and connections indicating links between them. The interactive force-directed layout, built with d3.forceSimulation, incorporates link, many-body, collision, and center forces to position the nodes. The SVG renderingshowcases teal circles with direction arrows, while mouseover highlights a node using a CSS class. Data is loaded from a JSON file defining nodes and links, with colors assigned via a simple color scale.

SSravani93-creater
70% match