Enhance co-attendance graph visualization

- Proportional node sizing and color coding by degree
- Edge thickness scales with co-attendance frequency
- Improved visual effects and interactivity
- Updated description with visualization details

Author: stephen-rowan

Graph Analysis/unified_analysis.py

@@ -414,7 +414,11 @@ def write_html_report(
                 <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>
                 
                 <h3>Interactive Network Visualization</h3>
-                <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>
+                <p class="explanation">
+                    Visual representation of the co-attendance graph. <strong>Nodes represent people</strong>, with size and color indicating degree (number of connections) - larger, darker nodes have more connections. <strong>Edges represent co-attendance</strong> - thicker, darker edges indicate more frequent co-attendance. 
+                    <br><br>
+                    <strong>Interactions:</strong> Use mouse wheel to zoom, click and drag to pan, drag nodes to reposition. Hover over nodes or edges to see detailed information. Click on a node to highlight its connections.
+                </p>
                 <div id="coattendance-network"></div>
                 
                 <h3>Top Nodes by Degree</h3>

docs/script.js

@@ -16,8 +16,94 @@ function initCoattendanceNetwork() {
         coattendanceNetwork.destroy();
     }
 
-    const nodes = new vis.DataSet(coattendanceGraphData.nodes);
-    const edges = new vis.DataSet(coattendanceGraphData.edges);
+    // Calculate min/max values for scaling
+    const nodeValues = coattendanceGraphData.nodes.map(n => n.value || 1);
+    const maxNodeValue = Math.max(...nodeValues);
+    const minNodeValue = Math.min(...nodeValues);
+    const nodeValueRange = maxNodeValue - minNodeValue;
+    
+    const edgeValues = coattendanceGraphData.edges.map(e => e.value || 1);
+    const maxEdgeValue = Math.max(...edgeValues);
+    const minEdgeValue = Math.min(...edgeValues);
+    const edgeValueRange = maxEdgeValue - minEdgeValue;
+    
+    // Scale nodes: size based on degree (value)
+    // Node size between 10 and 50 pixels
+    const scaledNodes = coattendanceGraphData.nodes.map(node => {
+        const degree = node.value || 1;
+        // Scale size: 10 + (degree - min) / range * 40
+        const size = nodeValueRange > 0 
+            ? 10 + ((degree - minNodeValue) / nodeValueRange) * 40
+            : 25;
+        
+        // Color based on degree: blue gradient (darker/larger = higher degree)
+        // Scale from light blue (0, 150, 255) to dark blue (0, 50, 150)
+        const intensity = nodeValueRange > 0 
+            ? (degree - minNodeValue) / nodeValueRange
+            : 0.5;
+        const r = Math.floor(0 + intensity * 0);
+        const g = Math.floor(150 - intensity * 100);
+        const b = Math.floor(255 - intensity * 105);
+        const color = `rgb(${r}, ${g}, ${b})`;
+        
+        return {
+            ...node,
+            size: size,
+            color: {
+                background: color,
+                border: '#0366d6',
+                highlight: {
+                    background: '#0366d6',
+                    border: '#002155'
+                },
+                hover: {
+                    background: '#0366d6',
+                    border: '#002155'
+                }
+            },
+            font: {
+                size: Math.max(10, Math.min(16, size * 0.6)),
+                color: '#24292e',
+                face: 'Arial',
+                bold: degree > maxNodeValue * 0.7
+            },
+            borderWidth: 2,
+            borderWidthSelected: 4
+        };
+    });
+    
+    // Scale edges: width based on co-attendance frequency (weight)
+    const scaledEdges = coattendanceGraphData.edges.map(edge => {
+        const weight = edge.value || 1;
+        // Edge width between 1 and 5 pixels
+        const width = edgeValueRange > 0
+            ? 1 + ((weight - minEdgeValue) / edgeValueRange) * 4
+            : 2;
+        
+        // Color based on weight: lighter gray for frequent, darker for rare
+        const opacity = edgeValueRange > 0
+            ? 0.3 + ((weight - minEdgeValue) / edgeValueRange) * 0.5
+            : 0.5;
+        
+        return {
+            ...edge,
+            width: width,
+            color: {
+                color: `rgba(3, 102, 214, ${opacity})`,
+                highlight: '#0366d6',
+                hover: '#0366d6'
+            },
+            smooth: {
+                type: 'continuous',
+                roundness: 0.5
+            },
+            selectionWidth: width * 2,
+            hoverWidth: width * 1.5
+        };
+    });
+    
+    const nodes = new vis.DataSet(scaledNodes);
+    const edges = new vis.DataSet(scaledEdges);
 
     const data = {
         nodes: nodes,
@@ -27,46 +113,91 @@ function initCoattendanceNetwork() {
     const options = {
         nodes: {
             shape: 'dot',
-            size: 16,
             font: {
                 size: 12,
-                color: '#24292e'
+                color: '#24292e',
+                face: 'Arial'
             },
             borderWidth: 2,
-            borderColor: '#0366d6'
+            shadow: {
+                enabled: true,
+                color: 'rgba(0,0,0,0.2)',
+                size: 5,
+                x: 2,
+                y: 2
+            }
         },
         edges: {
-            width: 2,
-            color: {
-                color: '#e1e4e8',
-                highlight: '#0366d6'
-            },
             smooth: {
-                type: 'continuous'
+                type: 'continuous',
+                roundness: 0.5
+            },
+            arrows: {
+                to: {
+                    enabled: false
+                }
+            },
+            shadow: {
+                enabled: true,
+                color: 'rgba(0,0,0,0.1)',
+                size: 3
             }
         },
         physics: {
             enabled: true,
             stabilization: {
-                iterations: 200
+                iterations: 200,
+                updateInterval: 25,
+                onlyDynamicEdges: false,
+                fit: true
             },
             barnesHut: {
                 gravitationalConstant: -2000,
                 centralGravity: 0.3,
-                springLength: 95,
+                springLength: 100,
                 springConstant: 0.04,
-                damping: 0.09
+                damping: 0.09,
+                avoidOverlap: 0.5
             }
         },
         interaction: {
             hover: true,
             tooltipDelay: 100,
             zoomView: true,
-            dragView: true
+            dragView: true,
+            dragNodes: true,
+            selectConnectedEdges: true,
+            hideEdgesOnDrag: false,
+            hideEdgesOnZoom: false
+        },
+        layout: {
+            improvedLayout: true,
+            hierarchical: {
+                enabled: false
+            }
         }
     };
 
     coattendanceNetwork = new vis.Network(container, data, options);
+    
+    // Add event listeners for better interactivity
+    coattendanceNetwork.on('click', function(params) {
+        if (params.nodes.length > 0) {
+            const nodeId = params.nodes[0];
+            const node = coattendanceGraphData.nodes.find(n => n.id === nodeId);
+            if (node) {
+                console.log('Selected node:', node);
+            }
+        }
+    });
+    
+    coattendanceNetwork.on('hoverNode', function(params) {
+        container.style.cursor = 'pointer';
+    });
+    
+    coattendanceNetwork.on('blurNode', function(params) {
+        container.style.cursor = 'default';
+    });
 }
 
 // Tab switching functionality