Tutorial de JavaScript: visualizaciones de datos fáciles con React-vis

La visualización de datos es una parte importante de contar historias, pero puedes perderte en la maleza con D3.js durante horas solo para hacer algunos gráficos simples. Si todo lo que necesita son gráficos, hay muchas bibliotecas que envuelven D3 y le brindan formas convenientes de crear visualizaciones simples. Esta semana, comenzaremos a ver React-vis, una biblioteca de gráficos que Uber creó y de código abierto.

React y d3.js tienen una relación interesante. React tiene que ver con la representación declarativa de componentes y D3.js se trata de manipular imperativamente los elementos DOM. Usarlos juntos es posible usando refs, pero es mucho más agradable encapsular todo el código de manipulación en un componente separado para que no tenga que cambiar tanto de contexto. Afortunadamente, la biblioteca React-vis ya lo hace por nosotros con un montón de componentes componibles que podemos usar para construir nuestras visualizaciones.

La mejor manera de probar bibliotecas de visualización de datos, o cualquier biblioteca, es construyendo algo con ellas. Hagámoslo, utilizando el conjunto de datos Nombres populares de bebés de la ciudad de Nueva York.

Preparando los datos para React-vis

Para empezar, arranqué un proyecto de React create-react-appy agregué algunas dependencias: react-vis, d3-fetchpara ayudar a extraer los datos CSV y momentpara ayudar con el formato de fecha. También reuní un poco de código repetitivo para extraer y analizar el CSV que incluye los nombres populares que usan d3-fetch. En formato JSON, el conjunto de datos que estamos extrayendo tiene aproximadamente 11,000 filas y cada entrada se ve así:

{

  "Año de nacimiento": "2016",

  "Género femenino",

  "Etnia": "ISLA ASIÁTICO Y DEL PACÍFICO",

  "Nombre del niño": "Olivia",

  "Recuento": "172",

  "Rango": "1"

}

Debido a que los espacios en las claves y los números representados como cadenas harían que estos datos sean incómodos para trabajar, modificaremos los datos en el momento de la carga para realizar algunos masajes. Ese código simplemente usa el dsvmétodo de d3-fetch:

importar {dsv} desde 'd3-fetch';

importar momento de 'momento';

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

  regreso {

    yearOfBirth: + d ['Año de nacimiento'],

    género: d ['Género'],

    etnia: d ['Etnia'],

    firstName: d ['Nombre del niño'],

    count: + d ['Count'],

    rango: + d ['Rango'],

  };

});

Ahora nuestros datos de entrada son mucho más amigables. Se parece a esto:

{

  "yearOfBirth": 2016,

  "género femenino",

  "etnicidad": "ISLA DE ASIA Y DEL PACÍFICO",

  "firstName": "Olivia",

  "contar": 172,

  "rango": 1

}

Nuestro primer complot con React-vis

El primer componente que probablemente usará es una forma de XYPlot, que contiene otros componentes y está presente en casi todos los gráficos que cree. Esto es principalmente un contenedor que define el tamaño de la visualización, pero también puede incluir algunas propiedades que se pasan a los niños. Por sí mismo, XYPlotno representa nada más que un espacio vacío:

   
    

  ancho = {300}

  altura = {300}

Para mostrar datos realmente, necesitaremos usar una serie de algún tipo. Una serie es el componente que realmente dibuja los datos, como un gráfico de barras verticales ( VerticalBarSeries) o un gráfico de líneas ( LineSeries). Tenemos 14 series a nuestra disposición listas para usar, pero comenzaremos con una simple VerticalBarSeries. Cada serie hereda de un conjunto básico de atributos. El más útil para nosotros será el dataatributo:

   
    

  ancho = {300}

  altura = {300}

    datos = {datos}

  />

Sin embargo, esto va a fallar porque React-vis espera que los elementos de la matriz de datos tengan la siguiente forma:

{

  x: 2016, // Esto se asignará al eje x

  y: 4 // Esto se asignará al eje y

}

Por ejemplo, para mostrar el número total de bebés contados en el conjunto de datos por año, necesitaremos procesar los datos para obtener un solo objeto para cada año donde el xatributo es el año y el yatributo es el número total de bebés en el conjunto de datos. El código que escribí para hacer eso es bastante conciso:

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

  if (row.yearOfBirth in acc) {

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

  } más {

    acc [row.yearOfBirth] = row.count

  }

  retorno acc;

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

Cuando lo conectas al VerticalBarSeries, ¡obtenemos algunos resultados!

Esto no es particularmente útil por sí solo, pero afortunadamente la biblioteca React-vis proporciona algunos componentes adicionales que se pueden usar para contextualizar la información. Vamos a importar XAxisy YAxismostrar más información en nuestro gráfico. Representaremos esos componentes dentro de XYPlotnuestro VerticalBarSeries. El código y los resultados se ven así:

   
    

  ancho = {600}

  altura = {600}

    datos = {totalBabiesByYear}

  />

Nuestras etiquetas del eje y están cortadas y nuestras etiquetas del eje x se formatean como números, pero estamos progresando. Para que el eje x se trate como valores ordinales discretos en lugar de un rango numérico continuo, agregaremos xType="ordinal"como una propiedad en XYPlot. Mientras estamos en eso, podemos agregar algo de margen izquierdo al gráfico para que podamos ver más etiquetas del eje y:

   
    

  ancho = {600}

  altura = {600}

  margin = {{

    izquierda: 70

  }}

  xType = "ordinal"

¡Estamos en el negocio! Nuestro gráfico ya se ve muy bien, y la mayor parte del trabajo que teníamos que hacer estaba relacionado con el procesamiento de datos, no con su representación.

La semana que viene, continuaremos explorando los componentes de la biblioteca React-vis y definiremos algunas interacciones básicas. Echa un vistazo a este proyecto en GitHub si quieres jugar con el conjunto de datos y la biblioteca React-vis. ¿Tienes alguna visualización que hayas hecho con React-vis? Envíame una captura de pantalla en Twitter @freethejazz.