Aan de slag - Visual Digital Twin

Welkom! Deze uitgebreide handleiding helpt je snel aan de slag te gaan met de Digital Twin visual voor Power BI, met geavanceerde navigatie, interactieve legenda, proportionele randbreedte, verbeterde tooltips, cross-filtering en drill-through mogelijkheden.

Uitgebreid functieoverzicht

Verbeterde navigatie ✨

Vloeiend zoomen en pannen met vloeiende animaties
Professionele navigatiebediening op het scherm
Real-time minimap met viewport-indicator
Slimme cursorfeedback (grijpen/graaien)
CAD-achtige precisie voor grote diagrammen

Interactief legenda-systeem ✨

Dynamische legenda van werkelijke knooppuntkleuren
Klik op de legenda-items om knooppunten te markeren
Werkt met elk categorisch veld
Cross-filtering integratie
Weergave van aantal knooppunten per categorie

Proportionele randbreedte ✨

De dikte van de randen schaalt met de intensiteit van de stroming
Normalisatiealgoritme per knooppunt
Directe identificatie van knelpunten
In-/uitschakelen via deelvenster Indeling
Contextuele stroomvisualisatie

Verbeterde tooltips ✨

Flexibele "Sleutel: Waarde" knooppunt tooltips
Smart edge tooltip fallback systeem
Ondersteuning voor meerdere velden met veldnamen
Automatisch labels maken
Achterwaarts compatibel ontwerp

Geavanceerde kruisfiltering

Bidirectioneel filteren met tabellen
Individuele knooppunten/randmarkering
Op legenda gebaseerde categoriefiltering
Ondersteuning voor meerdere selecties
Verbeterd gegevensmodel met maatregelen

Integratie van Power BI

AppSource-conforme contextmenu's
Uitgebreide drill-through mogelijkheden
Georganiseerde indeling deelvenster besturingselementen
Verbeterde randbediening met subgroepen
Professioneel selectiebeheer

Verbeterde gegevensinstelling en -vereisten

⚠️ Belangrijk: Alle gegevens moeten in een enkele tabel staan die een UNION-structuur gebruikt met de juiste NULL-afhandeling voor optimale prestaties.

Verbeterde gegevensmodelstructuur

- Verbeterde gegevensstructuur met alle nieuwe functies ✨

SELECT 

    NodeId, 

    Status: Loopt: Temperatuur: 85°C Rendement: 92%' als NodeTooltip,

    'Lopend' als legendaKleur, - Voor interactieve legenda ✨

    NULL als EdgeId, NULL als SourceId, NULL als TargetId, NULL als EdgeTooltip,

    Efficiëntie als NodeValue, - Voor cross-filtering

    NULL als EdgeValue

VAN Knooppuntentabel

UNIE ALLE

SELECT 

    NULL als NodeId, NULL als NodeTooltip, NULL als LegendColor,

    EdgeId, SourceId, TargetId,

    Type: MateriaalStroom: HoogDruk: 2.5 bar' als EdgeTooltip, - Slimme tooltips ✨

    NULL als NodeValue,

    FlowIntensity als EdgeValue - kruisfiltering + proportionele breedte ✨

FROM Randen tabel

Referentie Enhanced Data Roles

Veld	Type	Status	Beschrijving	Voorbeeld
SVG-inhoud	Maatregel	Vereist	SVG-opmaak met het digitale tweelingdiagram	...
NodeId	Categorie	Vereist	Unieke identificatie voor elk knooppunt	M1001, B1201, T1101
Knooppunt tooltip	Categorie	Verbeterd	"Sleutel: Waarde" meerregelige tooltip-indeling	Status: In bedrijf Type: Machine: 92%
Legendekleur (optioneel)	Categorie	Nieuw!	Categorisch veld voor interactieve legendegeneratie	Lopend, Onderhoud, Offline
Knooppuntwaarde	Maatregel	Verbeterd	Bedrijfsgegevens voor cross-filter knooppunten	85.4, 92.1, 79.8
EdgeId	Categorie	Optioneel	Unieke identificatie voor elke rand	E1001, E1002
BronId	Categorie	Optioneel	Bronknooppunt voor randen	M1001
DoelId	Categorie	Optioneel	Doelknooppunt voor randen	M1002
Randtip (optioneel)	Categorie	Nieuw!	Multi-veld tooltip met slim fallback systeem	Meerdere velden ondersteund
Randwaarde	Maatregel	Verbeterd	Stromingsintensiteit voor kruisfiltratie + proportionele breedte	85.0, 150.5, 89.1

⚙️ Uitgebreide configuratiegids

Stap 1: Bereid uw SVG-inhoud voor

SVG-maatregel maken: Zorg ervoor dat je SVG geldige opmaak bevat met unieke id attributen
Wedstrijd ID's: NodeId-waarden moeten overeenkomen met SVG-element id attributen precies
Schone structuur: Gebruik consistente afmetingen en vermijd complexe transformaties
Neutrale kleuren: Gebruik neutrale SVG-kleuren; laat de kleuren over aan het visuele aspect
Randvriendelijk ontwerp: Ontwerp randpaden die goed werken met proportionele breedteschaling

SVG-inhoud = 

"

  <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: Download Visual and Insert License

📽️ In this video, you’ll learn how to download the Digital Twin visual from AppSource and activate your license.

Download Visual: Download the Digital Twin visual from MS AppSource
Visueel toevoegen: De Digital Twin visual invoegen in je rapport
Insert License: Paste your license key into the License section under Format your visual

Step 3: Import Your Data

📽️ This video shows how to prepare your SVG layout and structure your data table.

Prepare Data: Create a single data table combining nodes and edges (see above)
Import Data: Import the SVG (e.g. as .txt) and data table (e.g. as csv.) into Power BI field

Step 4: Connect Data to the Visual

📽️ In this video, you’ll connect your data to the visual and enable navigation and interactivity with other visuals.

Apply Basic Data: Drag SVG content, node ID, and edge ID fields in the respective Visualizations pane
Add Enhanced Data: Add measures to legend and tooltip fields to enrich the visual
Implement Cross-Filtering: Include NodeValue and EdgeValue measures to ensure filtering works across visuals
Visual Navigation: Test the visual navigation features using zoom controls, mini-map or mouse-over

Step 5: Customize Your Nodes

📽️ This video covers how to apply conditional formatting to highlight node insights.

Simple Node Coloring: Select your preferred color for each node in the Nodes section under Format your visual
Or Apply Conditional-Formatting: Set up individual rules to color your nodes by clicking the formula icon

Step 6: Customize Your Edges

📽️ In this video, learn how to customize flows and connections clearly and dynamically.

(De-)select Gradient: Toggle gradient on/off for edge coloring
Customize Format: Adjust opacity, line width, or layer order
Simple Edge Coloring: Select your preferred color for each edge in the Edges section under Format your visual
Or Apply Conditional-Formatting: Set up individual rules to color your edges by clicking the formula icon

Step 7: Create Advanced Tooltip

📽️ This video explains how to display extra context via mouse-over, with either simple or advanced. tooltips

Apply Basic Tooltip: Drag fields into the Tooltip section to apply a basic tooltip
Or Create Advanced Tooltip: Create a custom tooltip page with charts, KPIs, and more
Connect to Visual: Add nodeID or edgeID to the Tooltip field

Step 8: Develop Drillthrough Option

📽️ In this video, learn how to create deep-dive analysis pages for nodes or edges.

Create Detail Page: Create a report page and design customized visuals for detailed insights
Connect to Visual: Add nodeID or edgeID to the Drillthrough field
Test Drillthrough: Right-click a node or edge → Drillthrough to view details

Step 9: Apply Advanced Conditional Formatting

📽️ In this video, you’ll learn how to apply rule-based formatting using combined measures for clearer, priority-based node and edge coloring.

Create Combined Measure: Create a combined measure as a column to reflect multiple conditions (e.g., node status and type)
Voorwaardelijke opmaak: Set up conditional formatting rules based on the new combined measure
Insert Legend: Insert the same field as a legend to improve clarity and filtering

Gebruikshandleiding geavanceerde functies

Verbeterde navigatie en zoom ✨

Muis- en aanraakinteracties

Muiswiel: Scroll om in/uit te zoomen met vloeiende animaties
Klik & Sleep: Pannen met visuele cursorfeedback (grijpen/graaien)
Navigatiebediening: De knoppen +, - en home op het scherm gebruiken
Weergave resetten: Klik op de home-knop om soepel terug te keren naar de oorspronkelijke weergave
Navigatie met minimap: Klik op de minimap om naar verschillende gebieden te springen
Viewport bijhouden: Bekijk real-time viewport rechthoek in minimap

Interactief legenda-systeem ✨

Legenda instellen en gebruiken

Setup: Sleep elk categorisch veld naar "Legendekleur (optioneel)".
Kleuren lezen: Legende leest automatisch de werkelijke kleuren van gerenderde knooppunten
Klik om te filteren: Klik op de legenda-items om de corresponderende knooppunten te markeren
Visuele feedback: Geselecteerde categorieën gemarkeerd, andere gedimd
Visueel: Klikken op de legenda activeert filtering in andere visuals
Reset: Klik nogmaals op hetzelfde legenda-item om de markering te wissen

Pro Tip: Perfect om de status te controleren, categorieën te filteren en in één oogopslag te begrijpen wat de kleuren van knooppunten voorstellen.

Proportionele randbreedte ✨

Visualisatie op basis van stroming

Gegevens in kaart brengen: Breng stroomintensiteit/doorvoer in kaart in het veld Randwaarde
Functie inschakelen: Deelvenster Opmaak > Randen > Algemeen > "Proportionele breedte".
Visueel schalen: Randdikte schaalt automatisch mee met gegevenswaarden
Contextueel schalen: Normalisatie per knooppunt toont relatief belang
Knelpunt ID: Direct verbindingen met hoge stroomsnelheid identificeren
Visueel bereik: 1px minimale tot 8px maximale dikte

Zakelijke waarde: Gebruik deze voor operationele dashboards om onmiddellijk knelpunten en verbindingen met hoge doorvoer in uw digitale twin op te sporen.

Verbeterd tooltipsysteem ✨

Flexibele tooltip-configuratie

Knooppunt-tooltips: Gebruik "Sleutel: WaardeKey2: Waarde2" formaat in Knooppunt Tooltip veld
Ondersteuning voor meerdere lijnen: Gebruik \n voor regeleinden in tooltip-inhoud
Rand tooltips: Sleep meerdere velden naar "Rand Tooltip (optioneel)".
Slimme terugval: Automatische basisinfo wanneer geen aangepaste velden zijn opgegeven
Veldlabels: Veldnamen worden automatisch tooltip-labels
Rijke inhoud: Ondersteuning voor operationele context en bedrijfsstatistieken

Geavanceerde kruisfiltering

Driewegfiltersysteem

Tabel ↔ Visueel: Klik op tabelrijen om knooppunten/lijnen te markeren
Legenda ↔ Visueel: Klik op de legende-items om categorieën te markeren
Visueel ↔ Ander beeldmateriaal: Klik op knooppunten/randen om grafieken/tabellen te filteren
Multi-selectie: Ctrl ingedrukt houden en op meerdere elementen klikken
Selectie wissen: Klik op de lege ruimte om alle selecties te resetten
Visuele feedback: Gemarkeerde elementen volledig ondoorzichtig, andere gedimd

⚡ Geavanceerde randbediening

Georganiseerd deelvenster Formaat

Randen Sectie:

Randkleuren (subgroep): Individuele randkleuren en kleurverlopen
⚙️ Algemeen (subgroep): Dekking, weergavevolgorde en proportionele breedte

Beschikbare besturingen:

Randverloop inschakelen: Vloeiende kleurovergangen tussen knooppunten
Proportionele breedte: Op stroming gebaseerde dikteschaling
Ondoorzichtigheid randen: Transparantieregeling (0-100%)
Toon randen op voorgrond: Controle over lagen

🎯 Doorboorinstelling

Doorkijkpagina's maken: Speciale detailpagina's instellen
Filtervelden toevoegen: NodeId/EdgeId opnemen in drill-through filters
Test navigatie: Klik met de rechtermuisknop op knooppunten/lijnen om doorbooropties te zien
Menu Lege Ruimte: Klik met de rechtermuisknop op lege gebieden voor standaard Power BI-menu
Context verifiëren: Zorg ervoor dat gefilterde context correct wordt doorgegeven

Uitgebreide gids voor het oplossen van problemen

Verbeterde navigatieproblemen ✨

Controleer het deelvenster Indeling > Navigatie-instellingen voor zoomregelaars en de zichtbaarheid van de minimap.
Controleer of er voldoende visuele ruimte is voor navigatieknoppen en minimap
Test cursorfeedback tijdens panbewerkingen (moet grijpen/grabbelen tonen)
Zorg ervoor dat minimap viewport rechthoek correct wordt bijgewerkt tijdens zoomen/panelen
Test op verschillende schermformaten voor responsief gedrag

Interactieve legendeproblemen ✨

Controleer of het categorale veld is gesleept naar "Kleur legenda (optioneel)".
Controleer of knooppunten echte kleuren hebben (niet allemaal standaard grijs)
Ervoor zorgen dat categorische gegevens betekenisvolle, schone waarden bevatten
Test de klikfunctionaliteit van de legenda voor markeergedrag
Controleer of de positie van de legenda de visuele hoofdinhoud niet hindert

Problemen met proportionele randbreedte ✨

Schakel de optie "Proportionele breedte" in in het deelvenster Indeling > Randen > Algemeen.
Zorg ervoor dat het veld Edge Value numerieke stroomgegevens bevat
Controleer of EdgeId, SourceId, TargetId correct zijn toegewezen
Controleer of randgegevens een zinvolle variatie in waarden hebben
Test of de dikteschaal visueel correct is

Verbeterde tooltip-problemen ✨

Gebruik "Sleutel: WaardeKey2: Waarde2" formaat voor Knooppunt Tooltip veld
Sleep voor de randtekstvelden naar het gedeelte "Randtekst (optioneel)
Test slimme fallback wanneer geen randtekstvelden zijn opgegeven
Controleer of veldnamen als labels verschijnen in tooltipweergave
Zorg ervoor dat inhoud van meerdere regels wordt weergegeven met de juiste regeleinden

Cross-Filtering werkt niet

Meetvelden Knooppuntwaarde en/of Randwaarde toevoegen
Zorg ervoor dat meetwaarden zijn ingevuld (niet NULL/leeg)
Test beide richtingen: tafel → visueel en visueel → tafel
Test onafhankelijk filteren op basis van legenda
Controleer of selectie highlights activeert (ondoorzichtigheidsveranderingen)
Test eerst met eenvoudige enkelvoudige selectie

Visueel wordt niet weergegeven

Controleer of SVG Content measure geldige SVG-opmaak retourneert
Controleer of het veld NodeId in kaart is gebracht en gegevens bevat
Ervoor zorgen dat SVG-element-ID's exact overeenkomen met NodeId-waarden
SVG-syntax valideren met een online SVG-validator

Knooppunten niet interactief

Bevestig dat de gegevensrol NodeId is ingevuld
Controleer of SVG-elementen overeenkomende id-attributen hebben
Controleer of elementen niet verborgen worden door andere SVG-elementen
Test hover-effecten om elementdetectie te bevestigen

Randen niet zichtbaar

Gegevensrollen EdgeId, SourceId en TargetId in kaart brengen
Zorg ervoor dat SourceId/TargetId-waarden overeenkomen met bestaande NodeId-waarden
Controleer de instelling voor ondoorzichtigheid van de randen (is mogelijk te laag ingesteld)
Controleer de rendervolgorde van randen (voorgrond vs achtergrond)
Test eerst met randkleuren met hoog contrast

🎉 Geavanceerde best practices

Verbeterde gegevensmodellering ✨

Kies zinvolle categorische velden voor interactieve legenda
Structuur tooltips met "Sleutel: Waarde" formaat
Gebruik flowmetriek voor proportionele randbreedte
Zorg voor de juiste NULL afhandeling in UNION structuur
Test met realistische gegevensvolumes

Prestaties en navigatie ✨

Gebruik minimap voor navigatie door grote diagrammen
SVG-complexiteit optimaliseren voor vloeiende zoom/pan
Test proportionele breedte met realistische stroomgegevens
Bewaak geheugengebruik met verbeterde functies
Gebruik maatregelvelden strategisch voor cross-filtering

Gebruikerservaring ✨

Gebruik legendakliks voor filteren op categorie
Tabel filteren combineren met legende filteren
Ontwerp zinvolle tooltip-inhoud
Standaardiseer zoomniveaus en navigatiepatronen
Alle interactieworkflows end-to-end testen

Geavanceerde integratie ✨

Gebruik proportionele breedte voor operationele bewaking
Combineer legendafiltering met tijdreeksanalyse
Verbind stroomgegevens met voorspellende analyses
Uitgebreide multimodale dashboards maken
Integreren met geografische visuals via gedeelde filtering

Klaar om te beginnen? Deze uitgebreide visual transformeert statische diagrammen in interactieve digital twin dashboards met professionele navigatie, intelligente stroomvisualisatie, filteren op categorie en rijke contextuele informatie!