Tutoriel JavaScript: visualisations de données faciles avec React-vis

La visualisation des données est une partie importante de la narration d'histoires, mais vous pouvez vous perdre dans les mauvaises herbes avec D3.js pendant des heures juste pour faire quelques graphiques simples. Si vous n'avez besoin que de graphiques, il existe de nombreuses bibliothèques qui encapsulent D3 et vous offrent des moyens pratiques de créer des visualisations simples. Cette semaine, nous allons commencer à examiner React-vis, une bibliothèque de graphiques créée par Uber et open-source.

React et d3.js ont une relation intéressante. React est tout au sujet du rendu déclaratif des composants et D3.js est tout au sujet de la manipulation impérative des éléments DOM. Les utiliser ensemble est possible en utilisant refs, mais il est beaucoup plus agréable d'encapsuler tout le code de manipulation dans un composant séparé pour ne pas avoir à changer de contexte autant. Heureusement, la bibliothèque React-vis le fait déjà pour nous avec un tas de composants composables que nous pouvons utiliser pour créer nos visualisations.

La meilleure façon de tester des bibliothèques de visualisation de données, ou n'importe quelle bibliothèque, est de créer quelque chose avec. Faisons cela, en utilisant l'ensemble de données Popular Baby Names de la ville de New York.

Préparation des données pour React-vis

Pour commencer, j'ai démarré un projet React avec create-react-appet ajouté quelques dépendances: react-vis, d3-fetchpour aider à extraire les données CSV et momentpour aider au formatage de la date. J'ai également rassemblé un peu de code standard pour extraire et analyser le CSV qui comprend les noms populaires en utilisant d3-fetch. Au format JSON, l'ensemble de données que nous extrayons contient environ 11000 lignes et chaque entrée ressemble à ceci:

{

  "Année de naissance": "2016",

  "Sexe": "FEMME",

  "Ethnicité": "ÎLE D'ASIE ET ​​DU PACIFIQUE",

  "Prénom de l'enfant": "Olivia",

  "Compte": "172",

  "Rang": "1"

}

Étant donné que les espaces dans les clés et les nombres représentés sous forme de chaînes rendraient ces données peu pratiques à utiliser, nous modifierons les données au moment du chargement pour effectuer un certain massage. Ce code utilise simplement la dsvméthode de d3-fetch:

import {dsv} depuis 'd3-fetch';

importer le moment à partir du «moment»;

dsv (",", dataUrl, (d) => {

  revenir {

    yearOfBirth: + d ['Year of Birth'],

    sexe: d ['Genre'],

    ethnicité: d [«Ethnicité»],

    firstName: d ['Prénom de l'enfant'],

    count: + d ['Count'],

    rang: + d ['Rang'],

  };

});

Maintenant, nos données d'entrée sont beaucoup plus conviviales. Cela ressemble à ceci:

{

  "yearOfBirth": 2016,

  "gender": "FEMALE",

  "ethnicité": "ÎLE ASIATIQUE ET PACIFIQUE",

  "firstName": "Olivia",

  "compte": 172,

  "rang": 1

}

Notre première intrigue avec React-vis

Le premier composant que vous utiliserez probablement est une forme de XYPlot, qui contient d'autres composants et est présente dans presque tous les graphiques que vous créez. Il s'agit principalement d'un wrapper qui définit la taille de la visualisation, mais il peut également inclure certaines propriétés qui sont également transmises aux enfants. En soi, XYPlotne rend rien d'autre qu'un espace vide:

   
    

  largeur = {300}

  hauteur = {300}

Pour afficher réellement les données, nous devrons utiliser une série quelconque. Une série est le composant qui dessine réellement les données, comme un graphique à barres verticales ( VerticalBarSeries) ou un graphique en courbes ( LineSeries). Nous avons 14 séries à notre disposition hors de la boîte, mais nous allons commencer par un simple VerticalBarSeries. Chaque série hérite d'un ensemble d'attributs de base. Le plus utile pour nous sera l' dataattribut:

   
    

  largeur = {300}

  hauteur = {300}

    data = {data}

  />

Cela va cependant échouer, car React-vis s'attend à ce que les éléments du tableau de données aient la forme suivante:

{

  x: 2016, // Ceci sera mappé sur l'axe des x

  y: 4 // Ceci sera mappé sur l'axe y

}

Par exemple, pour afficher le nombre total de bébés comptés dans l'ensemble de données par année, nous devrons traiter les données pour obtenir un seul objet pour chaque année où l' xattribut est l'année et l' yattribut est le nombre total de bébés dans l'ensemble de données. Le code que j'ai écrit pour faire cela est assez concis:

const totalBabiesByYear = Object.entries (data.reduce ((acc, row) => {

  if (row.yearOfBirth dans acc) {

    acc [row.yearOfBirth] = acc [row.yearOfBirth] + row.count

  } autre {

    acc [row.yearOfBirth] = row.count

  }

  retour acc;

}, {})). map (([k, v]) => ({x: + k, y: v}));

Lorsque vous le branchez VerticalBarSeries, nous obtenons des résultats!

Cela n'est pas particulièrement utile en soi, mais heureusement, la bibliothèque React-vis fournit des composants supplémentaires qui peuvent être utilisés pour contextualiser les informations. Importons XAxiset YAxisafin que nous puissions afficher plus d'informations dans notre graphique. Nous rendrons ces composants à l'intérieur de XYPlotnotre VerticalBarSeries. Le code et les résultats ressemblent à ceci:

   
    

  largeur = {600}

  hauteur = {600}

    data = {totalBabiesByYear}

  />

Nos étiquettes de l'axe des y sont coupées et nos étiquettes de l'axe des x sont formatées sous forme de nombres, mais nous progressons. Pour que l'axe des x soit traité comme des valeurs ordinales discrètes par opposition à une plage numérique continue, nous ajouterons xType="ordinal"comme propriété sur le XYPlot. Pendant que nous y sommes, nous pouvons ajouter une marge gauche au graphique afin de voir plus d'étiquettes de l'axe y:

   
    

  largeur = {600}

  hauteur = {600}

  margin = {{

    gauche: 70

  }}

  xType = "ordinal"

Nous sommes en affaires! Notre graphique a déjà une belle apparence - et la plupart du travail que nous avons dû faire concernait le massage des données, et non leur rendu.

La semaine prochaine, nous continuerons à explorer les composants de la bibliothèque React-vis et définirons quelques interactions de base. Consultez ce projet sur GitHub si vous souhaitez jouer avec l'ensemble de données et la bibliothèque React-vis. Vous avez des visualisations que vous avez faites avec React-vis? Envoyez-moi une capture d'écran sur Twitter @freethejazz.