Getting Started – Digital Twin Visual

Welcome! This comprehensive guide will help you quickly get started with the Digital Twin visual for Power BI, featuring advanced navigation, interactive legend, proportional edge width, enhanced tooltips, cross-filtering, and drill-through capabilities.

📋 Comprehensive Feature Overview

🔍 Enhanced Navigation ✨

Fluid zoom and pan with smooth animations
Professional on-screen navigation controls
Real-time minimap with viewport indicator
Smart cursor feedback (grab/grabbing)
CAD-like precision for large diagrams

🎨 Interactive Legend System ✨

Dynamic legend from actual node colors
Click legend items to highlight nodes
Works with any categorical field
Cross-filtering integration
Node count display per category

📊 Proportional Edge Width ✨

Edge thickness scales with flow intensity
Per-node normalization algorithm
Instant bottleneck identification
Toggle on/off via format pane
Contextual flow visualization

💬 Enhanced Tooltips ✨

Flexible “Key: Value” node tooltips
Smart edge tooltip fallback system
Multi-field support with field names
Automatic label generation
Backward compatible design

🔄 Advanced Cross-Filtering

Bidirectional filtering with tables
Individual node/edge highlighting
Legend-based category filtering
Multi-selection support
Enhanced data model with measures

🎯 Power BI Integration

AppSource-compliant context menus
Rich drill-through capabilities
Organized format pane controls
Enhanced edge controls with subgroups
Professional selection management

📊 Enhanced Data Setup & Requirements

⚠️ Important: All data must be in a single table using a UNION structure with proper NULL handling for optimal performance.

Enhanced Data Model Structure

— Enhanced data structure with all new features ✨

SELECT 

    NodeId, 

    ‘Status: Running\nType: Machine\nTemperature: 85°C\nEfficiency: 92%’ as NodeTooltip,

    ‘Running’ as LegendColor,  — For interactive legend ✨

    NULL as EdgeId, NULL as SourceId, NULL as TargetId, NULL as EdgeTooltip,

    Efficiency as NodeValue,  — For cross-filtering

    NULL as EdgeValue

FROM NodesTable

UNION ALL

SELECT 

    NULL as NodeId, NULL as NodeTooltip, NULL as LegendColor,

    EdgeId, SourceId, TargetId,

    ‘Type: MaterialFlow\nIntensity: High\nPressure: 2.5 bar’ as EdgeTooltip,  — Smart tooltips ✨

    NULL as NodeValue,

    FlowIntensity as EdgeValue  — Cross-filtering + proportional width ✨

FROM EdgesTable

Enhanced Data Roles Reference

Field	Type	Status	Description	Example
SVG Content	Measure	✅ Required	SVG markup containing the digital twin diagram	<svg>…</svg>
NodeId	Category	✅ Required	Unique identifier for each node	M1001, B1201, T1101
Node Tooltip	Category	✨ Enhanced	“Key: Value” multi-line tooltip format	Status: Running\nType: Machine\nEfficiency: 92%
Legend Color (optional)	Category	✨ New!	Categorical field for interactive legend generation	Running, Maintenance, Offline
Node Value	Measure	🔄 Enhanced	Business metrics for cross-filtering nodes	85.4, 92.1, 79.8
EdgeId	Category	❌ Optional	Unique identifier for each edge	E1001, E1002
SourceId	Category	❌ Optional	Source node for edges	M1001
TargetId	Category	❌ Optional	Target node for edges	M1002
Edge Tooltip (optional)	Category	✨ New!	Multi-field tooltip with smart fallback system	Multiple fields supported
Edge Value	Measure	🔄 Enhanced	Flow intensity for cross-filtering + proportional width	85.0, 150.5, 89.1

⚙️ Comprehensive Configuration Guide

Step 1: Prepare Your SVG Content

Create SVG Measure: Ensure your SVG contains valid markup with unique id attributes
Match IDs: NodeId values must match SVG element id attributes exactly
Clean Structure: Use consistent sizing and avoid complex transforms
Neutral Colors: Use neutral SVG colors; let the visual control coloring
Edge-Ready Design: Design edge paths to work well with proportional width scaling

SVG Content = 

“<svg width=’800′ height=’600′>

  <rect id=’M1001′ x=’100′ y=’100′ width=’80’ height=’50’ fill=’#cccccc’/>

  <rect id=’M1002′ x=’220′ y=’100′ width=’80’ height=’50’ fill=’#cccccc’/>

  <line id=’E1001′ x1=’180′ y1=’125′ x2=’220′ y2=’125′ stroke=’#999999’/>

  <circle id=’T1101′ cx=’260′ cy=’460′ r=’30’ fill=’#aaaaaa’/>

</svg>”

Step 2: Configure Basic Visual

Add Visual: Insert the Digital Twin visual into your report
Map SVG Content: Drag your SVG measure to the “SVG Content” field
Map NodeId: Drag your node identifier to the “NodeId” field
Test Basic Functionality: Verify nodes are clickable and hover works

Step 3: Enable Enhanced Features ✨

🎨 Interactive Legend Setup

Add Legend Field: Drag categorical field to “Legend Color (optional)”
Automatic Generation: Legend reads actual node colors automatically
Test Interaction: Click legend items to highlight nodes
Verify Display: Check node count appears for each category

💬 Enhanced Tooltips Setup

Node Tooltips: Use “Key: Value\nKey2: Value2” format in Node Tooltip field
Edge Tooltips: Drag multiple fields to “Edge Tooltip (optional)”
Test Content: Hover over nodes/edges to verify rich tooltips
Verify Labels: Ensure field names appear as tooltip labels

📊 Proportional Edge Width Setup

Add Flow Data: Map throughput/intensity values to Edge Value field
Add Edge Fields: Include EdgeId, SourceId, TargetId for visualization
Enable Feature: Format pane > Edges > General > Toggle “Proportional Width”
Test Scaling: Verify edge thickness scales with data values

🔍 Advanced Navigation Setup

Enable Controls: Format pane > Navigation > Enable zoom controls
Enable Minimap: Toggle minimap for large diagram navigation
Test Navigation: Mouse wheel zoom, click-drag pan
Verify Feedback: Check cursor changes during pan operations

🔄 Advanced Cross-Filtering Setup

Add Measure Fields: Include NodeValue and EdgeValue measures
Create Tables: Add table visuals with same data for filtering
Test Table Filtering: Click table rows to highlight elements
Test Legend Filtering: Click legend items for category filtering
Test Visual Filtering: Click nodes/edges to filter other visuals

✅ Configuration Complete: You should now have a fully interactive digital twin with advanced navigation, interactive legend, proportional edge width, enhanced tooltips, and comprehensive cross-filtering capabilities.

🎯 Advanced Features Usage Guide

🔍 Enhanced Navigation & Zoom ✨

Mouse & Touch Interactions

Mouse Wheel: Scroll to zoom in/out with smooth animations
Click & Drag: Pan around with visual cursor feedback (grab/grabbing)
Navigation Controls: Use on-screen +, -, and home buttons
Reset View: Click home button to smoothly return to original view
Minimap Navigation: Click minimap to jump to different areas
Viewport Tracking: Watch real-time viewport rectangle in minimap

🎨 Interactive Legend System ✨

Legend Setup & Usage

Setup: Drag any categorical field to “Legend Color (optional)”
Color Reading: Legend automatically reads actual colors from rendered nodes
Click to Filter: Click legend items to highlight corresponding nodes
Visual Feedback: Selected categories highlighted, others dimmed
Cross-Visual: Legend clicks trigger filtering in other visuals
Reset: Click same legend item again to clear highlighting

💡 Pro Tip: Perfect for status monitoring, category filtering, and understanding what node colors represent at a glance.

📊 Proportional Edge Width ✨

Flow-Based Visualization

Data Mapping: Map flow intensity/throughput to Edge Value field
Enable Feature: Format pane > Edges > General > “Proportional Width”
Visual Scaling: Edge thickness automatically scales with data values
Contextual Scaling: Per-node normalization shows relative importance
Bottleneck ID: Instantly identify high-flow connections
Visual Range: 1px minimum to 8px maximum thickness

💡 Business Value: Use for operational dashboards to immediately spot bottlenecks and high-throughput connections in your digital twin.

💬 Enhanced Tooltip System ✨

Flexible Tooltip Configuration

Node Tooltips: Use “Key: Value\nKey2: Value2” format in Node Tooltip field
Multi-Line Support: Use \n for line breaks in tooltip content
Edge Tooltips: Drag multiple fields to “Edge Tooltip (optional)”
Smart Fallback: Automatic basic info when no custom fields specified
Field Labels: Field names automatically become tooltip labels
Rich Content: Support for operational context and business metrics

🔄 Advanced Cross-Filtering

Three-Way Filtering System

Table ↔ Visual: Click table rows to highlight nodes/edges
Legend ↔ Visual: Click legend items to highlight categories
Visual ↔ Other Visuals: Click nodes/edges to filter charts/tables
Multi-Selection: Hold Ctrl and click multiple elements
Clear Selection: Click empty space to reset all selections
Visual Feedback: Highlighted elements full opacity, others dimmed

⚡ Advanced Edge Controls

Organized Format Pane

📁 Edges Section:

🎨 Edge Colors (subgroup): Individual edge colors and gradient controls
⚙️ General (subgroup): Opacity, rendering order, and proportional width

Available Controls:

Enable Edge Gradient: Smooth color transitions between nodes
Proportional Width: Flow-based thickness scaling
Edge Opacity: Transparency control (0-100%)
Show Edges in Foreground: Layering control

🎯 Drill-Through Setup

Create Drill-Through Pages: Set up dedicated detail pages
Add Filter Fields: Include NodeId/EdgeId in drill-through filters
Test Navigation: Right-click nodes/edges to see drill-through options
Empty Space Menu: Right-click empty areas for standard Power BI menu
Verify Context: Ensure filtered context is passed correctly

🔧 Comprehensive Troubleshooting Guide

❌ Enhanced Navigation Issues ✨

Check Format pane > Navigation settings for zoom controls and minimap visibility
Verify sufficient visual space for navigation controls and minimap
Test cursor feedback during pan operations (should show grab/grabbing)
Ensure minimap viewport rectangle updates correctly during zoom/pan
Test on different screen sizes for responsive behavior

❌ Interactive Legend Problems ✨

Verify categorical field is dragged to “Legend Color (optional)”
Check that nodes have actual colors (not all default gray)
Ensure categorical data contains meaningful, clean values
Test legend click functionality for highlighting behavior
Verify legend positioning doesn’t obstruct main visual content

❌ Proportional Edge Width Issues ✨

Enable “Proportional Width” toggle in Format pane > Edges > General
Ensure Edge Value field contains numeric flow data
Check that EdgeId, SourceId, TargetId are properly mapped
Verify edge data has meaningful variation in values
Test that thickness scaling is visually appropriate

❌ Enhanced Tooltip Problems ✨

Use “Key: Value\nKey2: Value2” format for Node Tooltip field
For Edge Tooltip, drag fields to “Edge Tooltip (optional)” section
Test smart fallback when no Edge Tooltip fields specified
Check that field names appear as labels in tooltip display
Ensure multi-line content displays with proper line breaks

❌ Cross-Filtering Not Working

Add Node Value and/or Edge Value measure fields
Ensure measure values are populated (not NULL/empty)
Test both directions: table → visual and visual → table
Test legend-based filtering independently
Verify selection triggers highlights (opacity changes)
Test with simple single-selection first

❌ Visual Not Displaying

Check that SVG Content measure returns valid SVG markup
Verify NodeId field is mapped and contains data
Ensure SVG element IDs match NodeId values exactly
Validate SVG syntax using an online SVG validator

❌ Nodes Not Interactive

Confirm NodeId data role is populated
Check that SVG elements have matching id attributes
Verify elements are not hidden by other SVG elements
Test hover effects to confirm element detection

❌ Edges Not Showing

Map EdgeId, SourceId, and TargetId data roles
Ensure SourceId/TargetId values match existing NodeId values
Check edge opacity setting (may be set too low)
Verify edge rendering order (foreground vs background)
Test with high contrast edge colors first

🎉 Advanced Best Practices

Enhanced Data Modeling ✨

Choose meaningful categorical fields for interactive legend
Structure tooltips using “Key: Value” format
Use flow metrics for proportional edge width
Ensure proper NULL handling in UNION structure
Test with realistic data volumes

Performance & Navigation ✨

Leverage minimap for large diagram navigation
Optimize SVG complexity for smooth zoom/pan
Test proportional width with realistic flow data
Monitor memory usage with enhanced features
Use measure fields strategically for cross-filtering

User Experience ✨

Use legend clicks for category-based filtering
Combine table filtering with legend filtering
Design meaningful tooltip content
Standardize zoom levels and navigation patterns
Test all interaction workflows end-to-end

Advanced Integration ✨

Use proportional width for operational monitoring
Combine legend filtering with time-series analysis
Connect flow data with predictive analytics
Create comprehensive multi-modal dashboards
Integrate with geographic visuals using shared filtering

🚀 Ready to Get Started? This comprehensive visual transforms static diagrams into interactive digital twin dashboards with professional navigation, intelligent flow visualization, category-based filtering, and rich contextual information!