BAR CHART RACE

Cuando tenemos un historial de datos, sabemos que nos pueden proporcionar información valiosa y la mejor forma para sacar provecho de esos datos es utilizando gráficos.

Ahora te voy a explicar cómo podemos insertar un tipo de gráfico animado ó presentación llamado bar chart race, qué significa carrera de gráfico de barras, el cual nos muestra cómo se comportan nuestros datos a lo largo del tiempo de una manera interactiva.

Disponer nuestra data

Todos nuestros datos deben estar organizados, limpios, en otras palabras preparados, y antes que nada debemos pensar primero en lo que queremos investigar en base a nuestra información. La data que vamos a utilizar muestra información del valor de mercado de varias empresas mundiales a lo largo de los años.

Cada fila o dato nos indica el valor en dolares de una empresa asociada a una categoria desde el año 2000 al 2022. La fecha está con formato de dia mes y año, en mi ejemplo usaré el año, pero eso no es obstáculo para que nuestro gráfico muestre el recorrido en dias ó meses, eso depende de como quieres mostrar la animación. La catgoría de nuestra data se usará para distinguir y comparar las industrias que se van mostrando en cada barra horizontal de nuestra gráfica.

Tomar en cuenta el orden de los datos "date, name, category, value"; si tus datos están organizados de diferente forma, debes ordenarlos para adaptarlos el formato de la data de ejemplo para que te funcione correctamente.

Creación de funciones de Apps Script

La interprestación de lo que queremos realizar se resumen en:

Leer los datos de nuestra hoja de cálculo
Crear componentes HTML desde un menú, para ello utilizaremos la libreria de graficación D3.js

Link de código y fuente de ejemplo de Bar Chart Race para D3.js creado por Takanori Fujiwara

Mostrar la gráfica interactiva

Código.gs

Entonces para empezar, abrimos el menú Extensiones y damos clic en Apps Script.

Reemplazamos el código que aparece por default por el siguiente:

//creación de menú "Gráficas" que llama a la función que genera la gráfica

function onOpen() {
 SpreadsheetApp.getUi()
  .createMenu("Gráficas")
    .addItem("Generar gráfica", "grafica_html")
    .addToUi();
}

// función para leer los datos de nuestra hoja de cálculo
function leer_datos() {
  var ultima_fila = SpreadsheetApp.getActiveSheet().getLastRow();
  var ultima_columna = SpreadsheetApp.getActiveSheet().getLastColumn();
  var dataRange = SpreadsheetApp.getActiveSheet().getRange(fila_inicial=2, columna_inicial=1,ultima_fila, ultima_columna);
  var data_values = dataRange.getValues();

  // se mapea cada elemento del arreglo a una propiedad en el orden que vienen las columnas y se filtran valores de name vacíos
  return data_values.map(([date, name, category, value]) => (
    { date, name, category, value }))
    .filter(d => (d.name == "" ? false : true));
}

//función para graficar los datos
function grafica_html() {
  var html = HtmlService.createTemplateFromFile('grafica');
  html.datos = leer_datos();
  SpreadsheetApp.getUi().showModalDialog(html.evaluate().setHeight(800).setWidth(1000),"Gráfica");
}

Componentes HTML

Ahora tenemos que crear los archivos html necesarios para graficar.

El primer archivo de llama grafica, lo creamos dando clic en el signo +, elejimos la opción HTML y lo nombramos.

Gráfica.html

Dentro de grafica.html reemplazamos el default por el siguiente código:

<!DOCTYPE html>
<html>
  <head>
    <style>
      html, body {
        overflow: hidden;
        font-family: Arial, Helvetica, sans-serif;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #bar-chart-race > text:last-child {
          font-size: 4em !important;
          font-weight: bold !important;
      }
      #bar-chart-race g ~ g ~ g text {
        font-weight: bold !important;
      }
    </style>
    <base target="_top">
  </head>
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
    <?!= HtmlService.createHtmlOutputFromFile('chartjs').getContent(); ?>
    <script>
      const data_sheet = <?!= JSON.stringify(datos) ?>;
      const data = data_sheet.map(x => {
        x.date = new Date(x.date);
        return x;
      });
      const play = () => {
        const chart = barChartRace(data, {
          svgId: 'bar-chart-race'
          });
          d3.select('#bar-chart-race').remove();
          d3.select('body').append(() => chart);
          chart.play();
      }

      const button = d3.select('body').append('div').append('button')
        .attr('type', 'button').attr('class','reiniciar').text('Reiniciar');

      // iniciar animación al cargar la página
      play();

      // reiniciar al dar click en el botón
      button.on('click', () => {
        play();
      });
    
    </script>
  </body>
</html>

El segundo archivo HTML necesario es el que tomaremos del repositorio  de Takanori Fujiwara Archivo chart.js, lo creamos de la misma manera dando clic en el signo +, elejimos la opción HTML y le colocamos el nombre chartjs, tomar en cuenta que no se debe colocar .html ya que apps script lo coloca automaticamente.

En esta parte borramos su contenido y creamos un tipo de atributo script de HTML <script></script> y dentro de este script pegamos el código del archivo chart.js del repositorio de Takanori Fujiwara.

Luego de pegar el código nos dirigimos a la fila donde se define la constante barChartRace y eliminamos la palabra export debido a que Apps Script no soporta los módulos de la especificación ES6 de JavaScript.

También puedes modificar de manera opcional la variable n y width, las cuales nos muestran las cantidades de barras horizontales y el ancho de nuestra gráfica, en mi ejemplo lo dejé en n=10 (diez barras horizontales) y width=1000.

Finalmente damos clic en guardar proyecto

Generar gráfica interactiva Bar Chart Race en mi hoja de cálculo de Google SheetsFinalmente refrescamos nuestra hoja de cálculo y debería aparecer nuestro menú para generar el gráfico animado.

La primera vez que usamos nos pedirá autorización para ejecutar código de apps script, lo permitimos y volvemos a usar el menú, finalmente observamos el resultado.