• 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 Angular AngularJs Arduino ASP.Net automated testing Azure Big Data C# C++ Cloud continuous integration Elm Embedded Führung gRPC Internet of Things IoT Java Javascript M2M OWASP Projektmanagement protobuf Python Raspberry Pi Reactive Programming REST Scrum Security Softwarequalität SPA Testen testing Testmanagement Teststrategie UX Visual Studio WebAPI windows WPF Xamarin Xamarin.Android Xamarin.Forms

Archive

Current Posts

  • Akzente setzen mit der Android Splash Screen API unter .NET MAUI
  • Do You have Your Personal Space?
  • Automated provisioning with ARM Templates
  • Asynchrone Beobachtungen und Versprechungen in Angular
  • Simplify Your Automated Tests With Fluent Syntax

Last Comments

  • Hans Reinsch bei Der Safety-Plan: Die wichtigsten Antworten mit Checkliste
  • George H. Barbehenn bei Modeling Optocouplers with Spice
  • Noser Blog Touch-Actions in Xamarin.Forms - Noser Blog bei Mach mehr aus Animationen in Xamarin.Forms mit SkiaSharp
  • Noser Blog Focus on the Secure Storage service of Trusted Firmware (TFM) - Noser Blog bei First run of the Trusted Firmware (TFM) application
  • Noser Blog First run of the Trusted Firmware (TFM) application - Noser Blog bei Focus on the Secure Storage service of Trusted Firmware (TFM)

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