Building a Network Graph for Duke Community Affairs

The names of the Network Graph nodes have been changed to protect privacy. Video of the interactivity is available by request.

What

I designed an interactive network graph to illustrate the relationships between Campus Partners (community-engaged departments at Duke University), Community Partners (typically local non-profits), and the corresponding Contacts and Initiatives (projects).

Why

Duke Faculty members were interested in understanding the connections between Duke and community partners. For example, a faculty member might want to identify a contact working with a community partner or understand the strength of connections between a specific community partner and Duke University. This network graph visually represents those relationships.

How

Initially, my team and I conducted user interviews to gather requirements, ensuring the design would meet the needs of our target audience.

I worked closely with the developer who would be implementing the project to define the structure of nodes and edges. We had to determine the source of data for Community Partners, Contacts, and Initiatives. Did we have that data available? Which data would serve as the edges between nodes? After agreeing on the data strategy, I began designing the experience.

The goal was to create a tool that would allow Duke faculty to either search for specific nodes or explore relationships between the university and the community visually. This type of tool excels at visual communication. For instance, a dense network of lines between a Campus and Community Partner indicates a strong relationship, while a Community Partner with fewer connections might signal the opportunity for additional resources or funding.

The developer implemented the graph using the D3.js JavaScript library. I provided the initial design, and he worked with D3 to build a working prototype. After testing the prototype, I refined the design to improve the interactivity and overall user experience.

Outcome

1. My team and I presented the network graph, along with other features, in multiple demonstrations. Users were consistently impressed and expressed interest in using the tool.

2. Visualizing the data highlighted the need for additional data sources to represent more connections across the university and community.

3. The network graph proved to be infinitely scalable and was well-received by the faculty who initially requested the feature, as well as by others who saw it in action.

Next
Next

Designing an assessment authoring application for online learning