An interactive network graph visualization for Looker that displays user-to-user communication patterns with message counts, tooltips, and drill-down capabilities.
- Interactive Network Graph: Visualizes user communication as a force-directed graph
- Message Count Display: Shows the number of messages between users on edges
- Tooltips: Hover over nodes and edges to see detailed information
- Drill-downs: Click on edges to access Looker's drill-down menu
- Highlighting: Click on nodes to highlight their connections
- Zoom & Pan: Interactive controls for navigating large networks
- Customizable: Multiple configuration options for styling and behavior
The visualization expects data with the following structure:
| Field Type | Field Name Examples | Description |
|---|---|---|
| Dimension | source_user, from_user, sender |
The user sending messages |
| Dimension | target_user, to_user, recipient |
The user receiving messages |
| Measure | message_count, count, total_messages |
Number of messages exchanged |
view: user_messages {
dimension: source_user {
type: string
sql: ${TABLE}.from_user_id ;;
}
dimension: target_user {
type: string
sql: ${TABLE}.to_user_id ;;
}
measure: message_count {
type: count
drill_fields: [source_user, target_user, message_count]
}
}SELECT
from_user as source_user,
to_user as target_user,
COUNT(*) as message_count
FROM messages
GROUP BY from_user, to_user- Navigate to Admin > Platform > Visualizations in Looker
- Click Add Visualization
- Upload the
manifest.lkmlfile - Upload the
user_communication_network.jsfile - Save and enable the visualization
- Create a new folder in your LookML project (e.g.,
visualizations/) - Copy
manifest.lkmlanduser_communication_network.jsto this folder - Commit and deploy your changes
- The visualization will be available in your Looker instance
- Node Color: Color of the user nodes (default: #4285F4)
- Node Size: Size of the user nodes in pixels (default: 20, range: 10-50)
- Show Node Labels: Display user names below nodes (default: true)
- Edge Color: Color of the connection lines (default: #999999)
- Edge Width: Width of the connection lines (default: 2, range: 1-10)
- Show Message Counts: Display message counts on edges (default: true)
- Scale Edge Width by Message Count: Make edges thicker for higher message counts (default: true)
- Force Strength: Controls how strongly nodes repel each other (default: -300, range: -1000 to -50)
- Link Distance: Preferred distance between connected nodes (default: 150, range: 50-500)
- Show Tooltips: Enable/disable hover tooltips (default: true)
- Create or open a Look/Explore with user communication data
- Select the User Communication Network visualization
- The graph will automatically render with your data
- Hover over nodes: View total messages sent/received and connection count
- Hover over edges: View source, target, and message count
- Click on nodes: Highlight that user's connections
- Click on edges: Open drill-down menu (if configured in LookML)
- Drag nodes: Reposition nodes manually
- Scroll: Zoom in/out
- Drag background: Pan the view
- Use zoom controls: +/- buttons for zoom, reset button to center
- Internal Communication Analysis: Visualize email or chat patterns within an organization
- Customer Support Networks: Show which support agents handle which customers
- Social Network Analysis: Display user interactions in a social platform
- Transaction Flow: Visualize money or data transfers between users
- Collaboration Patterns: Show who works with whom based on shared projects
Node Color: #FF6B6B
Edge Color: #4ECDC4
Node Size: 25
Edge Width: 3Show Node Labels: false
Show Message Counts: false
Node Size: 15
Edge Width: 1
Force Strength: -500Link Distance: 80
Force Strength: -200
Node Size: 12
Scale Edge Width by Message Count: true- Ensure your query has at least two dimensions (source and target users) and one measure (message count)
- Check that field names contain keywords like "source", "target", "from", "to", "count", or "message"
- Increase Link Distance (150-300)
- Increase Force Strength magnitude (-500 to -800)
- Reduce Node Size (10-15)
- Disable Show Node Labels
- Enable Scale Edge Width by Message Count
- Increase Edge Width (3-5)
- Change Edge Color to a darker color
- Limit your query results (e.g., top 100 connections)
- Use filters to focus on specific users or time periods
- Consider aggregating data at a higher level
- D3.js v7: Force-directed graph layout and visualization
- Looker Visualization API: Integration with Looker platform
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Optimized for networks up to 500 nodes and 2000 edges
- Uses D3's force simulation for efficient layout calculation
- Implements canvas rendering for large datasets (future enhancement)
# Install dependencies
npm install
# Build for production
npm run build
# Watch for changes (development)
npm run devlooker-user-communication-network/
├── manifest.lkml # Looker visualization manifest
├── user_communication_network.js # Main visualization code
├── package.json # NPM configuration
├── README.md # This file
└── examples/
├── sample_data.json # Sample data for testing
└── sample_lookml.lkml # Example LookML configuration
- Directional arrows for bidirectional communication
- Time-based animation showing communication evolution
- Community detection and clustering
- Export graph as image (PNG/SVG)
- Custom node icons/images
- Multiple edge types (different communication channels)
- Filtering and search functionality
- Canvas rendering for very large networks
For issues, questions, or feature requests, please refer to your Looker administrator or the visualization documentation.
MIT License - Feel free to modify and distribute as needed.
- Initial release
- Force-directed network graph
- Interactive tooltips and drill-downs
- Zoom and pan controls
- Customizable styling options
- Node highlighting on click