Skip to content
GRAPHIC WALKER
Graphic Walker

Graphic Walker

Graphic Walker Uebersicht

License (opens in a new tab) npm version (opens in a new tab) build status (opens in a new tab)

Graphic Walker ist eine Open-Source-Alternative zu Tableau, die Ihre Daten per Drag-and-Drop in interaktive Visualisierungen verwandelt. Es funktioniert als leichtgewichtige, einbettbare React-Komponente -- keine schwere BI-Plattform erforderlich.

Hauptfunktionen

  • Drag-and-Drop-Exploration -- erstellen Sie Visualisierungen, indem Sie Felder in visuelle Kodierungskanaele ziehen (Zeilen, Spalten, Farbe, Groesse, Form, Deckkraft)
  • Grammar of Graphics -- basierend auf vega-lite (opens in a new tab), mit Unterstuetzung fuer Balken-, Linien-, Flaechen-, Streu-, Heatmap-, Boxplot- und geografische Diagramme
  • Mehrere Komponenten -- GraphicWalker fuer die vollstaendige Exploration, GraphicRenderer fuer schreibgeschuetzte Diagrammanzeige, PureRenderer zum Einbetten, TableWalker fuer Datentabellen
  • Client- oder Server-Berechnung -- fuehrt Berechnungen standardmaessig in einem WebWorker aus oder delegiert sie an Ihren Server fuer grosse Datensaetze
  • Theming -- integrierte Themes (vega, g2, streamlit), Dark-Mode-Unterstuetzung und vollstaendig anpassbare UI-Farben
  • Geografische Visualisierung -- Choroplethenkarten und Punktkarten mit GeoJSON/TopoJSON-Unterstuetzung
  • Diagramm-Export -- Exportieren Sie Diagramme als SVG oder PNG ueber die Ref-API
  • i18n -- integrierte Unterstuetzung fuer Englisch, Chinesisch und Japanisch mit benutzerdefinierter Uebersetzungsunterstuetzung
  • Kein React? Kein Problem -- Vanilla JS-Einbettungsfunktionen fuer jedes Web-Framework

Schnellstart

npm install @kanaries/graphic-walker
import { GraphicWalker } from '@kanaries/graphic-walker';
 
const fields = [
  { fid: 'date', name: 'Date', semanticType: 'temporal', analyticType: 'dimension' },
  { fid: 'category', name: 'Category', semanticType: 'nominal', analyticType: 'dimension' },
  { fid: 'sales', name: 'Sales', semanticType: 'quantitative', analyticType: 'measure' },
];
 
function App() {
  return <GraphicWalker data={data} fields={fields} />;
}

Siehe die Anleitung Erste Schritte fuer eine vollstaendige Einfuehrung.

Dokumentation

AbschnittBeschreibung
Erste SchritteInstallation, grundlegende Verwendung und Feldkonfiguration
API-ReferenzVollstaendige Props-Dokumentation fuer alle Komponenten
AnleitungenDiagrammtypen, Theming, Berechnung, geografische Visualisierung und mehr
TutorialsSchritt-fuer-Schritt-Tutorials zur Erstellung bestimmter Diagrammtypen
FAQHaeufig gestellte Fragen und Fehlerbehebung

Online-Playground

Testen Sie Graphic Walker ohne Installation: Graphic Walker Online (opens in a new tab)

Lizenz

Graphic Walker wird unter der Apache-2.0-Lizenz (opens in a new tab) veroeffentlicht.