Google Data Studio permite a los usuarios crear paneles interactivos en tiempo real con visualizaciones de datos atractivas de forma gratuita. Los usuarios pueden recuperar sus datos de diversas fuentes y crear informes en Data Studio, con capacidades completas de edición y uso compartido. Este es un ejemplo de un panel de Data Studio:
(Haz clic aquí para ver este informe de ejemplo en Data Studio)
Data Studio proporciona varios tipos de gráficos integrados, incluidos gráficos de líneas, gráficos de barras, gráficos circulares y diagramas de dispersión. Las visualizaciones de la comunidad te permiten crear y usar tus propias visualizaciones personalizadas de JavaScript en Data Studio. Las visualizaciones de la comunidad son creadas por la comunidad de desarrolladores de Data Studio, y cualquier desarrollador puede crear una. También puedes compartir tus visualizaciones de la comunidad con otras personas para que las usen con sus propios datos.
Qué aprenderás
En este codelab, aprenderás lo siguiente:
- Cómo funciona una visualización de la comunidad de Google Data Studio
- Cómo crear una visualización de la comunidad con la biblioteca auxiliar ds-component
- Cómo integrar tu visualización de la comunidad en un panel de Data Studio
Requisitos
Para completar este lab de código, necesitarás lo siguiente:
- Acceso a Internet y un navegador web
- Una Cuenta de Google
- Acceso a un bucket de almacenamiento de Google Cloud Platform
- Conocimientos de JavaScript
¿Por qué elegiste este codelab?
¿Cómo planeas usar este codelab o instructivo?
¿Cómo calificarías tu experiencia con Data Studio?
¿Cuál de las siguientes opciones describe mejor tu experiencia?
¿Qué bibliotecas de visualización de JavaScript te interesan?
Avanza a la siguiente página para enviar la información de la encuesta.
Las visualizaciones de la comunidad de Data Studio te permiten crear y usar visualizaciones personalizadas de JavaScript que se integran en tus paneles.
En este codelab, crearás una visualización de la comunidad de gráficos de barras que admita 1 dimensión, 1 métrica y un estilo de color de barra.
Para crear una visualización de la comunidad, necesitas los siguientes archivos en un bucket de almacenamiento de Google Cloud Platform, que crearás en un paso posterior.
Nombre del archivo | Tipo de archivo | Objetivo |
manifest.json* | JSON | Proporciona metadatos sobre la visualización y la ubicación de los otros recursos. |
myViz.json | JSON | Proporciona opciones de configuración de datos y diseño para el panel Propiedades. |
myViz.js | JavaScript | Proporciona el código JavaScript necesario para mostrar la visualización. |
myViz.css (opcional) | CSS | Proporciona diseño para la visualización. |
*El manifiesto es el único archivo que tiene un nombre obligatorio. Los otros archivos pueden tener nombres diferentes, siempre y cuando su nombre o ubicación se especifiquen en el archivo de manifiesto.
En esta sección, agregarás el código necesario para controlar los datos, los cambios de estilo y la renderización de la visualización en tu archivo JavaScript.
Escribe la fuente de visualización
Paso 1: Descarga el archivo dscc.min.js de la Biblioteca de componentes de la comunidad de Data Studio y cópialo en tu directorio de trabajo.
Paso 2: Copia el siguiente código en un editor de texto y guárdalo como myVizSource.js en tu directorio de trabajo local.
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = 'blue';
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Prepara el archivo JavaScript final
Paso 3: Combina todo el código JavaScript necesario en un solo archivo. Para ello, copia el contenido de la biblioteca de ayuda para la visualización (dscc.min.js) y tu archivo myVizSource.js en un archivo nuevo llamado myViz.js. Ejecuta los siguientes comandos para concatenar los archivos. Repite este paso cada vez que actualices el código de visualización.
Secuencia de comandos de concatenación de Linux/macOS
cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.jsSecuencia de comandos de Windows
del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.jsEl archivo CSS define el diseño de tu visualización. Copia el siguiente código y guárdalo como myViz.css..
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}El archivo JSON de configuración de la visualización define los atributos de datos y estilo que admite y requiere tu visualización. La visualización que compilarás en este codelab admite una dimensión y una métrica, y requiere un elemento de estilo para seleccionar un color. Obtén más información sobre las dimensiones y métricas.
Copia el siguiente código y guárdalo como myViz.json.. Para obtener más información sobre las propiedades que puedes configurar, consulta la documentación de la referencia de configuración.
myViz.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "barDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "barMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "color",
"label": "Colors",
"elements": [
{
"type": "FONT_COLOR",
"id": "barColor",
"label": "Bar Color",
"defaultValue": "black"
}
]
}
]
}Paso 1: Crea un proyecto de Google Cloud Platform (GCP)
Paso 2: Crea un bucket de GCP. La clase de almacenamiento recomendada es Regional. Visita Precios de Cloud Storage para obtener detalles sobre los niveles gratuitos. Es poco probable que el almacenamiento de tu visualización genere costos para la clase de almacenamiento regional.
Paso 3: Anota el nombre o la ruta de acceso del bucket, comenzando por la sección que se encuentra después de Buckets/ . Data Studio lo llama "ID del componente" y se usará para identificarlo y, luego, implementarlo.
El archivo de manifiesto proporciona información sobre la ubicación y los recursos de tu visualización. Debe llamarse "manifest.json" y estar ubicado en el bucket creado en el paso anterior (el mismo que se usó para el ID del componente).
Copia el siguiente código en un editor de texto y guárdalo como manifest.json..
Para obtener más información sobre el manifiesto, consulta la documentación de referencia del manifiesto.
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"organization": "Data Studio Codelab",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [{
"id": "barChart",
"name": "Bar Chart",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"description": "Bar chart written in d3.js",
"resource": {
"js": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
"config": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
"css": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
}
}]
}
- Sube los archivos
manifest.json,myViz.js,myViz.jsonymyViz.cssal bucket de Google Cloud Storage con la interfaz web o la herramienta de línea de comandos gsutil. Repite este paso cada vez que actualices tu visualización.
Comandos de carga de gsutil
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKETPaso 1: Copia la URL del conjunto de datos de muestra de la visualización de la comunidad.
Paso 2: Visita Data Studio y haz clic en En blanco en Inicia un nuevo informe.
Paso 3: En la parte inferior derecha, haz clic en CREAR NUEVA FUENTE DE DATOS.
Paso 4: Selecciona el conector de Hojas de cálculo de Google.
Paso 5: En el campo URL, ingresa la URL de la Hoja de cálculo de Google del paso 1.
Paso 6: En la esquina superior derecha de la página, haz clic en CONECTAR.
Paso 7: En el encabezado de la fuente de datos, haz clic en Acceso a visualizaciones de la comunidad, selecciona ACTIVADO y haz clic en Guardar.
Paso 7: Haz clic en AGREGAR AL INFORME en el cuadro que aparece para agregar la fuente de datos a tu informe.
Paso 6: En la barra de herramientas, haz clic en el botón de visualización de la comunidad 
. Se abrirá un menú desplegable.
Paso 7: Pega el nombre de tu bucket con el prefijo gs:// (, por ejemplo, gs://community-viz-docs/myViz), en la entrada de texto de "Ruta de acceso al manifiesto", agrega barChart en "ID del componente" y haz clic en "AGREGAR". 
Tu visualización se dibujará automáticamente en el lienzo. El panel de propiedades del lado derecho debe reflejar los elementos de tu archivo myViz.json.
La visualización permite una dimensión y una métrica.
Se especificó un elemento de diseño, lo que renderizó un selector de color de fuente etiquetado como "Color de la barra". En el siguiente paso, usarás este selector para afectar la visualización.
En esta sección, usarás el elemento de estilo del selector de color para actualizar tu visualización.
Paso 1: Reemplaza el código de tu archivo myVizSource.js por el siguiente.
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = fillColor;
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Paso 2: Crea el archivo JavaScript combinado y, luego, vuelve a subir tus archivos de visualización a Google Cloud Storage.
Paso 3: Actualiza el informe de Data Studio en el que probaste tu visualización de la comunidad.
Deberías poder cambiar el color del rectángulo con el selector del menú de estilo.
En esta sección, actualizarás tu visualización para dibujar un gráfico de barras con los datos del conjunto de datos de muestra de la visualización de la comunidad. Nota: Data Studio devuelve un máximo de 2,500 filas de datos a la visualización.
Paso 1: Reemplaza el código de tu archivo myVizSource.js por el siguiente.
myVizSource.js
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function(row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function(row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Paso 2: Crea el archivo JavaScript combinado y, luego, vuelve a subir tus archivos de visualización a Google Cloud Storage.
Paso 3: Actualiza el informe de Data Studio en el que probaste tu visualización de la comunidad. Deberías tener un gráfico de barras con etiquetas generadas a partir de los datos de la hoja de cálculo de Google. Para cambiar el color de las barras, cambia el color seleccionado en el selector de estilo "Color de la barra".
En esta sección, actualizarás tu visualización para dibujar un gráfico de barras con los datos del conjunto de datos de muestra de la visualización de la comunidad.
Paso 1: Reemplaza el código de tu archivo myVizSource.js por el siguiente.
myVizSource.js
// create a title element
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function (row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function (row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
// use style selector from Data Studio
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
// Get the human-readable name of the metric and dimension
var metricName = data.fields['barMetric'][0].name;
var dimensionName = data.fields['barDimension'][0].name;
titleElement.innerText = metricName + ' by ' + dimensionName;
}
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });Paso 2: Crea el archivo JavaScript combinado y, luego, vuelve a subir tus archivos de visualización a Google Cloud Storage.
Paso 3: Actualiza el informe de Data Studio en el que probaste tu visualización de la comunidad. Deberías tener un gráfico de barras con un título generado a partir de los datos y con el diseño de tu archivo myViz.css.
¡Felicitaciones! Creaste una visualización de la comunidad en Data Studio. Con esto, llegaste al final de este codelab. Ahora, veamos qué pasos puedes seguir.
Extiende tu visualización
- Agrega interacciones a tu visualización
- Aprende a desarrollar una visualización de forma local
- Obtén más información sobre los elementos de estilo disponibles y agrega más estilos a tu visualización.
Haz más con las visualizaciones de la comunidad
- Revisa las referencias de la biblioteca auxiliar de DSCC, el manifiesto y el archivo de configuración.
- Envía tu visualización a nuestra Exhibición de visualizaciones comunitarias.
- Compila un conector de la comunidad para Data Studio.
Recursos adicionales
A continuación, encontrarás varios recursos a los que puedes acceder para analizar en profundidad el material que vimos en este codelab.
Tipo de recurso | Funciones para el usuario | Funciones para desarrolladores |
Documentación | ||
Novedades y actualizaciones | Regístrate en Data Studio > Configuración del usuario | |
Haz preguntas | ||
Videos | Disponible próximamente | |
Ejemplos |