• Noser.com
facebook
linkedin
twitter
youtube
  • NOSERmobile
    • Android
    • HTML 5
    • Hybrid Apps
    • iOS
    • Windows Phone
  • NOSERembedded
    • Medizintechnik
  • NOSERprojektmanagement
  • NOSERtesting
  • NOSERlifecycle
    • .NET Allgemein
    • Application Lifecylce Management
    • Apps
    • Architektur
    • ASP.NET
    • Azure
    • Cleancode
    • Cloud
    • Silverlight
    • Visual Studio / Team Foundation Server
    • Windows 8
    • Windows Presentation Foundation
  • NOSERinnovation
    • Big Data
    • Cloud
    • IoT
    • Operations Research
    • Augmented Reality
    • RFID, NFC, Bluetooth LE

D3.js: Chord-Diagramm Teil 2 – Benutzerdefinierte Sortierung und Kurvenformen

09. Dezember 2020
Severin Zahler
0
D3.js, Data Visualization, Javascript
Fertiges Diagramm (animiert)

1. Einleitung

Im ersten Teil ging es darum, aus einem Satz von Daten ein D3-Chord-Diagramm zu erstellen. In diesem zweiten Teil soll dieses Diagramm nun optimiert werden: Zuerst soll eine bessere Chord-Sortierung das Diagramm weniger chaotisch aussehen lassen, indem Überkreuzungen von Chords so weit wie möglich reduziert werden. Die Chords werden danach weiter verbessert, indem ihre Formen so verändert werden, dass sich benachbarte Chords nicht mehr überlappen. Durch den Einsatz von Gradienten bei der Färbung der Chords soll deren bidirektionale Natur verdeutlicht werden. Schliesslich soll das Diagramm interaktiv werden. Genauer sollen Tooltips angezeigt werden, wenn die Maus über die verschiedenen Teile des Diagramms bewegt wird. Bereiche sollen angeklickt werden können, um alle Chords, die nicht in Verbindung mit diesem Bereich stehen, auszublenden.

READ MORE

D3.js: Chord-Diagramm Teil 1 – Von den Daten zum Diagramm

30. Juni 2020
Severin Zahler
1
D3.js, Data Visualization, Javascript

1. Einleitung

Beispiele von d3.js DiagrammenD3.js (Data-Driven Documents) ist ein Framework für die Visualisierung von Daten im Web-Bereich. Anders als viele andere Frameworks liefert D3.js praktisch keine fixfertigen Diagramme, die nur sehr wenige Zeilen Code benötigen. Stattdessen erlaubt es D3.js, die Visualisierungen auf mannigfaltige Art zu konfigurieren, oder aus vorgegebenen Bausteinen komplett neue Diagramme zu entwerfen. Die gebotene Flexibilität hat allerdings den Preis einer erhöhten Komplexität. In diesem Beitrag möchte ich exemplarisch aufzeigen, wie mithilfe von D3.js ein sogenanntes Chord-Diagramm erstellt, und danach schrittweise optimiert werden kann. READ MORE

Tag Cloud

.NET android AngularJs app Arduino ASP.Net automated testing Azure C# C++ Cloud continuous integration Elm Embedded gRPC HTML5 Internet of Things IoT Java Javascript linux M2M Matlab OWASP Projektmanagement protobuf Raspberry Pi Reactive Programming REST Scrum Security Softwarequalität SPA Testen testing Testmanagement Teststrategie Visual Studio WebAPI windows windows phone 8 WPF Xamarin Xamarin.Android Xamarin.Forms

Archive

Current Posts

  • Das Büro im Kopf – Arbeiten im VR Home Office
  • Step into the world of Bots with Telegram
  • D3.js: Chord-Diagramm Teil 2 – Benutzerdefinierte Sortierung und Kurvenformen
  • Azure Übersicht Teil 3: Cosmos DB
  • Ubuntu Core oder Azure Sphere? – Plattformen für das IoT

Last Comments

  • Noser Blog D3.js: Chord-Diagramm Teil 2 - Benutzerdefinierte Sortierung und Kurvenformen - Noser Blog bei D3.js: Chord-Diagramm Teil 1 – Von den Daten zum Diagramm
  • Noser Blog Azure Übersicht Teil 2: SQL Datenspeicher - Noser Blog bei Azure Übersicht Teil 3: Cosmos DB
  • Noser Blog Azure Übersicht Teil 3: Cosmos DB - Noser Blog bei Azure Übersicht Teil 2: SQL Datenspeicher
  • carmine bei Solid Prinzip
  • Helmut Max Kleiner bei In 6 Schritten zur sicheren Software

Popular Posts

Xamarin.Android Code Obfuscation

6 Comments

ManuScripts: Wenn jemand eine Reise tut... Funktionale Programmierung mit Elm - Teil 1 - Aufbruch

5 Comments

ManuScripts: Wenn jemand eine Reise tut... Funktionale Programmierung mit Elm - Teil 2 - Kein Picknick

4 Comments

Contact us

  1. Name *
    * Please enter your name
  2. Email *
    * Please enter a valid email address
  3. Message *
    * Please enter message
© 2013 NOSER ENGINEERING AG. All rights reserved. Datenschutz | Cookie-Richtlinie