O Google Data Studio permite que os usuários criem painéis interativos e em tempo real com visualizações de dados avançadas, sem custo financeiro. Os usuários podem buscar dados de várias fontes e criar relatórios no Data Studio, com recursos completos de edição e compartilhamento. Confira um exemplo de painel do Data Studio:
(Clique aqui para ver este exemplo de relatório no Data Studio)
O Data Studio oferece vários tipos de gráficos integrados, incluindo de linhas, de barras, de pizza e de dispersão. Com as visualizações da comunidade, é possível criar e usar suas próprias visualizações personalizadas em JavaScript no Data Studio. As visualizações da comunidade são criadas pela comunidade de desenvolvedores do Data Studio, e qualquer desenvolvedor pode criar uma. Você também pode compartilhar suas visualizações da comunidade com outras pessoas para que elas possam usar com os próprios dados.
O que você vai aprender
Neste codelab, você vai aprender a:
- Como funciona uma visualização da comunidade do Google Data Studio
- Como criar uma visualização da comunidade usando a biblioteca auxiliar ds-component
- Como integrar sua visualização da comunidade a um painel do Data Studio
O que é necessário
Para concluir este codelab, você vai precisar de:
- Acesso à Internet e a um navegador da Web
- Uma Conta do Google
- Acesso a um bucket de armazenamento do Google Cloud Platform
- Familiaridade com JavaScript
Por que você escolheu este codelab?
Como você planeja usar este codelab/tutorial?
Como você classificaria sua experiência com o Data Studio?
Qual opção descreve melhor sua formação?
Em quais bibliotecas de visualização JavaScript você tem interesse?
Vá para a próxima página e envie as informações da pesquisa.
Com as visualizações da comunidade do Data Studio, é possível criar e usar visualizações personalizadas em JavaScript que se integram aos seus painéis.
Neste codelab, você vai criar uma visualização da comunidade de gráfico de barras que aceita uma dimensão, uma métrica e um estilo de cor da barra.
Para criar uma visualização da comunidade, você precisa dos seguintes arquivos em um bucket de armazenamento do Google Cloud Platform, que será criado em uma etapa posterior.
Nome do arquivo | Tipo de arquivo | Finalidade |
manifest.json* | JSON | Fornece metadados sobre a visualização e a localização dos outros recursos. |
myViz.json | JSON | Oferece opções de configuração de dados e estilo para o painel "Propriedades". |
myViz.js | JavaScript | Fornece o código JavaScript necessário para mostrar a visualização. |
myViz.css (opcional) | CSS | Fornece estilo para a visualização. |
*O manifesto é o único arquivo que tem um nome obrigatório. Os outros arquivos podem ter nomes diferentes, desde que o nome/localização deles seja especificado no arquivo de manifesto.
Nesta seção, você vai adicionar ao arquivo JavaScript o código necessário para processar dados, mudanças de estilo e renderização de visualizações.
Escrever a origem da visualização
Etapa 1 : faça o download do arquivo dscc.min.js na biblioteca de componentes da comunidade do Data Studio e copie para seu diretório de trabalho.
Etapa 2 : copie o código a seguir em um editor de texto e salve-o como myVizSource.js no seu diretório de trabalho 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 });Preparar o arquivo JavaScript final
Etapa 3 : combine todo o JavaScript necessário em um único arquivo copiando o conteúdo da biblioteca auxiliar de visualização (dscc.min.js) e seu arquivo myVizSource.js em um novo arquivo chamado myViz.js. Execute os comandos a seguir para concatenar os arquivos. Repita essa etapa sempre que atualizar o código de visualização.
Script de concatenação do Linux/macOS
cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.jsScript do Windows
del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.jsO arquivo CSS define o estilo da visualização. Copie o código a seguir e salve-o como myViz.css.
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}O arquivo JSON de configuração da visualização define os atributos de dados e estilo aceitos e exigidos pela visualização. A visualização que você vai criar neste codelab aceita uma dimensão e uma métrica e exige um elemento de estilo para selecionar uma cor. Saiba mais sobre dimensões e métricas.
Copie o código a seguir e salve como myViz.json.. Para saber mais sobre as propriedades que podem ser configuradas, acesse a documentação de referência de configuração.
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"
}
]
}
]
}Etapa 1 : criar um projeto do Google Cloud Platform (GCP)
Etapa 2 : criar um bucket do GCP. A classe de armazenamento recomendada é Regional. Acesse Preços do Cloud Storage para mais detalhes sobre os níveis sem custo financeiro. É pouco provável que o armazenamento de visualização incorra em custos para a classe de armazenamento regional.
Etapa 3: anote o nome/caminho do bucket, começando pela seção depois de Buckets/ . O Data Studio chama isso de "ID do componente", que será usado para identificar e implantar.
O arquivo de manifesto fornece informações sobre o local e os recursos da visualização. Ele precisa ter o nome "manifest.json" e estar localizado no bucket criado na etapa anterior (o mesmo usado para o ID do componente).
Copie o código a seguir em um editor de texto e salve-o como manifest.json.
Para saber mais sobre o manifesto, consulte a documentação de referência do manifesto.
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"
}
}]
}
- Faça upload dos arquivos
manifest.json,myViz.js,myViz.jsonemyViz.csspara o bucket do Google Cloud Storage usando a interface da Web ou a ferramenta de linha de comando gsutil. Repita esse processo sempre que atualizar a visualização.
Comandos de upload da 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_BUCKETEtapa 1 : copie o URL do conjunto de dados de amostra da visualização da comunidade.
Etapa 2: acesse o Data Studio e clique em Em branco em Iniciar um novo relatório.
Etapa 3: na parte de baixo à direita, clique em CRIAR NOVA FONTE DE DADOS.
Etapa 4: selecione o conector Planilhas Google.
Etapa 5: no campo URL, insira o URL da planilha Google da etapa 1 acima.
Etapa 6: no canto superior direito da página, clique em CONECTAR.
Etapa 7: no cabeçalho da fonte de dados, clique em Acesso a visualizações da comunidade, selecione ATIVADO e clique em Salvar.
Etapa 7: clique em ADICIONAR AO RELATÓRIO na caixa que aparece para adicionar a fonte de dados ao relatório.
Etapa 6 : na barra de ferramentas, clique no botão de visualização da comunidade 
. Isso abre um menu suspenso.
Etapa 7: cole o nome do bucket com o prefixo gs:// (. Por exemplo: gs://community-viz-docs/myViz) na entrada de texto "Caminho do manifesto", adicione barChart em "ID do componente" e clique em "ADICIONAR". 
Sua visualização será criada automaticamente na tela. O painel de propriedades à direita precisa refletir os elementos no seu arquivo myViz.json.
A visualização permite uma dimensão e uma métrica.
Um elemento de estilo foi especificado, renderizando um seletor de cor da fonte chamado "Cor da barra". Na próxima etapa, você vai usar esse seletor para afetar a visualização.
Nesta seção, você vai usar o elemento de estilo do seletor de cores para atualizar sua visualização.
Etapa 1 : substitua o código no arquivo myVizSource.js pelo código abaixo.
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 });Etapa 2 : crie o arquivo JavaScript combinado e faça upload dos arquivos de visualização para o Google Cloud Storage.
Etapa 3 : atualize o relatório do Data Studio em que você testou a visualização de comunidade.
Você pode mudar a cor do retângulo usando o seletor no menu de estilo.
Nesta seção, você vai atualizar sua visualização para criar um gráfico de barras usando os dados do conjunto de dados de amostra de visualização da comunidade. Observação: o Data Studio retorna no máximo 2.500 linhas de dados para a visualização.
Etapa 1 : substitua o código no arquivo myVizSource.js pelo código abaixo.
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 });Etapa 2 : crie o arquivo JavaScript combinado e faça upload dos arquivos de visualização para o Google Cloud Storage.
Etapa 3 : atualize o relatório do Data Studio em que você testou a visualização de comunidade. Você vai ter um gráfico de barras com rótulos gerados com base nos dados da planilha Google. Para mudar a cor das barras, altere a cor selecionada no seletor Estilo Cor da barra.
Nesta seção, você vai atualizar sua visualização para criar um gráfico de barras usando os dados do conjunto de dados de amostra de visualização da comunidade.
Etapa 1 : substitua o código no arquivo myVizSource.js pelo código abaixo.
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 });Etapa 2 : crie o arquivo JavaScript combinado e faça upload dos arquivos de visualização para o Google Cloud Storage.
Etapa 3 : atualize o relatório do Data Studio em que você testou a visualização de comunidade. Você precisa ter um gráfico de barras com um título gerado com base nos dados e estilizado usando o arquivo myViz.css.
Parabéns, você criou uma visualização da comunidade no Data Studio! Isso conclui este codelab. Agora, vamos ver quais são as próximas etapas.
Ampliar sua visualização
- Adicionar interações à visualização
- Aprenda a desenvolver uma visualização localmente
- Saiba mais sobre os elementos de estilo disponíveis e adicione mais estilo à sua visualização.
Faça mais com as visualizações da comunidade
- Revise as referências da biblioteca auxiliar dscc, do manifesto e do arquivo de configuração.
- Envie sua visualização para a Galeria de visualizações da comunidade.
- Crie um conector da comunidade para o Data Studio.
Outros recursos
Confira abaixo diversos recursos que você pode acessar para se aprofundar no assunto deste codelab.
Tipo de recurso | Recursos do usuário | Recursos para desenvolvedores |
Documentação | ||
Notícias e atualizações | Inscreva-se no Data Studio > Configurações do usuário | |
Fazer perguntas | ||
Vídeos | Em breve! | |
Exemplos |