Cómo crear un diagrama de Venn con el editor de configuración de gráficos

Un diagrama de Venn muestra la superposición entre dos o más atributos en un conjunto de datos.

Con el editor de configuración de gráficos, puedes crear diagramas de Venn a partir de un gráfico de columnas en Looker. Para crear un diagrama de Venn, debes incluir al menos dos dimensiones type: yesno y una dimensión con type: string o type: number.

Por ejemplo, puedes crear un diagrama de Venn que muestre la superposición entre los pedidos que fueron la primera compra de un usuario, los pedidos a los que se les aplicó un descuento para personas mayores y los pedidos de USD 50 o más.

Requisitos previos

Para acceder al editor de configuración de gráficos, debes tener el permiso can_override_vis_config.

Cómo escribir el fragmento JSON

Para crear un diagrama de Venn, comienza con el siguiente fragmento de JSON:

{
  chart: {
    type: 'venn',
  }
}

Cómo crear un diagrama de Venn

Para crear un diagrama de Venn, sigue estos pasos:

  1. Consulta un gráfico de columnas en una exploración o edita un gráfico de columnas en una vista o un panel.

    Comienza con un gráfico de columnas con al menos tres dimensiones. Incluye una dimensión de type: string o type: number. Incluye al menos dos dimensiones de type: yesno.

  2. En la visualización, abre el menú Editar.

  3. En la pestaña Plot, haz clic en el botón Edit Chart Config. Looker muestra el diálogo Edit Chart Config.

  4. Selecciona la sección Chart Config (Override) y, luego, ingresa el fragmento JSON de HighCharts de la sección Cómo escribir el fragmento JSON de esta página.

  5. Para permitir que Looker aplique el formato correcto a tu JSON, haz clic en <> (Format code).

  6. Para probar los cambios, haz clic en Vista previa.

  7. Para aplicar los cambios, haz clic en Aplicar. La visualización se mostrará con los valores JSON personalizados.

Una vez que hayas personalizado tu visualización, podrás guardarla.

Cómo agregar más condiciones

Para agregar más círculos al diagrama de Venn, agrega más dimensiones type: yesno a la tabla de datos. Puedes crear una dimensión personalizada si necesitas esta condición solo para el diagrama de Venn. Escribe tus dimensiones personalizadas como una condición booleana, como en este ejemplo:

${orders.total_amount} > 50

Cómo cambiar los valores de las etiquetas de superposición

De forma predeterminada, la etiqueta de las regiones superpuestas en el diagrama de Venn será una concatenación de las etiquetas de región separadas por comas. Por ejemplo, la superposición entre las regiones "Gastó más de USD 50", "Es la primera compra" y "Descuento para personas mayores" sería "Gastó más de USD 50, Es la primera compra, Descuento para personas mayores".

Para personalizar estas etiquetas, edita los atributos series.data.name con el editor de configuración de gráficos. Para determinar qué atributo corresponde a qué región, puede ser útil enumerar todas las regiones primero.

Por ejemplo, considera un diagrama de Venn con tres círculos. Esto significa que hay siete regiones en total.

Puedes usar el siguiente fragmento JSON para averiguar qué etiqueta corresponde a cada número:

{
  chart: {
    type: 'venn'
  },
    series: [{
    data: [{ name: '1'}, {name: '2'}, {name: '3'}, {name: '4'}, {name: '5'}, {name: '6'}, {name: '7'}]
  }]
}

Luego, puedes editar el atributo name de cualquier región cuyo nombre quieras cambiar. Para que la etiqueta permanezca como predeterminada, quita el atributo name, pero deja los corchetes intactos. En este ejemplo, se vuelve a etiquetar las regiones superpuestas (3, 5, 6 y 7), y los círculos externos (1, 2 y 4) conservan su etiqueta predeterminada.

{
  chart: {
    type: 'venn'
  },
    series: [{
    data: [{}, {}, {name: 'Ruby tier'}, {}, {name: 'Platinum tier'}, {name: 'Emerald tier'}, {name: 'Sapphire tier'}]
  }]
}

Cómo cambiar el tamaño de fuente de las etiquetas

Para cambiar el tamaño de la fuente de las etiquetas del diagrama de Venn, edita los atributos dataLabels.style.fontSize con el editor de configuración de gráficos.

Para ampliar el ejemplo anterior, en el siguiente se establece el tamaño de la fuente de cada una de las etiquetas en 24 puntos.

{
  chart: {
    type: 'venn',

  },
  series: [{
    data: [{
        dataLabels: {
          style: {
            fontSize: 24
          }
        }
      }, {
        dataLabels: {
          style: {
            fontSize: 24
          }
        }
      }, {
        name: 'Ruby tier',
        dataLabels: {
          style: {
            fontSize: 24
          }
        }
      }, {
        dataLabels: {
          style: {
            fontSize: 24
          }
        }
      }, {
        name: 'Platinum tier',
        dataLabels: {
          style: {
            fontSize: 24
          }
        }
      },
      {
        name: 'Emerald tier',
        dataLabels: {
          style: {
            fontSize: 24
          }
        }
      },
      {
        name: 'Sapphire tier',
        dataLabels: {
          style: {
            fontSize: 24
          }
        }
      }
    ]
  }]
}