Začíname - Digital Twin Visual

Vitajte! 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

Obojsmerné filtrovanie pomocou tabuliek
Zvýraznenie jednotlivých uzlov/okrajov
Legend-based category filtering
Podpora viacerých výberov
Enhanced data model with measures

🎯 Integrácia Power BI

Kontextové ponuky kompatibilné s aplikáciou AppSource
Bohaté možnosti vŕtania
Usporiadané ovládacie prvky podokna formátu
Enhanced edge controls with subgroups
Professional selection management

📊 Enhanced Data Setup & Requirements

⚠️ Dôležité: Všetky údaje musia byť v jednej tabuľke s použitím štruktúry UNION so správnym spracovaním NULL, aby sa dosiahol optimálny výkon.

Vylepšená štruktúra dátového modelu

— Enhanced data structure with all new features ✨

VYBRAŤ 

    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

Z tabuľky NodesTable

UNION ALL

VYBRAŤ 

    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 ✨

Z tabuľky EdgesTable

Enhanced Data Roles Reference

Pole	Typ	Stav	Popis	Príklad
Obsah SVG	Opatrenie	✅ Required	Značka SVG obsahujúca diagram digitálneho dvojčaťa	...
NodeId	Kategória	✅ Required	Jedinečný identifikátor pre každý uzol	M1001, B1201, T1101
Node Tooltip	Kategória	✨ Enhanced	“Key: Value” multi-line tooltip format	Status: Running\nType: Machine\nEfficiency: 92%
Legend Color (optional)	Kategória	✨ New!	Categorical field for interactive legend generation	Running, Maintenance, Offline
Node Value	Opatrenie	🔄 Enhanced	Business metrics for cross-filtering nodes	85.4, 92.1, 79.8
EdgeId	Kategória	❌ Voliteľné	Jedinečný identifikátor pre každú hranu	E1001, E1002
SourceId	Kategória	❌ Voliteľné	Zdrojový uzol pre hrany	M1001
TargetId	Kategória	❌ Voliteľné	Cieľový uzol pre hrany	M1002
Edge Tooltip (optional)	Kategória	✨ New!	Multi-field tooltip with smart fallback system	Multiple fields supported
Edge Value	Opatrenie	🔄 Enhanced	Flow intensity for cross-filtering + proportional width	85.0, 150.5, 89.1

⚙️ Comprehensive Configuration Guide

Krok 1: Pripravte obsah SVG

Vytvorenie opatrenia SVG: Uistite sa, že váš SVG obsahuje platné značky s jedinečnými id atribúty
Identifikátory zápasu: Hodnoty NodeId musia zodpovedať prvku SVG id atribúty presne
Čistá štruktúra: Používajte konzistentnú veľkosť a vyhýbajte sa zložitým transformáciám
Neutrálne farby: Používajte neutrálne farby SVG; nechajte vizuálnu kontrolu nad farebnosťou
Edge-Ready Design: Design edge paths to work well with proportional width scaling

Obsah SVG = 

"

  <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’/>

"

Step 2: Configure Basic Visual

Pridať vizuálne: Vloženie vizuálu digitálneho dvojčaťa do správy
Obsah mapy SVG: Potiahnite meradlo SVG do poľa "Obsah SVG".
Mapa NodeId: Potiahnite identifikátor uzla do poľa "NodeId".
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 interakcie: 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
Testovanie navigácie: Mouse wheel zoom, click-drag pan
Verify Feedback: Check cursor changes during pan operations

🔄 Advanced Cross-Filtering Setup

Pridať polia merania: Include NodeValue and EdgeValue measures
Vytvorenie tabuliek: 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

Koliesko myši: Scroll to zoom in/out with smooth animations
Kliknutie a pretiahnutie: Pan around with visual cursor feedback (grab/grabbing)
Navigation Controls: Používanie tlačidiel +, - a domov na obrazovke
Obnovenie zobrazenia: 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
Viacnásobný výber: Podržte kláves Ctrl a kliknite na viacero prvkov
Jasný výber: Click empty space to reset all selections
Visual Feedback: Highlighted elements full opacity, others dimmed

⚡ Pokročilé ovládanie hrán

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

🎯 Nastavenie vŕtania

Vytvorenie priebežných stránok: Nastavenie špecializovaných stránok s podrobnosťami
Pridať polia filtra: Zahrnúť NodeId/EdgeId do filtrov na prechádzanie
Testovanie navigácie: Kliknutím pravým tlačidlom myši na uzly/hrany zobrazíte možnosti priebežného vŕtania
Empty Space Menu: Right-click empty areas for standard Power BI menu
Overiť kontext: Zabezpečenie správneho odovzdania filtrovaného kontextu

🔧 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
Testovanie responzívneho správania na rôznych veľkostiach obrazovky

❌ 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

❌ Krížové filtrovanie nefunguje

Add Node Value and/or Edge Value measure fields
Zabezpečte, aby boli hodnoty merania vyplnené (nie NULL/prázdne)
Test both directions: table → visual and visual → table
Test legend-based filtering independently
Verify selection triggers highlights (opacity changes)
Najskôr otestujte jednoduchým výberom

❌ Vizuálne nezobrazenie

Kontrola, či meranie obsahu SVG vracia platné značky SVG
Overenie, či je pole NodeId namapované a obsahuje údaje
Zabezpečenie presnej zhody ID prvkov SVG s hodnotami NodeId
Overenie syntaxe SVG pomocou online validátora SVG

❌ Uzly nie sú interaktívne

Potvrdiť, že dátová rola NodeId je vyplnená
Kontrola, či majú prvky SVG zodpovedajúce atribúty id
Overenie, či prvky nie sú skryté inými prvkami SVG
Testovanie efektov hover na potvrdenie detekcie prvkov

❌ Okraje sa nezobrazujú

Mapovanie dátových rolí EdgeId, SourceId a TargetId
Zabezpečenie zhody hodnôt SourceId/TargetId s existujúcimi hodnotami NodeId
Skontrolujte nastavenie nepriehľadnosti okrajov (môže byť nastavené príliš nízko)
Overenie poradia vykresľovania okrajov (popredie vs. pozadie)
Najprv otestujte s vysoko kontrastnými farbami okrajov

🎉 Pokročilé osvedčené postupy

Enhanced Data Modeling ✨

Choose meaningful categorical fields for interactive legend
Structure tooltips using “Key: Value” format
Use flow metrics for proportional edge width
Zabezpečenie správneho spracovania NULL v štruktúre UNION
Testovanie s reálnymi objemami údajov

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

🚀 Ste pripravení začať? This comprehensive visual transforms static diagrams into interactive digital twin dashboards with professional navigation, intelligent flow visualization, category-based filtering, and rich contextual information!