JavaScript-Tutorial: Einfache Datenvisualisierung mit React-vis

Datenvisualisierung ist ein wichtiger Bestandteil des Erzählens von Geschichten, aber Sie können sich mit D3.js stundenlang im Unkraut verlieren, um nur ein paar einfache Diagramme zu erstellen. Wenn Sie nur Diagramme benötigen, gibt es zahlreiche Bibliotheken, die D3 umschließen und Ihnen bequeme Möglichkeiten zum Erstellen einfacher Visualisierungen bieten. Diese Woche werden wir uns React-vis ansehen, eine Diagrammbibliothek, die Uber erstellt und als Open-Source-Version bereitgestellt hat.

React und d3.js haben eine interessante Beziehung. Bei React dreht sich alles um das deklarative Rendern von Komponenten, und bei D3.js geht es darum, DOM-Elemente unbedingt zu manipulieren. Die gemeinsame Verwendung ist mit refs möglich , aber es ist viel besser, den gesamten Manipulationscode in einer separaten Komponente zu kapseln, damit Sie nicht so oft den Kontext wechseln müssen. Glücklicherweise erledigt die React-vis-Bibliothek dies bereits für uns mit einer Reihe von zusammensetzbaren Komponenten, mit denen wir unsere Visualisierungen erstellen können.

Der beste Weg, um Datenvisualisierungsbibliotheken oder wirklich jede Bibliothek zu testen, besteht darin, etwas damit zu erstellen. Lassen Sie uns dies anhand des Datensatzes "Beliebte Babynamen" der Stadt New York tun.

Vorbereiten der Daten für React-vis

Zu Beginn habe ich ein React-Projekt mit create-react-appeinigen Abhängigkeiten gebootet und hinzugefügt: react-vis, d3-fetchum das Abrufen der CSV-Daten und momentdas Formatieren des Datums zu erleichtern. Ich habe auch ein bisschen Boilerplate-Code zusammengestellt, um die CSV zu ziehen und zu analysieren, die die populären Namen enthält d3-fetch. Im JSON-Format hat der Datensatz, den wir abrufen, ungefähr 11.000 Zeilen und jeder Eintrag sieht folgendermaßen aus:

{
  "Geburtsjahr": "2016",
  "Geschlecht Weiblich",
  "Ethnizität": "ASIATISCHER UND PAZIFISCHER INSEL",
  "Vorname des Kindes": "Olivia",
  "Count": "172",
  "Rang 1"
}}

Da die Leerzeichen in den Schlüsseln und die als Zeichenfolgen dargestellten Zahlen die Arbeit mit diesen Daten erschweren würden, ändern wir die Daten beim Laden, um sie zu massieren. Dieser Code verwendet einfach die dsvMethode von d3-fetch:

{dsv} aus 'd3-fetch' importieren;
Moment von 'Moment' importieren;
dsv (",", dataUrl, (d) => {
  Rückkehr {
    Geburtsjahr: + d ['Geburtsjahr'],
    Geschlecht: d ['Geschlecht'],
    ethnische Zugehörigkeit: d ['ethnische Zugehörigkeit'],
    Vorname: d ['Vorname des Kindes'],
    count: + d ['Count'],
    Rang: + d ['Rang'],
  };
});

Jetzt sind unsere Eingabedaten viel freundlicher. Es sieht aus wie das:

{
  "Jahr der Geburt": 2016,
  "Geschlecht Weiblich",
  "ethnische Zugehörigkeit": "ASIAN AND PACIFIC ISLANDER",
  "Vorname": "Olivia",
  "count": 172,
  "Rang 1
}}

Unser erstes Grundstück mit React-vis

Die erste Komponente, die Sie wahrscheinlich verwenden, ist eine Form einer XYPlot, die andere Komponenten enthält und in fast jedem von Ihnen erstellten Diagramm vorhanden ist. Dies ist meist nur ein Wrapper, der die Größe der Visualisierung definiert, kann jedoch einige Eigenschaften enthalten, die auch an untergeordnete Elemente übergeben werden. Rendert an sich XYPlotnur einen leeren Raum:

   
    
  width = {300}
    
  Höhe = {300}
    
> 
    

   

Um Daten tatsächlich anzuzeigen, müssen wir eine Reihe von Daten verwenden. Eine Serie ist die Komponente, die die Daten tatsächlich zeichnet, z. B. ein vertikales Balkendiagramm ( VerticalBarSeries) oder ein Liniendiagramm ( LineSeries). Wir haben sofort 14 Serien zur Verfügung, aber wir beginnen mit einer einfachen VerticalBarSeries. Jede Serie erbt von einem Basissatz von Attributen. Das nützlichste für uns wird das dataAttribut sein:

   
    
  width = {300}
    
  Höhe = {300}
    
> 
    
    data = {data}
    
  />
    

   

Dies wird jedoch fehlschlagen, da React-vis erwartet, dass die Elemente im Datenarray die folgende Form haben:

{
  x: 2016, // Dies wird der x-Achse zugeordnet
  y: 4 // Dies wird auf die y-Achse abgebildet
}}

Um beispielsweise die Gesamtzahl der im Datensatz gezählten Babys nach Jahr anzuzeigen, müssen die Daten verarbeitet werden, um ein einzelnes Objekt für jedes Jahr zu erhalten, in dem das xAttribut das Jahr und das yAttribut die Gesamtzahl der Babys ist der Datensatz. Der Code, den ich dazu geschrieben habe, ist ziemlich knapp:

const totalBabiesByYear = Object.entries (data.reduce ((acc, row) => {
  if (row.yearOfBirth in acc) {
    acc [row.yearOfBirth] = acc [row.yearOfBirth] + row.count
  } else {
    acc [row.yearOfBirth] = row.count
  }}
  return acc;
}, {})). map (([k, v]) => ({x: + k, y: v}));

Wenn Sie es an das anschließen VerticalBarSeries, erhalten wir einige Ergebnisse!

Dies ist für sich genommen nicht besonders hilfreich, aber zum Glück bietet die React-vis-Bibliothek einige zusätzliche Komponenten, mit denen die Informationen kontextualisiert werden können. Lassen Sie uns Import XAxisund YAxisso können wir mehr Informationen in unserer Tabelle anzuzeigen. Wir werden diese Komponenten XYPlotneben uns rendern VerticalBarSeries. Der Code und die Ergebnisse sehen folgendermaßen aus:

   
    
  width = {600}
    
  Höhe = {600}
    
> 
    
    data = {totalBabiesByYear}
    
  />
    

   

Unsere Beschriftungen auf der y-Achse sind abgeschnitten und unsere Beschriftungen auf der x-Achse werden als Zahlen formatiert, aber wir machen Fortschritte. Um die x-Achse als diskrete Ordnungswerte im Gegensatz zu einem kontinuierlichen numerischen Bereich zu behandeln, fügen wir xType="ordinal"als Eigenschaft die hinzu XYPlot. Während wir gerade dabei sind, können wir dem Diagramm einen linken Rand hinzufügen, damit wir mehr Beschriftungen der y-Achse sehen können:

   
    
  width = {600}
    
  Höhe = {600}
    
  margin = {{
    
    links: 70
    
  }}
    
  xType = "ordinal"
    
> 
   

Wir sind im Geschäft! Unser Diagramm sieht bereits gut aus - und die meisten Arbeiten, die wir ausführen mussten, betrafen das Massieren von Daten, nicht das Rendern.

Nächste Woche werden wir die Komponenten der React-vis-Bibliothek weiter untersuchen und einige grundlegende Interaktionen definieren. Schauen Sie sich dieses Projekt auf GitHub an, wenn Sie mit dem Datensatz und der React-vis-Bibliothek herumspielen möchten. Hast du irgendwelche Visualisierungen, die du mit React-vis gemacht hast? Senden Sie mir einen Screenshot auf Twitter @freethejazz.