Data-Driven Documents (D3) gilt als Standardwerkzeug für präzise, flexible Visualisierungen im Web. das Tutorial führt in Datenbindung, Skalierungen, achsen und Übergänge ein, erklärt SVG und Canvas und skizziert muster für Interaktivität. Ziel ist eine fundierte Basis für reproduzierbare, skalierbare Charts.
Inhalte
- Grundlagen und Selektionen
- Präzise Datenbindung erklärt
- Skalen, Achsen und Layouts
- Flüssige Transitionen bauen
- Bewährte Best Practices
Grundlagen und Selektionen
Selektionen bilden das Fundament von D3: DOM-Knoten werden zu strukturieren Gruppen zusammengefasst, auf die sich deklarativ Transformationen anwenden lassen.Eine Auswahl entsteht mit select (ein erstes Element) oder selectAll (alle passenden Elemente), beide via CSS-Selektoren. Die Chain-API erlaubt es, Eigenschaften, Attribute und Inhalte zuzuweisen, ohne Kontrollflusslogik im DOM verteilen zu müssen. Daraus ergibt sich ein klarer Ablauf: Zielknoten bestimmen, Elemente gruppieren, Daten binden und anschließend Darstellungseigenschaften setzen.
- select: wählt das erste passende Element, ideal für Container oder Wurzelknoten.
- selectAll: erzeugt Gruppen für mehrere zielelemente, Grundlage für Datenlisten.
- attr/style/classed: steuern Geometrie, Erscheinungsbild und Zustände.
- text/property: aktualisieren Inhalte und DOM-Eigenschaften.
Die Datenbindung verbindet arrays mit Elementgruppen und schafft damit die Basis für präzise, datengetriebene Änderungen. Über data(array, key) werden knoten mit Datensätzen gematcht; der key stabilisiert Zuordnungen über Zeit. Der DOM-Join differenziert Zustände: enter (neue Daten, neue Knoten), update (bestehende Daten/knoten) und exit (veraltete Knoten).Moderne Pipelines nutzen join() für kompakte Muster: erstellen, aktualisieren und entfernen in einem Schritt; danach folgen gezielte Attribut- und Stilzuweisungen für konsistente, performante Visualisierungen.
| Methode | Auswahl | Zweck |
|---|---|---|
| select | ein Element | Wurzel/Container |
| selectAll | Gruppe | Listen/Serien |
| data | Bindung | Match via Key |
| join | enter/update/exit | Kompakter DOM-Join |
| append | neue Knoten | Enter-Phase |
| attr/style | Darstellung | Form & Farbe |
Präzise Datenbindung erklärt
Exakte Zuordnungen zwischen Datensätzen und DOM-Elementen entstehen durch die Kombination aus Selektion und Data Join. Jede Beobachtung erhält eine stabile Identität, idealerweise über eine Schlüssel-Funktion (key), sodass elemente über Aktualisierungen hinweg erhalten bleiben. Werte werden nicht direkt in Pixel übersetzt, sondern über Skalen und Accessor-Funktionen in Position, Form und Farbe transformiert. Diese Entkopplung sorgt dafür, dass Änderungen auf Datenebene in minimale, nachvollziehbare DOM-Operationen überführt werden, wodurch DOM-Churn reduziert und die Konsistenz von Visualisierungen gesichert wird.
Genauigkeit zeigt sich im Zusammenspiel von enter, update und exit: neue Daten erzeugen Elemente, bestehende werden gezielt aktualisiert, entfernte sauber entfernt. Eine konsistente Ordnung durch sortierte Eingaben und die Nutzung robuster Keys verhindert visuelle Sprünge. Verschachtelte Selektionen bilden gruppierte oder hierarchische Strukturen präzise ab; merge bündelt gemeinsame Attribute, während Transitions zeitlich kohärente Veränderungen sicherstellen. So entsteht eine belastbare Grundlage für akkurate, performante und wartbare Darstellungen, die Datenzustand und visuelle Ausgabe eng, aber kontrolliert koppeln.
- Schlüssel-Strategie: Stabile IDs verwenden; Index-Keys vermeiden, wenn Einfügungen/Entfernungen erwartet werden.
- Daten-Normalisierung: Einheiten und Typen vereinheitlichen; fehlende werte klar behandeln.
- Ordnungsregeln: Sortierung vor der Bindung festlegen, um deterministische Zuordnung zu sichern.
- Selektions-Muster: join/merge für gemeinsame Styles und Attribute nutzen,Redundanz vermeiden.
- Zustands-Isolation: Visualen Zustand aus Daten ableiten, nicht im DOM zwischenspeichern.
- Transitions kontrollieren: Unterbrechungen handhaben, Dauer und Easing auf Datenfrequenz abstimmen.
| Muster | Zweck | Kurzbeispiel |
|---|---|---|
| enter/update/exit | Lebenszyklus steuern | Balken kommen/gehen |
| key() | Identität sichern | id statt Index |
| Verschachtelte Joins | Gruppen abbilden | Serie → Punkte |
| Filterte Bindung | Gezielt aktualisieren | Nur sichtbare Daten |
| merge | Gemeinsame styles | fill/stroke bündeln |
Skalen, Achsen und Layouts
Skalen übersetzen Datenwerte verlässlich in visuelle Kanäle wie Pixel, Winkel oder Farben. Der zentrale Ablauf: domain (Datenbereich) wird auf range (Ausgabebereich) abgebildet, optional geglättet mit .nice() oder begrenzt durch .clamp(true). Kontinuierliche Varianten (linear, logarithmisch, zeitbasiert) bilden Messwerte ab; ordinale Varianten (band, point) strukturieren Kategorien und steuern Abstände über .padding(). Farbpaletten entstehen mit sequentiellen und divergierenden Skalen, die Interpolationen kapseln. Eine einzelne skala dient als gemeinsame Quelle für mehrere Darstellungen und Achsen, wodurch Konsistenz von Ticks, Labels und interaktionen gewahrt bleibt.
- d3.scaleLinear: metrische Werte; Additivität und Interpolation.
- d3.scaleLog: Größenordnungen; betont relative Unterschiede.
- d3.scaleTime: Datums-/Zeitwerte; automatische Tick-Intervalle.
- d3.scaleBand: Balkenlayouts;
.bandwidth(),.paddingInner()/.paddingOuter(). - d3.scaleSequential/SequentialLog: kontinuierliche Farbcodierung via
d3.interpolate*.
achsen leiten sich aus Skalen ab (d3.axisBottom,axisLeft) und werden über .ticks(), .tickFormat(), .tickSize() sowie .tickPadding() typografisch präzisiert; horizontale Hilfslinien entstehen beispielsweise mit negativer Tick-Größe über die Zeichenfläche. Für die komposition komplexer Diagramme sorgen layouts wie d3.stack (gestapelte Werte), d3.pie (Winkelverteilung), d3.treemap (flächenproportional) und d3.forceSimulation (netzwerkartige Anordnungen). Ein konsistentes Margin-Layout mit verschobenen viewBox-basierte Skalierung ermöglichen responsive Darstellungen ohne Verlust an Präzision.
| Baustein | Zweck | beispiel-API |
|---|---|---|
| Skala | Werte → Pixel/Farbe | d3.scaleLinear() |
| Achse | Ticks und Labels | d3.axisLeft() |
| Raster | Orientierungslinien | axis.tickSize(-width) |
| Layout | Formt Datenstruktur | d3.stack(), d3.pie() |
| Responsive | Skalierung im Container | svg.attr("viewBox",`0 0 w h`) |
Flüssige Transitionen bauen
Geschmeidige Bewegungen entstehen, wenn Datenzustände präzise auf visuelle Zustände abgebildet werden. Zentral sind dabei data join (Enter/Update/Exit), konsistente Key-Funktionen für stabile Zuordnung, stetige Skalen ohne sprunghafte Domain-Wechsel sowie gezielte Interpolationen von Position, Form, Farbe und Opazität. Übergänge gewinnen an Klarheit durch kalibrierte duration und delay,passende easing-Kurven (z. B. linear für Metriken, easeCubic für organische Bewegungen) und sinnvolle Staffelungen, die Aufmerksamkeit lenken, ohne zu überfrachten.
- Konsistente Schlüssel: Schlüssel stabil halten, damit Elemente räumlich „wiedererkannt” werden.
- Skalenkontinuität: Domains weich anpassen; harte resets vermeiden.
- Geometrie statt Layout: Transforms (translate/scale) bevorzugen, um Reflows zu minimieren.
- Selektive Interpolation: Nur veränderungsrelevante Attribute tweenen; unnötige Props einfrieren.
- Zeitsignatur: Dauer nach semantischer Wichtigkeit wählen; Verzögerungen für Lesbarkeit staffeln.
- Exit-Ästhetik: Entfernen sichtbar machen (Fade/Schrumpfen) statt abruptem Cut.
| Phase | Typische bewegung | Hinweis |
|---|---|---|
| Enter | Einblenden + Wachstum | Aus Nullgröße/0-Opazität, Fokus lenken |
| Update | Positions-Morph | Pfad-/Punkt-Interpolation konsistent halten |
| Exit | Verblassen + Schrumpfen | Rückzugsbewegung signalisiert Entfernung |
Orchestrierung gelingt durch zusammenhängende Transition-Gruppen, klare Sequenzen und das Vermeiden konkurrierender Animationspfade. Legends, Achsen und Rasterlinien folgen idealerweise denselben Skalenänderungen, um Kontext zu bewahren. Farbinterpolationen in wahrnehmungslinearen Räumen (z. B. LAB) erhalten Lesbarkeit; für Mengen und Zeitreihen empfiehlt sich sparsame Bewegung, während Hervorhebungen kurz und zielgerichtet bleiben. Performance profitiert von batchweisen Änderungen, begrenzten DOM-Operationen und kurzen Pfaden; Motion-Preferences (prefers-reduced-motion) ermöglichen rücksichtsvolle Reduktion, ohne informationsgehalt einzubüßen.
Bewährte Best Practices
Stabile Visualisierungen entstehen aus sauberer Datenvorbereitung und konsistenter Abbildung auf visuelle Kanäle. Rohdaten werden früh normalisiert, Typen geparst und Ausreißer dokumentiert; Transformationen (Aggregation, Binning, Zeitzonen) liegen in einer separaten Logikschicht, nicht im Zeichenschritt. Skalen definieren die Grammatik der Grafik: Domains werden explizit gesetzt, geeignete Interpolationen und Formatierer gewählt. Für das rendern sorgt eine reproduzierbare Datenbindung: mit selection.join(…) und stabilen Keys werden Elemente deterministisch erzeugt, aktualisiert und entfernt. zustandsänderungen laufen über klare Eingaben; Übergänge bleiben kurz, unterbrechbar und deterministisch.
- Daten vorbereiten: Parsen und Validieren, Einheiten konsolidieren, fehlende Werte markieren.
- Skalen bewusst wählen: linear/log/zeitlich/ordinal; Domain nice() und clamp() nach Bedarf.
- Eindeutige Keys: stabile IDs statt Index; vermeidet falsche Reuse-Effekte.
- Responsives SVG: viewBox + preserveAspectRatio; CSS max-width: 100%, height: auto.
- Barrierefreiheit: SVG-Titel und Beschreibungen (
, <desc>), ARIA-Attribute, ausreichender Kontrast, fokussierbare Interaktionen.</li> </ul> <p>Nachhaltigkeit und Leistung entstehen durch modulare Komponenten, klare Zuständigkeiten und reproduzierbare Builds (Versionen pinnen, Konfiguration dokumentieren). Performance profitiert von geringer DOM-Komplexität, gebündelten Updates sowie sinnvoller wahl des Render-Backends: SVG für Struktur und Interaktion, Canvas/WebGL für sehr große Punktmengen. Ereignisse werden gedrosselt oder entprellt, Animationen über <em>requestAnimationFrame</em> synchronisiert, teure Berechnungen ggf. in web Worker ausgelagert. Formatierung und Lokalisierung bleiben zentralisiert, Tests (visuell und numerisch) sichern Konsistenz über Änderungen hinweg.</p> <table class="wp-block-table is-style-stripes"> <thead> <tr> <th>Aspekt</th> <th>Kurz-Tipp</th> </tr> </thead> <tbody> <tr> <td>Datenbindung</td> <td><strong>selection.join</strong> mit Key; Enter/Update/Exit als mentales Modell beibehalten</td> </tr> <tr> <td>Performance</td> <td>DOM minimieren; ab ~10k Punkten auf <strong>Canvas</strong> wechseln</td> </tr> <tr> <td>Responsivität</td> <td>SVG <em>viewBox</em>; CSS <em>max-width:100%</em>, <em>height:auto</em></td> </tr> <tr> <td>Formatierung</td> <td><strong>d3-format</strong> und <strong>d3-time-format</strong>; Locale berücksichtigen</td> </tr> <tr> <td>Barrierefreiheit</td> <td>ARIA-Rollen, Fokusreihenfolge, farbenblind-freundliche Paletten</td> </tr> </tbody> </table> <h2 id="qa"></h2> <h2>Was ist D3.js und wofür eignet es sich?</h2> <p>D3.js ist eine JavaScript-Bibliothek zur Erstellung datengetriebener Visualisierungen im Web. sie bindet Daten an DOM-Elemente und ermöglicht präzise kontrolle über Darstellung, Interaktion und animation. SVG, Canvas und HTML lassen sich flexibel kombinieren.</p> <h2>Welche Grundlagen sind für den Einstieg in D3 nötig?</h2> <p>Wesentlich sind solide Kenntnisse in JavaScript, DOM-Manipulation, HTML und CSS. SVG-Grundlagen, Koordinatensysteme und Skalen erleichtern den Einstieg. Zudem helfen Verständnis für Datenformate wie CSV/JSON und asynchrone Datenladeprozesse.</p> <h2>Wie funktioniert die Datenbindung und das Enter-Update-Exit-muster?</h2> <p>Über Selections werden daten mit DOM-Elementen verknüpft (data join). Das Enter-Update-Exit-Muster erzeugt neue Elemente, aktualisiert bestehende und entfernt veraltete. Eine eindeutige key-Funktion sorgt für stabile Zuordnung bei Änderungen.</p> <h2>Welche Rolle spielen Skalen, Achsen und Layouts für präzise Visualisierungen?</h2> <p>Skalen übersetzen Datenbereiche in Pixel- oder Farbwerte und sichern konsistente Proportionen. Achsen generieren Ticks und Beschriftungen reproduzierbar. Layouts wie Stack, force oder Treemap strukturieren komplexe Datensätze ohne manuelle Geometrie.</p> <h2>Welche Best Practices verbessern Performance, Wartbarkeit und Zugänglichkeit?</h2> <p>DOM-Knoten minimieren, für große Punktmengen Canvas nutzen und teure Layouts throttlen. Stabile Keys im Join, sparsame Transitions und wiederverwendbare Skalen erhöhen Wartbarkeit. Für Barrierefreiheit: ARIA-Attribute, Kontrast, Alternativtexte. </p> </div><!-- .entry-content --> <footer class="entry-meta"> This entry was posted in <a href="https://qviz.eu/category/documents/" rel="category tag">documents</a>, <a href="https://qviz.eu/category/visualisierungen/" rel="category tag">visualisierungen</a>. Bookmark the <a href="https://qviz.eu/tutorial-einfuhrung-in-data-driven-documents-d3-fur-prazise-visualisierungen/" title="Permalink to Tutorial: Einführung in Data-Driven Documents (D3) für präzise Visualisierungen" rel="bookmark">permalink</a>. </footer><!-- .entry-meta --> </div><!-- .wrap --> </article><!-- #post-29 --> <nav role="navigation" id="nav-below" class="site-navigation post-navigation"> <h1 class="assistive-text">Post navigation</h1> <div class="nav-previous"><a href="https://qviz.eu/visualisierungstechniken-zur-unterstutzung-von-entscheidungsprozessen/" rel="prev"><span class="meta-nav">«</span> Visualisierungstechniken zur Unterstützung von Entscheidungsprozessen</a></div> <div class="nav-next"><a href="https://qviz.eu/open-source-tools-fur-kollaborative-datenprojekte-im-team/" rel="next">Open-Source-Tools für kollaborative Datenprojekte im Team <span class="meta-nav">»</span></a></div> </nav><!-- #nav-below --> <div id="comments" class="comments-area"> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">Leave a Reply <small><a rel="nofollow" id="cancel-comment-reply-link" href="/tutorial-einfuhrung-in-data-driven-documents-d3-fur-prazise-visualisierungen/#respond" style="display:none;">Cancel reply</a></small></h3><form action="https://qviz.eu/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">Your email address will not be published.</span> <span class="required-field-message">Required fields are marked <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Comment <span class="required">*</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">Name <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p> <p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p> <p class="comment-form-url"><label for="url">Website</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">Save my name, email, and website in this browser for the next time I comment.</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='29' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div><!-- #respond --> </div><!-- #comments .comments-area --> </div><!-- #content .site-content --> </div><!-- #primary .content-area --> <div id="secondary" class="widget-area" role="complementary"> <aside id="block-2" class="widget widget_block widget_search"><div class="widget-wrap"><form role="search" method="get" action="https://qviz.eu/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >Search</label><div class="wp-block-search__inside-wrapper" ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="Search" class="wp-block-search__button wp-element-button" type="submit" >Search</button></div></form></div></aside><aside id="block-3" class="widget widget_block"><div class="widget-wrap"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <h2 class="wp-block-heading">Recent Posts</h2> <ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://qviz.eu/tipps-fur-uberzeugende-prasentationen-von-analyseergebnissen/">Tipps für überzeugende Präsentationen von Analyseergebnissen</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://qviz.eu/best-practices-fur-aussagekraftige-infografiken/">Best Practices für aussagekräftige Infografiken</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://qviz.eu/praxisbeispiel-erfolgreiche-datenanalysen-aus-realen-unternehmensprojekten/">Praxisbeispiel: Erfolgreiche Datenanalysen aus realen Unternehmensprojekten</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://qviz.eu/analyse-von-social-media-daten-mit-visualisierungstools/">Analyse von Social-Media-Daten mit Visualisierungstools</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://qviz.eu/integration-von-python-und-javascript-tools-fur-visual-analytics/">Integration von Python- und JavaScript-Tools für Visual Analytics</a></li> </ul></div></div> </div></aside><aside id="block-4" class="widget widget_block"><div class="widget-wrap"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <h2 class="wp-block-heading">Recent Comments</h2> <div class="no-comments wp-block-latest-comments">No comments to show.</div></div></div> </div></aside><aside id="block-5" class="widget widget_block"><div class="widget-wrap"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <h2 class="wp-block-heading">Archives</h2> <ul class="wp-block-archives-list wp-block-archives"> <li><a href='https://qviz.eu/2025/08/'>August 2025</a></li> <li><a href='https://qviz.eu/2025/07/'>July 2025</a></li> <li><a href='https://qviz.eu/2025/06/'>June 2025</a></li> <li><a href='https://qviz.eu/2025/05/'>May 2025</a></li> <li><a href='https://qviz.eu/2025/03/'>March 2025</a></li> <li><a href='https://qviz.eu/2025/02/'>February 2025</a></li> <li><a href='https://qviz.eu/2025/01/'>January 2025</a></li> <li><a href='https://qviz.eu/2024/12/'>December 2024</a></li> </ul></div></div> </div></aside><aside id="block-6" class="widget widget_block"><div class="widget-wrap"> <div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"> <h2 class="wp-block-heading">Categories</h2> <ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-67"><a href="https://qviz.eu/category/analyse/">analyse</a> </li> <li class="cat-item cat-item-54"><a href="https://qviz.eu/category/analyseergebnissen/">analyseergebnissen</a> </li> <li class="cat-item cat-item-27"><a href="https://qviz.eu/category/analysen/">analysen</a> </li> <li class="cat-item cat-item-57"><a href="https://qviz.eu/category/analytics/">analytics</a> </li> <li class="cat-item cat-item-18"><a href="https://qviz.eu/category/aus/">aus</a> </li> <li class="cat-item cat-item-62"><a href="https://qviz.eu/category/best/">best</a> </li> <li class="cat-item cat-item-59"><a href="https://qviz.eu/category/bibliotheken/">bibliotheken</a> </li> <li class="cat-item cat-item-33"><a href="https://qviz.eu/category/browser/">browser</a> </li> <li class="cat-item cat-item-60"><a href="https://qviz.eu/category/charts/">charts</a> </li> <li class="cat-item cat-item-5"><a href="https://qviz.eu/category/dashboards/">dashboards</a> </li> <li class="cat-item cat-item-45"><a href="https://qviz.eu/category/datenanalysen/">datenanalysen</a> </li> <li class="cat-item cat-item-51"><a href="https://qviz.eu/category/datenbereinigung/">datenbereinigung</a> </li> <li class="cat-item cat-item-9"><a href="https://qviz.eu/category/datengetriebene/">datengetriebene</a> </li> <li class="cat-item cat-item-42"><a href="https://qviz.eu/category/datenprojekte/">datenprojekte</a> </li> <li class="cat-item cat-item-19"><a href="https://qviz.eu/category/der/">der</a> </li> <li class="cat-item cat-item-61"><a href="https://qviz.eu/category/diagramme/">diagramme</a> </li> <li class="cat-item cat-item-7"><a href="https://qviz.eu/category/die/">die</a> </li> <li class="cat-item cat-item-29"><a href="https://qviz.eu/category/documents/">documents</a> </li> <li class="cat-item cat-item-71"><a href="https://qviz.eu/category/dynamische/">dynamische</a> </li> <li class="cat-item cat-item-15"><a href="https://qviz.eu/category/ein/">ein</a> </li> <li class="cat-item cat-item-70"><a href="https://qviz.eu/category/entscheidungsprozessen/">entscheidungsprozessen</a> </li> <li class="cat-item cat-item-44"><a href="https://qviz.eu/category/erfolgreiche/">erfolgreiche</a> </li> <li class="cat-item cat-item-65"><a href="https://qviz.eu/category/erstellen/">erstellen</a> </li> <li class="cat-item cat-item-31"><a href="https://qviz.eu/category/ersten/">ersten</a> </li> <li class="cat-item cat-item-34"><a href="https://qviz.eu/category/fortgeschrittene/">fortgeschrittene</a> </li> <li class="cat-item cat-item-8"><a href="https://qviz.eu/category/frameworks/">frameworks</a> </li> <li class="cat-item cat-item-37"><a href="https://qviz.eu/category/heterogene/">heterogene</a> </li> <li class="cat-item cat-item-64"><a href="https://qviz.eu/category/infografiken/">infografiken</a> </li> <li class="cat-item cat-item-50"><a href="https://qviz.eu/category/insights/">insights</a> </li> <li class="cat-item cat-item-55"><a href="https://qviz.eu/category/integration/">integration</a> </li> <li class="cat-item cat-item-4"><a href="https://qviz.eu/category/interaktive/">interaktive</a> </li> <li class="cat-item cat-item-32"><a href="https://qviz.eu/category/interaktiven/">interaktiven</a> </li> <li class="cat-item cat-item-66"><a href="https://qviz.eu/category/karten/">karten</a> </li> <li class="cat-item cat-item-24"><a href="https://qviz.eu/category/klare/">klare</a> </li> <li class="cat-item cat-item-41"><a href="https://qviz.eu/category/kollaborative/">kollaborative</a> </li> <li class="cat-item cat-item-16"><a href="https://qviz.eu/category/kompletter/">kompletter</a> </li> <li class="cat-item cat-item-26"><a href="https://qviz.eu/category/komplexe/">komplexe</a> </li> <li class="cat-item cat-item-40"><a href="https://qviz.eu/category/kontext/">kontext</a> </li> <li class="cat-item cat-item-48"><a href="https://qviz.eu/category/kundenverhalten/">kundenverhalten</a> </li> <li class="cat-item cat-item-28"><a href="https://qviz.eu/category/machen/">machen</a> </li> <li class="cat-item cat-item-22"><a href="https://qviz.eu/category/mit/">mit</a> </li> <li class="cat-item cat-item-2"><a href="https://qviz.eu/category/moderne/">moderne</a> </li> <li class="cat-item cat-item-25"><a href="https://qviz.eu/category/narrative/">narrative</a> </li> <li class="cat-item cat-item-63"><a href="https://qviz.eu/category/practices/">practices</a> </li> <li class="cat-item cat-item-20"><a href="https://qviz.eu/category/praxis/">praxis</a> </li> <li class="cat-item cat-item-10"><a href="https://qviz.eu/category/projekte/">projekte</a> </li> <li class="cat-item cat-item-46"><a href="https://qviz.eu/category/realen/">realen</a> </li> <li class="cat-item cat-item-12"><a href="https://qviz.eu/category/rohdaten/">rohdaten</a> </li> <li class="cat-item cat-item-21"><a href="https://qviz.eu/category/storytelling/">storytelling</a> </li> <li class="cat-item cat-item-38"><a href="https://qviz.eu/category/strategien/">strategien</a> </li> <li class="cat-item cat-item-43"><a href="https://qviz.eu/category/team/">team</a> </li> <li class="cat-item cat-item-3"><a href="https://qviz.eu/category/techniken/">techniken</a> </li> <li class="cat-item cat-item-53"><a href="https://qviz.eu/category/tipps/">tipps</a> </li> <li class="cat-item cat-item-36"><a href="https://qviz.eu/category/und/">und</a> </li> <li class="cat-item cat-item-47"><a href="https://qviz.eu/category/unternehmensprojekten/">unternehmensprojekten</a> </li> <li class="cat-item cat-item-39"><a href="https://qviz.eu/category/verbindung/">verbindung</a> </li> <li class="cat-item cat-item-58"><a href="https://qviz.eu/category/vergleich/">vergleich</a> </li> <li class="cat-item cat-item-56"><a href="https://qviz.eu/category/visual/">visual</a> </li> <li class="cat-item cat-item-49"><a href="https://qviz.eu/category/visualisieren/">visualisieren</a> </li> <li class="cat-item cat-item-14"><a href="https://qviz.eu/category/visualisierung/">visualisierung</a> </li> <li class="cat-item cat-item-30"><a href="https://qviz.eu/category/visualisierungen/">visualisierungen</a> </li> <li class="cat-item cat-item-35"><a href="https://qviz.eu/category/visualisierungsmethoden/">visualisierungsmethoden</a> </li> <li class="cat-item cat-item-69"><a href="https://qviz.eu/category/visualisierungstechniken/">visualisierungstechniken</a> </li> <li class="cat-item cat-item-68"><a href="https://qviz.eu/category/visualisierungstools/">visualisierungstools</a> </li> <li class="cat-item cat-item-11"><a href="https://qviz.eu/category/von/">von</a> </li> <li class="cat-item cat-item-52"><a href="https://qviz.eu/category/vorbereitung/">vorbereitung</a> </li> <li class="cat-item cat-item-23"><a href="https://qviz.eu/category/wie/">wie</a> </li> <li class="cat-item cat-item-17"><a href="https://qviz.eu/category/workflow/">workflow</a> </li> <li class="cat-item cat-item-13"><a href="https://qviz.eu/category/zur/">zur</a> </li> </ul></div></div> </div></aside><aside id="block-8" class="widget widget_block"><div class="widget-wrap"><a href="https://www.qviz.eu/impressum/">Impressum</a></div></aside><aside id="block-9" class="widget widget_block"><div class="widget-wrap"><a href="https://www.qviz.eu/datenschutz/">Datenschutz</a></div></aside> </div><!-- #secondary .widget-area --> </div><!-- .container --> </div><!-- #main .site-main --> <footer id="colophon" class="site-footer" role="contentinfo"> <div class="container"> <div id="footer-widget-area" role="complementary" class="clearfix"> <div id="first" class="widget-area"> <div class="wp-block-calendar"><table id="wp-calendar" class="wp-calendar-table"> <caption>December 2025</caption> <thead> <tr> <th scope="col" aria-label="Monday">M</th> <th scope="col" aria-label="Tuesday">T</th> <th scope="col" aria-label="Wednesday">W</th> <th scope="col" aria-label="Thursday">T</th> <th scope="col" aria-label="Friday">F</th> <th scope="col" aria-label="Saturday">S</th> <th scope="col" aria-label="Sunday">S</th> </tr> </thead> <tbody> <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td> </tr> <tr> <td>8</td><td>9</td><td>10</td><td>11</td><td>12</td><td>13</td><td>14</td> </tr> <tr> <td>15</td><td>16</td><td id="today">17</td><td>18</td><td>19</td><td>20</td><td>21</td> </tr> <tr> <td>22</td><td>23</td><td>24</td><td>25</td><td>26</td><td>27</td><td>28</td> </tr> <tr> <td>29</td><td>30</td><td>31</td> <td class="pad" colspan="4"> </td> </tr> </tbody> </table><nav aria-label="Previous and next months" class="wp-calendar-nav"> <span class="wp-calendar-nav-prev"><a href="https://qviz.eu/2025/08/">« Aug</a></span> <span class="pad"> </span> <span class="wp-calendar-nav-next"> </span> </nav></div> </div> <div id="second" class="widget-area"> <ul class="wp-block-archives-list wp-block-archives"> <li><a href='https://qviz.eu/2025/08/'>August 2025</a></li> <li><a href='https://qviz.eu/2025/07/'>July 2025</a></li> <li><a href='https://qviz.eu/2025/06/'>June 2025</a></li> <li><a href='https://qviz.eu/2025/05/'>May 2025</a></li> <li><a href='https://qviz.eu/2025/03/'>March 2025</a></li> <li><a href='https://qviz.eu/2025/02/'>February 2025</a></li> <li><a href='https://qviz.eu/2025/01/'>January 2025</a></li> <li><a href='https://qviz.eu/2024/12/'>December 2024</a></li> </ul> </div> <div id="third" class="widget-area"> </div> </div><!-- #footer-widget-area --> <div class="site-info"> <a href="http://wordpress.org/" title="A Semantic Personal Publishing Platform" rel="generator">Proudly powered by WordPress</a> <span class="sep"> | </span> Theme: Color Palette by <a href="http://www.bluelimemedia.com/" rel="designer">Bluelime Media</a>. </div><!-- .site-info --> </div><!-- .container --> </footer><!-- #colophon .site-footer --> </div><!-- #page .hfeed .site --> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/color-palette/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script type="text/javascript" src="https://qviz.eu/wp-content/themes/color-palette/js/small-menu.js?ver=20120206" id="small-menu-js"></script> <script type="text/javascript" src="https://qviz.eu/wp-includes/js/comment-reply.min.js?ver=6.9" id="comment-reply-js" async="async" data-wp-strategy="async" fetchpriority="low"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://qviz.eu/wp-includes/js/wp-emoji-release.min.js?ver=6.9"}} </script> <script type="module"> /* <![CDATA[ */ /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://qviz.eu/wp-includes/js/wp-emoji-loader.min.js /* ]]> */ </script> </body> </html>