Mittwoch , Mai 20 2020

Eine Anleitung zu den besten Javascript-Visualisierungsbibliotheken l Sisense

Blog

Die Entwicklung von Analyse-Apps ist eine neue Richtung für Produktteams. In der Toolbox sprechen wir über Best Practices, Tipps, Tricks und Erfolgsgeschichten für die Entwicklung, um Ihnen dabei zu helfen, die Zukunft der Analytik zu gestalten und Ihren Benutzern die erforderlichen Erkenntnisse und Aktionen zu liefern.

JavaScript-Tools zur Datenvisualisierung sind heute aufgrund des enormen Datenwachstums gefragter denn je. Marketing-, Finanz- und Verkaufsteams verlassen sich alle auf Visualisierungen, um ihre Daten besser verstehen zu können. Mit Javascript-Visualisierungsbibliotheken können Produktteams und andere Hersteller benutzerdefinierte Grafiken erstellen, die ihre Partner unterstützen, und sogar neue Einnahmequellen in Form von kundenorientierten Analyse-Apps erstellen.

Unabhängig von ihrer Spezialität oder ihren Zielen möchten Benutzer ihre Daten visuell angezeigt werden, damit sie Einblicke in ihre Daten leicht sehen und schnell darauf reagieren können. Datenvisualisierungen von Key Performance Indicators (KPI) können bei Änderungen sogar automatisch an Benutzer gesendet werden, sodass diese schnellere und intelligentere Entscheidungen treffen können.

 Sisense für Produktteams

Grundlegendes zu JavaScript-Datenvisualisierungsbibliotheken

JavaScript-Datenvisualisierung Bibliotheken erstellen nicht nur schöne Grafiken, sondern tragen auch dazu bei, dass Business Intelligence (BI) für Endbenutzer realer wird. Die Entwickler, die diese Visualisierungen erstellen, müssen sich von ihren Kollegen leiten lassen, die sie tatsächlich verwenden. Sie müssen außerdem Zugriff auf flexible BI-Plattformen (wie Sisense) haben, die Visualisierungen aus einer Vielzahl von Javascript-Visualisierungsbibliotheken verarbeiten können. Auf diese Weise können sie benutzerdefinierte Grafiken eingeben, die den Benutzern zeigen, was sie auf eine für sie sinnvolle Weise sehen müssen . Diese Grafiken können Folgendes umfassen:

  • Anpassbare Diagramme – Sunburst, Sankey, Abhängigkeit und andere
  • Flexible API mit klarer Dokumentation und Beispielcode
  • Lebendige Diagrammanimationsfunktionen
  • Benutzerinteraktivität mit Diagrammelementen
  • Kompatibel mit React-, Angular-, Vue- und andere Bibliotheken
  • Diagramm- / Datenexport in verschiedene Formate: PDF, JPG, PNG
  • Kompatibilität mit mehreren Datentypen: XML, JSON, CSV

Von den rund 50 konkurrierenden JavaScript-Visualisierungsbibliotheken Wir werden 5 Bibliotheken untersuchen, die eine Vielzahl von Funktionen bieten, um herauszufinden, welche für Ihre Anwendung am besten geeignet ist.

Diese Entscheidung kann durch einen einzelnen Faktor wie die Kompatibilität mit einer vorhandenen bestimmt werden Angular-App oder eine Leistungsanforderung des Endbenutzers, z. B. eine minimale Renderzeit für Diagramme. Wir werden die Feinheiten der verschiedenen JavaScript-Bibliotheken anhand von Beispieldiagrammen und Codefragmenten untersuchen.

Atemberaubende Diagrammvielfalt mit D3.js

Dieses Sankey-Diagramm zeigt die Beziehung zwischen Angebot und Nachfrage von Energiequellen (Quelle).

Die Datenvisualisierungsbibliothek von D3.js unterstützt eine beeindruckende Reihe von Diagrammoptionen. Durch die Kombination von Benutzerinteraktivität mit Diagrammanimation gehört diese Bibliothek zu unseren Top 5. Der beste Ort, um die Funktionen von Visualisierungsbibliotheken zu vergleichen, ist das Betrachten von Beispieldiagrammen und des Codes, der ihre Elemente generiert. Lassen Sie uns also mit einem beliebten Beispieldiagramm aus dem GIT-Repo dieser Bibliothek direkt in D3.js springen.

Dieses Beispieldiagramm zeigt interaktiv die Hierarchie der Beziehungen zwischen den Klassen einer Anwendung. In diesem Screenshot der interaktiven Animation werden die Funktionen der Klassen durch Bewegen der Maus über „Daten“ beleuchtet. In diesem Szenario werden die importierten Klassenfunktionen als rote Kurven hervorgehoben, während Klassen, die ihre Funktionen importieren, als blaue Kurven angezeigt werden:

source

Bei der Überprüfung der besten Visualisierungsbibliotheken ist es wichtig, dass viele andere berücksichtigt werden Bibliotheken werden tatsächlich mit D3.js erstellt. Zum Beispiel basieren Nivo, Plotly.js und Recharts alle auf der Open-Source-Bibliothek D3.js.

Die D3.js-API ist flexibel und verfügt über das beliebte Dashboard d3.js, das auch in den besten weit verbreitet ist Analyseanwendungen – Apps, die die beste Qualität der Diagrammleistung erfordern. Dieses Code-Snippet enthält die Funktion, die die Hierarchie im obigen Diagramm (Quelle) abbildet:


















 Funktionshierarchie (Daten, Trennzeichen = ".") {
  lass wurzeln;
  const map = neue Karte;
  data.forEach (Funktionssuche (Daten) {
    const {name} = data;
    if (map.has (name)) gibt map.get (name) zurück;
    const i = name.lastIndexOf (Trennzeichen);
    map.set (Name, Daten);
    if (i> = 0) {
      find ({name: name.substring (0, i), children: []}). children.push (data);
      data.name = name.substring (i + 1);
    } else {
      root = data;
    }}
    Daten zurückgeben;
  });
  return root;
} 

Eine beeindruckende Auswahl von D3.js-Diagrammtypen sowie interaktive Beispiele und Codefragmente finden Sie im GIT-Repo von D3.js.

Google Charts – alle Grundlagen

Mit einer umfassenden Diagrammgalerie und Google Charts, eine umfassende Dokumentation der API, erfüllt die Erwartungen, die man haben könnte, wenn man „auf den Schultern eines Riesen steht“. Die Diagrammgalerie enthält Beispiele für 29 Diagrammtypen mit Beispielcode für Entwickler, die mit dem Diagrammieren mit JavaScript beginnen. Da wir auf Seite 1 mit einem D3.js Sankey-Diagramm begonnen haben, vergleichen wir dies mit Googles Sankey:

Quelle

Die Version von Google Charts verfügt über eine leuchtende Maus-Interaktivität mit Popup-Kommentaren und eine Vielzahl von Funktionen, um das Diagramm zu erstellen zum Leben erwecken und den Benutzer auf kritische Daten konzentrieren. Hier ist der Beispielcode zum Definieren der Farben in der Tabelle (Quelle):














var colours = 
['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
                  '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'] 











;
    var options = {
      Höhe: 400,
      Sankey: {
        Knoten: {
          Farben: Farben
        },
        Verknüpfung: {
          colorMode: 'Farbverlauf',
          Farben: Farben
        }}
      }}
    };

Die Dokumentation zu Google Charts ist übersichtlich und übersichtlich. Es ist ebenfalls kostenlos zu verwenden, aber nicht Open Source. Daten müssen zum Plotten an die Google Charts-API weitergeleitet werden. Dies hat zur Folge, dass Nutzer möglicherweise nicht mit der Haftung für den Versand vertraulicher Kundendaten aus der Umgebung zufrieden sind, wenn die Google-Quelle nicht intern gehostet werden kann.

 sisense-blog-Embedded-Trends-20191218-bl-blog-banner "class =" wp-image-85013 lazyload "data-srcset =" https://cdn.sisense.com/wp-content/uploads/ sisense-blog-Embedded-Trends-20191218-bl-blog-banner.jpg 770w, https://cdn.sisense.com/wp-content/uploads/sisense-blog-Embedded-Trends-20191218-bl-blog-banner -370x120.jpg 370w, https://cdn.sisense.com/wp-content/uploads/sisense-blog-Embedded-Trends-20191218-bl-blog-banner-768x249.jpg 768w, https: //cdn.sisense .com / wp-content / uploads / sisense-blog-Embedded-Trends-20191218-bl-blog-banner-178x58.jpg 178w, https://cdn.sisense.com/wp-content/uploads/sisense-blog- Embedded-Trends-20191218-bl-blog-banner-616x200.jpg 616w, https://cdn.sisense.com/wp-content/uploads/sisense-blog-Embedded-Trends-20191218-bl-blog-banner-356x116 .jpg 356w "Größen =" (maximale Breite: 770px) 100vw, 770px "/> </figure>
<h2> Highcharts: Starke Community- und API-Referenz </h2>
<p> Highcharts ist eine robuste Diagrammbibliothek und bietet sowohl kostenlose als auch <a title=kostenpflichtige Versionen. Der Quellcode kann in-ho installiert werden Verwenden Sie oder in einem Cloud-PaaS, was für Analyse-Apps mit strengen Datensicherheitsbeschränkungen von Vorteil ist. Eine beträchtliche Anzahl großer Unternehmen verwendet Highcharts, und daher ist die Community der beitragenden Benutzer groß. Neben der Eröffnungsliste der Standardfunktionen gehören zu den Höhepunkten von Highcharts:

  • Hervorragende API-Referenz und Community-Schaufenster.
  • Kompatibel mit Angular, React und .NET plus mehr.
  • Diagramme werden in alle Webbildformate exportiert

Schauen wir uns ein interaktives Highcharts-Beispiel an. Das Abhängigkeitsrad ist eine Variation des Sankey-Diagrammkonzepts und gleichzeitig ein Flussdiagramm. Die Knoten werden jedoch dem Rand eines Kreises zugeordnet, wobei die Verknüpfungen die Knoten verbinden. Wie beim Sankey sind die Breite der Verbindungen und die Größe der Knoten proportional zur Durchflussmenge. Im Gegensatz zum Sankey ist der Abhängigkeitsradfluss jedoch multidirektional und einschichtig. Im folgenden Beispiel wird die Exportabhängigkeit eines Landes von anderen Ländern beim Mouseover-Ereignis hervorgehoben:

Quelle

amCharts: Hervorragend für Touchscreens geeignet

Ein Unterscheidungsmerkmal der amCharts JS-Visualisierungsbibliothek ist die spezielle Touchscreen-Interaktivität für Diagramme, die auf Mobilgeräten angezeigt werden. Dies wird Endpunktbenutzer wie Vertriebsingenieure ansprechen, die die Produktleistung vor Ort schnell überwachen möchten. Zoomdiagramme, die mehr Daten auf tieferen Ebenen veranschaulichen, können jetzt problemlos auf Tablets und Telefonen untersucht werden.

amCharts ist mit allen wichtigen Frontend-Entwicklungsframeworks wie Angular und React kompatibel. Das amCharts Sankey-Diagramm kann für Animationen konfiguriert werden. Hier ist ein Beispiel mit einem charakteristischen Farbschema, das zeigt, wie die relative Größe von Knoten und Links die quantitative Proportionalität in diesem Diagramm der Verteilung der technischen Einnahmen veranschaulicht.

Quelle: https://www.amcharts.com/demos/animated-sankey -diagram /

Obwohl das Hauptprodukt von amCharts eine kostenpflichtige Version ist, kann die Bibliothek kostenlos verwendet werden, sofern alle generierten Diagramme das amCharts-Logo enthalten. Dies funktioniert also nicht für Unternehmen, die eine Whitelabel-Analyse-App anbieten. Es gibt eine Vielzahl von Demos aller unterstützten Diagrammtypen mit vollständiger Dokumentation und Codebeispielen, die sich gut für die Anpassung von Diagrammen eignen.

Recharts: Für React erstellt

Obwohl Recharts tatsächlich aus D3.js erstellt wurde Komponenten ist es für unsere Diskussion aus zwei Gründen wichtig. Erstens ist Recharts speziell für die Verwendung mit React vorgesehen, da im Wesentlichen die gesamte D3.js-Bibliothek in React-Klassen eingeschlossen ist. Zweitens ist Recharts sehr beliebt und bietet eine Reihe von Downloads nicht weit hinter Highcharts. Jetzt, da wir im Zeitalter allgegenwärtiger Web-Apps mit weißen Labels arbeiten, werden viele React-Entwickler Recharts verwenden, ohne zu wissen, dass sie tatsächlich den D3.js-Kern verwenden.

Eine andere Sache, die bei den Recharts zu beachten ist, ist die folgende Die Verwendung hat zwei wesentliche Nachteile. Zum einen gibt es erhebliche offene Probleme im GIT-Repo, und Fehler scheinen schneller aufzutreten, als sie behoben sind. Darüber hinaus können Recharts nur in React-Projekten verwendet werden. Die große Anzahl von Downloads spricht auch indirekt für das äußerst beliebte React JavaScript-Framework. Diese paradoxe Beschränkung auf React-Projekte bezieht sich ebenfalls auf unseren ursprünglichen Punkt, dass die Wahl der Visualisierungsbibliothek ausschließlich durch das bereits vorhandene Entwicklungsframework der Anwendung bestimmt werden kann.

Auswahl der richtigen JavaScript-Visualisierungsbibliothek für Sie

Nachdem Sie fünf der beliebtesten JavaScript-Datenvisualisierungsbibliotheken untersucht haben, können Sie feststellen, dass es erhebliche Unterschiede gibt. Kann Ihre Infrastruktur die Bibliothek lokal hosten? Wird die Bibliothekslizenz bezahlt oder ist kostenlos und hängt dies von der beabsichtigten Verwendung ab? Hier ist eine Liste grundlegender Kriterien, die bei der Entscheidung zu berücksichtigen sind:

  • Erforderliche Diagrammtyp: Gantt, Sankey, Abhängigkeitsrad.
  • Unterstützungsgrad für die Anpassung der Bibliothek.
  • Größe und Eigenschaften des Datensatzes
  • Browserunterstützung für eine Bibliothek Ihrer Wahl: Chrome, Firefox.
  • Das für die App verwendete JavaScript-Framework: Angular, React usw.
  • Vorgesehenes Gerät: Desktop, Mobile oder beides.

Und dennoch gibt es noch ein sehr wichtiges Kriterium für die Auswahl der richtigen Visualisierungs-App: Passen Sie die Bibliothek für die Verwendung mit einer Analyse-App an? Beispielsweise kann Sisense Analytics mithilfe unseres JavaScript-Add-On-Frameworks erweitert werden, um in jede Javascript-Visualisierungsbibliothek integriert zu werden.

Detaillierte Dokumentationsbeispiele und Codeausschnitte sind für die schnelle und einfache Verwendung der Bibliothek von entscheidender Bedeutung. Sie finden sie sowohl auf dem offiziellen Sisense-Marktplatz als auch in von der Community geführten Add-Ons. Sisense implementiert eine Fülle von Fachwissen auf dem Gebiet der Datenvisualisierung, um eine Menge umsetzbarer Erkenntnisse über Live-Streaming-Daten zu generieren.

 Sisense für Produktteams

Eitan Sofer ist ein erfahrener Sisenser, der den letzten ausgegeben hat 13 Jahre Aufbau und Gestaltung unseres zentralen Analyseprodukts mit Schwerpunkt auf User Experience und Plattform-Engineering. Heute betreibt er die Embedded Analytics-Produktlinie, die Tausende von Kunden und Unternehmen mit Erkenntnissen versorgt. Eitan ist auch ein begeisterter Musikfan und Surfer.

About BusinessIntelligence

Check Also

Looker-Analyseplattform, die App-Entwicklungsfunktionen hinzufügt

Looker konzentriert sich weiterhin auf die Anwendungsentwicklung, da seine Analyseplattform sechs Monate nach der letzten …

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.