Skip to content

Commit e8c3ec5

Browse files
committed
Add interactive co-attendance network visualization
- Integrate vis-network library for graph visualization - Display co-attendance graph with nodes (people) and edges (relationships) - Add interactive features: zoom, pan, hover tooltips, drag nodes - Node size represents degree, edge thickness shows co-attendance frequency - Initialize network when co-attendance tab is opened
1 parent b2f9ed8 commit e8c3ec5

File tree

4 files changed

+198
-57
lines changed

4 files changed

+198
-57
lines changed

Graph Analysis/unified_analysis.py

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -347,6 +347,7 @@ def write_html_report(
347347
attend_deg: Tuple[Dict[str, int], Counter],
348348
attend_top: List[Tuple[str, int]],
349349
attend_dist: List[Tuple[int, int]],
350+
attend_graph: nx.Graph,
350351
field_deg: Tuple[Dict[str, int], Counter],
351352
field_top: List[Tuple[str, int]],
352353
field_dist: List[Tuple[int, int]],
@@ -366,6 +367,17 @@ def write_html_report(
366367
<meta name="viewport" content="width=device-width, initial-scale=1.0">
367368
<title>Unified Graph Analysis Report</title>
368369
<link rel="stylesheet" href="style.css">
370+
<script type="text/javascript" src="https://unpkg.com/vis-network@latest/dist/vis-network.min.js"></script>
371+
<style type="text/css">
372+
#coattendance-network {
373+
width: 100%;
374+
height: 600px;
375+
border: 1px solid #e1e4e8;
376+
border-radius: 6px;
377+
background-color: #ffffff;
378+
margin: 20px 0;
379+
}
380+
</style>
369381
</head>
370382
<body>
371383
<div class="container">
@@ -401,6 +413,10 @@ def write_html_report(
401413
<h2>Degree (Co-attendance) Analysis</h2>
402414
<p class="explanation">People are connected if they attend the same meeting; a person's degree is how many unique people they co-attended with.</p>
403415
416+
<h3>Interactive Network Visualization</h3>
417+
<p class="explanation">Visual representation of the co-attendance graph. Nodes represent people, edges represent co-attendance. Use mouse to zoom and pan. Hover over nodes to see details. Click and drag nodes to reposition.</p>
418+
<div id="coattendance-network"></div>
419+
404420
<h3>Top Nodes by Degree</h3>
405421
<p class="explanation">These are the people connected to the most unique others across meetings.</p>
406422
<table>
@@ -564,6 +580,29 @@ def write_html_report(
564580
</div>
565581
</div>
566582
583+
<script type="text/javascript">
584+
// Convert co-attendance graph to vis-network format
585+
const coattendanceGraphData = {
586+
nodes: """ + json.dumps([
587+
{
588+
"id": node,
589+
"label": _truncate_label(node, 30),
590+
"value": deg,
591+
"title": f"{node} - Degree: {deg}"
592+
}
593+
for node, deg in attend_graph.degree()
594+
], ensure_ascii=False) + """,
595+
edges: """ + json.dumps([
596+
{
597+
"from": u,
598+
"to": v,
599+
"value": attend_graph[u][v].get("weight", 1),
600+
"title": f"Co-attended {attend_graph[u][v].get('weight', 1)} time(s)"
601+
}
602+
for u, v in attend_graph.edges()
603+
], ensure_ascii=False) + """
604+
};
605+
</script>
567606
<script src="script.js"></script>
568607
</body>
569608
</html>
@@ -665,6 +704,7 @@ def main() -> None:
665704
attend_deg=(attend_deg_dict, attend_deg_counts),
666705
attend_top=attend_top,
667706
attend_dist=attend_dist,
707+
attend_graph=G_attend,
668708
field_deg=(fdeg_dict, fdeg_counts),
669709
field_top=field_top,
670710
field_dist=field_dist,

0 commit comments

Comments
 (0)