Eine Diagrammbibliothek für Datenwissenschaftler, die auf D3 und stack.gl aufbaut

Einführung

Plotly ist ein Computerunternehmen mit Hauptsitz in Montreal, Quebec, das Online-Datenanalyse- und Visualisierungstools entwickelt. Es bietet Online-Tools zur grafischen Darstellung, Analyse und Statistik für Einzelpersonen sowie Bibliotheken für die Zusammenarbeit und wissenschaftliche grafische Darstellung für Python, R , MATLAB, Perl, Julia, Arduino und REST. Plotly-Tools können auch zum Gestalten interaktiver Diagramme mit dem Jupyter-Notebook verwendet werden.

Plotly ist auch der Produktname. Plotly.js ist eine Diagrammbibliothek, die auf D3 und stack.gl aufbaut , die modulare WebGL-Komponenten sind. Es handelt sich um eine deklarative Diagrammbibliothek auf hohem Niveau, die mit über 40 Diagrammtypen ausgeliefert wird, darunter 3D-, Statistik-, Wissenschafts-, Finanz- und SVG-Karten. Neben der JavaScript-Bibliothek unterstützt Plotly auch plotly.py und plotly.R . Plotly-Diagramme werden von der KI-/Data-Science-Community weithin übernommen, wie zum Beispiel MLflow , Point-E-Demo auf Hugging Face .

Werfen wir einen Blick darauf, wie Plotly funktioniert.

Richten Sie Plotly.js in „React App erstellen“ ein

Wir verwenden Create React App als Basis, um plotly.js zu erkunden. Der folgende Befehl erstellt ein React-Projekt:

% yarn create react-app react-plotly
% cd react-plotly

% yarn add plotly.js react-plotly.js

"dependencies": {
  "plotly.js": "^2.17.0",
  "react-plotly.js": "^2.6.0"
}

Das Balkendiagramm

Ein Balkendiagramm stellt kategoriale Daten mit rechteckigen Balken dar, deren Höhe oder Länge proportional zu den Werten ist, die sie darstellen. Die Balken können vertikal oder horizontal dargestellt werden. Ein vertikales Balkendiagramm wird manchmal auch als Säulendiagramm bezeichnet.

In Plotly wird eine Reihe als Daten bezeichnet, die aus einem Array von Spuren besteht. Jedes Trace-Objekt besteht aus type, x, yund anderen Informationen.

• xlegt die xKoordinaten fest, die ein Array der sequentiellen Abfolge von Werten sind. Der Standardwert ist eine Sequenz, die bei 0 beginnt, mit einem Inkrement von 1.
• ylegt die yKoordinaten fest, bei denen es sich um ein Array von Werten an jedem Punkt von handelt y.
• Der Balkendiagrammtyp ist 'bar'.

• In den Zeilen 3–7 wird ein Layoutobjekt mit title, widthund erstellt height.
• In den Zeilen 9–18 wird ein Datenarray erstellt, das aus zwei Trace-Objekten besteht. 'bar'Beide Traces werden zusammen mit Werten als Typ definiert y.
• In Zeile 21 wird das Balkendiagramm erstellt.

Mit diesem Code können wir einen der Balken in die horizontale Ausrichtung ändern:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
  },
];

Die gemischten Ausrichtungen dienen nur zur Demonstration. In realen Anwendungsfällen haben wahrscheinlich alle Balken die gleiche Ausrichtung.

Stellen Sie beide Balken mit dem folgenden Code auf die horizontale Ausrichtung ein:

const dataArray = [
  {
    type: 'bar',
    y: [1, 2, 1, 4, 3, 6],
    orientation: 'h',
  },
  {
    type: 'bar',
    y: [2, 7, 0, 4, 6, 2],
    orientation: 'h',
  },
];

Das Streudiagramm

Ein Liniendiagramm verbindet eine Reihe von Datenpunkten mithilfe einer Linie, und ein Streudiagramm zeigt eine Sammlung von Punkten an. In Plotly haben sowohl Linien- als auch Streudiagramme den Typ 'scatter'. modeZur Bestimmung des Zeichenmodus wird Folgendes verwendet :

• 'lines': Es wird ein Liniendiagramm gezeichnet.
• 'markers': Es wird ein Streudiagramm gezeichnet.
• 'text': Es wird ein Text angezeigt.
• 'none': Es wird nichts angezeigt.

Hier ist die geänderte Version src/App.js:

• In den Zeilen 3–7 wird ein Layoutobjekt mit title, widthund erstellt height.
• In den Zeilen 9–20 wird ein Datenarray erstellt, das aus zwei Trace-Objekten besteht. 'scatter'Beide Traces werden zusammen mit den Werten als Typ definiert y. Der erste Trace wird modeauf gesetzt 'lines', der zweite modeauf 'markers'.
• In Zeile 23 wird das Streudiagramm erstellt.

Hier ist die Modifikation src/App.js, die kombinierte Modi verwendet.

• In den Zeilen 3–7 wird ein Layoutobjekt mit title, widthund erstellt height.
• In den Zeilen 9–28 wird ein Datenarray erstellt, das aus zwei Trace-Objekten besteht.
  – In den Zeilen 10–14 setzt der erste Trace den Modus auf 'lines+markers'.
  – In den Zeilen 15–26 stellen die zweiten Spuren den Modus auf ein 'markers+lines'. Außerdem wird marker.colorauf 'green', marker.sizeauf 12, line.colorauf 'red'und line.widthauf 3 gesetzt.
• In Zeile 31 wird das Streudiagramm erstellt.

Das Folgende wird für beide Spuren zusammen mit einem Array von Textwerten dataArrayergänzt . Hier ist der Code:textmode

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

Es funktioniert, außer dass es einige Überschneidungen zwischen Markierungen und Text gibt.

Wir können die Textpositionen verschieben, um Überlappungen zu vermeiden:

const dataArray = [
  {
    type: 'scatter',
    y: [1, 2, 1, 4, 3, 6],
    mode: 'lines+markers+text',
    text: ['Line1-a', 'Line1-b', 'Line1-c', 'Line1-d', 'Line1-e', 'Line1-f'],
    textposition: 'top center',
  },
  {
    type: 'scatter',
    y: [2, 7, 0, 4, 6, 2],
    mode: 'text+markers+lines',
    text: ['Line2-a', 'Line2-b', 'Line2-c', 'Line2-d', 'Line2-e', 'Line2-f'],
    textposition: 'bottom center',
    marker: {
      color: 'green',
      size: 12,
    },
    line: {
      color: 'red',
      width: 3,
    },
  },
];

xWir haben Dimensionen in einem Plotly-Diagramm gesehen y, und in Streudiagrammen gibt es eine weitere Dimension, die Farbdimension. Im folgenden Beispiel erstellen wir ein Diagramm mit sieben horizontalen Streuspuren mit Markierungen. Diese Markierungen werden verwendet, um zu erklären, wie die Farbdimensionierung funktioniert.

Hier ist unser Zieldiagramm:

Und hier ist die geänderte Version src/App.js:

• trace 0Definiert in den Zeilen 10–18 yWerte [6, 6, 6, 6, 6, 6](Zeile 12) und marker.coloreine einfache Farbe 'red'(Zeile 15).

• trace 1Definiert in den Zeilen 19–28 ydie Werte als [5, 5, 5, 5, 5, 5](Zeile 21) und marker.colorscaleals [[0, 'green'], [1, 'blue']](Zeile 24). colorscaleist ein Array, das Arrays enthält, die einen normalisierten Wert einer RGB-, RGBA-, Hex-, HSL-, HSV- oder benannten Farbzeichenfolge zuordnen. Es ist mindestens eine Zuordnung für den niedrigsten (0) und höchsten (1) Wert erforderlich. colorscalehat nur dann eine Auswirkung, wenn marker.colores auf ein numerisches Array eingestellt ist (Zeile 25).

• In den Zeilen 29–39 werden die Werte trace 2definiert , die (Zeile 31) ysein sollen . [4, 4, 4, 4, 4, 4]Da marker.colorscalenicht definiert ist, colorscalewird die Standardeinstellung angewendet. marker.cmin(Zeile 35) legt die Untergrenze der Farbdomäne fest und marker.cmax(Zeile 36) legt die Obergrenze der Farbdomäne fest. Andernfalls marker.cminwird marker.cmaxvon marker.color(Zeile 34) abgezogen.

• In den Zeilen 40–49 werden die Werte trace 3definiert , die (Zeile 42) ysein sollen . (Zeile 46) legt den Mittelpunkt der Farbdomäne fest, indem er skaliert wird und/oder den gleichen Abstand zu diesem Punkt hat.[3, 3, 3, 3, 3, 3]marker.cmidmarker.cminmarker.cmax

• trace 4Definiert in den Zeilen 50–59 die Werte, die (Zeile 52) ysein sollen . [2, 2, 2, 2, 2, 2]Neben der Definition colorscalekönnen wir auch einen vordefinierten Palettennamen aus der Liste verwenden: 'Blackbody', 'Bluered', 'Blues', 'Cividis', 'Earth', 'Electric', 'Greens', 'Greys', 'Hot', 'Jet', 'Picnic', 'Portland', 'Rainbow', 'RdBu', 'Reds', 'Viridis', 'YlGnBu'und 'YlOrRd'. Für trace 4wird auf (Zeile 56) marker.colorscalegesetzt .'Greens'

• trace 5Definiert in den Zeilen 60–69 ydie Werte als [1, 1, 1, 1, 1, 1](Zeile 62) und marker.colorscaleals 'YlOrRd'(Gelb oder Rot, Zeile 66).

• trace 6Definiert in den Zeilen 70–85 ydie Werte als [0, 0, 0, 0, 0, 0](Zeile 72) und marker.colorscaleals 'Jet'(Zeile 76).

• In den Zeilen 78–83 trace 6wird , , , und colorbardefiniert . wird mit einer horizontalen Ausrichtung (Zeile 80) eingestellt, um eine Überlagerung der Legende zu vermeiden. Legt die Position des Farbbalkens mit einer Zahl zwischen oder gleich -2 und 3 fest . Der Standardwert ist 1,02. Legt die Y-Position des Farbbalkens mit einer Zahl zwischen oder gleich -2 und 3 fest. Der Standardwert ist 0,5. In wird auf 0,48 (Zeile 81) und auf -0,2 (Zeile 82) gesetzt. Der Standort wurde von oben (Standard für horizontale Ausrichtung) nach unten neben verschoben . Es zeigt, wie die Farbdimension der verstreuten Punkte übereinstimmt .titleorientationxycolorbarcolorbar.xx
colorbar.ytrace 6colorbar.xcolorbar.ytrace 6colorbar

• In Zeile 94 wird das Streudiagramm mit sieben Farbdimensionen erstellt.

colorbar: {
  title: 'y = 0',
  orientation: 'v',
}

Offenbar colorbarüberschneidet sich die Legende. Anstatt colorbardie Legende horizontal zu gestalten, können wir sie auch in eine horizontale Form ändern.

Hier ist die geänderte src/App.js.

• In den Zeilen 7–9 legendist es auf horizontal eingestellt.
• In den Zeilen 81–83 colorbarwird die Ausrichtung von entfernt. Der Standardwert ist vertikal ( 'v').

Das obige Beispiel zeigt, dass die Farbdimension lebendig und einfach zu verwenden ist.

Einstellmöglichkeiten

Wenn Sie mit der Maus über die obere rechte Ecke eines Diagramms fahren, modebarwird eine Liste mit Schaltflächen angezeigt. Von links nach rechts sind es Download, Zoom, Pan, Box Select, Lasso Select, Zoom in, Zoom out, Autoscale, Reset axesund Plotly Logo.

• Download: Das Diagramm wird über den Browser heruntergeladen. Standardmäßig wird eine PNG-Datei mit der Dimension heruntergeladen 700x450. Hier ist das Beispiel für die Konfiguration zum Herunterladen einer SVG-Datei mit dem Namen 'custom_image'und der Dimension 800x600.

const configObj = {
  toImageButtonOptions: {
    format: 'svg', // one of png, svg, jpeg, webp
    filename: 'custom_image',
    width: 800,
    height: 600,
    scale: 1, // multiply title/legend/axis/canvas sizes by this factor
  },
};

Durch die Einstellung scrollZoom„true“ können Benutzer mit dem Scrollrad der Maus hinein- und herauszoomen.

const configObj = {
  scrollZoom: true,
};

• Box Select: Ermöglicht die Auswahl eines Teils des Diagramms mit einem Kästchen.

• Lasso Select: Ermöglicht die Auswahl eines Teils des Diagramms mit einer freien Grenze.

• Zoom in: Dadurch wird das Bild größer und näher.

• Zoom out: Dadurch wird das Bild kleiner und größer.

• Autoscale: Es betrachtet alle Punkte (Daten) im Diagramm und ändert das Layout, um alle anzuzeigen.
• Reset axes: Es werden die für das Diagramm angegebenen Layoutdetails wiederhergestellt, auch wenn dabei einige Punkte außer Acht gelassen werden.
• Plotly Logo: Der Tooltip zeigt die Plotly-Version, und wenn Sie darauf klicken, gelangen Sie zuhttps://plotly.com/.

<Plot layout={layoutObj} data={dataArray} config={configObj} />

• Deaktivieren Sie die Reaktionsfähigkeit in Breite und Höhe:

const configObj = {
  responsive: false,
};

const configObj = {
  staticPlot: true,
};

const configObj = {
  displayModeBar: true,
};

const configObj = {
  displaylogo: false,
};

const configObj = {
  modeBarButtonsToRemove: ['pan', 'lasso'], // Pan and Lasso are removed
};

const configObj = {
  modeBarButtonsToAdd: [
    'drawline',
    'drawopenpath',
    'drawclosedpath',
    'drawcircle',
    'drawrect',
    'eraseshape',
  ],
};

Event-Handler-Requisiten

Im vorherigen Abschnitt haben wir Box Selectund eingeführt Lasso Select. Diese wählen Teile des Diagramms aus. Was ist der Anwendungsfall dafür?

Das Diagramm, das das selectEreignis abhört, kann auf die Benutzerauswahl reagieren.

Hier ist die geänderte Version src/App.js:

• In Zeile 10 wird Box selectals Standardaktion modebar.
• In den Zeilen 98–101 wird ein Konfigurationsobjekt erstellt, das das Plotly- modebarLogo immer sichtbar macht und das Plotly-Logo auf dem ausblendet modebar.
• In den Zeilen 103–105 wird ein Select-Handler erstellt, um die selectedInformationen zu protokollieren.
• In Zeile 109 wird das Diagramm mit den Requisiten layout, data, configund erstellt onSelected.

Auf der Inspect-Konsole selectedwerden Informationen angezeigt, die zum Erstellen von Anwendungen verwendet werden können.

Hier ist die Requisitenliste für Event - Handler : onAfterExport, onAfterPlot, onAnimated, onAnimatingFrame, onAnimationInterrupted, onAutoSize, , onBeforeExport, onBeforeHover, onButtonClicked, onClick, onClickAnnotation, onDeselect, onDoubleClick, onError, onFramework, , , , , , , , , , , , , , und .onHoveronInitializedonLegendClickonLegendDoubleClickonPurgeonRelayoutonRelayoutingonRestyleonRedrawonSelectedonSelectingonSliderChangeonSliderEndonSliderStartonSunburstClickonTransitioningonTransitionInterruptedonUnhoveronUpdateonWebGlContextLost

Abschluss

Wir haben gezeigt, wie plotly.js für Balkendiagramme und Streudiagramme funktioniert. Zusätzlich zu den vollständigen Diagrammfunktionen ist die Farbdimension lebendig und einfach zu verwenden. Seine modebarTasten sind übermäßig groß und leistungsstark. Allerdings mangelt es an Zugänglichkeit.

Im Vergleich zu Highcharts werden die statistischen und wissenschaftlichen Diagramme von Plotly von der KI-/Datenwissenschaftsgemeinschaft weithin angenommen. In den folgenden Artikeln werden wir Beispiele nennen.

Danke fürs Lesen.

Want to Connect? 

If you are interested, check out my directory of web development articles.