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 que tuvieron un descuento para adultos 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.

Escribe 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. Visualiza 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 que tenga 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 cuadro de diálogo Editar configuración del gráfico.

  4. Selecciona la sección Configuración del gráfico (anulación) y, luego, ingresa el fragmento de JSON de HighCharts de la sección Escribe el fragmento de JSON de esta página.

  5. Para permitir que Looker aplique el formato correcto a tu JSON, haz clic en <> (Dar formato al código).

  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 la visualización, puedes guardarla.

Agrega más condiciones

Para agregar más círculos al diagrama de Venn, agrega más dimensiones de 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

Cambia 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 separada por comas de las etiquetas de las regiones. Por ejemplo, la superposición entre las regiones "Gastó más de USD 50", "Es la primera compra" y "Descuento para adultos mayores" sería "Gastó más de USD 50, Es la primera compra, Descuento para adultos 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 cada 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 de 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 vuelven a etiquetar las regiones superpuestas (3, 5, 6, 7) y los círculos exteriores (1, 2, 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 en el 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 ejemplo, 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
          }
        }
      }
    ]
  }]
}