Faça um visual personalizado para o LuckyTemplates usando o Deneb

Quero falar sobre o novo visual personalizado do Deneb que foi lançado recentemente para o LuckyTemplates. Isso fornece uma interface para a linguagem Vega-Lite a ser usada para criar um visual personalizado interativo para o LuckyTemplates.

A linguagem Vega-Lite é baseada na sintaxe JSON. É mais fácil de implementar e entender do que linguagens de programação de nível inferior. Além disso, o autor Daniel Marsh-Patrick incluiu alguns modelos para acelerar o processo de design.

Acho que esse visual será enorme, pois fornece uma experiência de código completa e é extremamente personalizável. Gostaria de aproveitar esta oportunidade para mostrar alguns exemplos simples de visuais Deneb Vega-Lite e compará-los com os visuais padrão do LuckyTemplates. Você pode assistir ao vídeo completo deste tutorial na parte inferior deste blog.

Índice

• Como usar o Deneb como um visual personalizado para o LuckyTemplates
• Pontos gerais para aprender sobre Deneb
• Criando um gráfico de barras com Deneb
• Fazendo um gráfico de linha com Deneb
• Criando um gráfico de área com Deneb
• Usando um gráfico de colunas sobrepostas com Deneb
• Produzindo um gráfico de anéis com Deneb
• Conclusão

Como usar o Deneb como um visual personalizado para o LuckyTemplates

Deneb é uma interface que permite que um visual seja totalmente codificado usando a sintaxe JSON de acordo com a linguagem Vega-Lite. Esta apresentação não pretende ser uma introdução à linguagem Vega-Lite, mas sim uma pequena demonstração de como a linguagem permite visuais que são como alguns dos visuais padrão do LuckyTemplates e podem ser totalmente personalizados para se adequar ao seu cenário.

Os visuais básicos desenvolvidos nesta apresentação aproveitam alguns dos modelos de exemplo disponíveis na interface do Deneb. Os visuais personalizados são exemplos introdutórios do que pode ser realizado com um pequeno esforço no Vega-Lite por meio de modificações de tentativa e erro de outros exemplos que podem ser facilmente encontrados online.

Aqui está a página inicial do Deneb. Você pode encontrar algum material de referência aqui .

Há uma galeria fornecida no site Vega-Lite GitHub que mostra exemplos de coisas que podem ser criadas com o Vega-Lite.

Aqui está outro exemplo de alguns cartões KPI personalizados que podem ser criados com o visual personalizado Deneb.

Pontos gerais para aprender sobre Deneb

Aqui estão alguns dos pontos gerais que aprendi sobre o Vega-Lite durante minhas investigações iniciais. Os dados estão vinculados a uma marca. Existem inúmeras marcas disponíveis no Vega-Lite, incluindo barra, linha, arco, ponto, texto e muitos outros. Uma marca tem codificação. Por exemplo, a marca de texto tem muitas codificações disponíveis, incluindo alinhamento, fonte, tamanho, peso e cor.

Várias marcas podem ser combinadas para criar uma experiência visual composta, incluindo camada (várias marcas se sobrepondo e compartilhando o mesmo ponto de ancoragem ou eixo), concatenação (várias marcas dispostas horizontal ou verticalmente) ou faceta (pequenos múltiplos disponíveis em muitos aplicativos do LuckyTemplates visuais em que uma série de gráficos semelhantes são usados ​​para exibir subconjuntos dos mesmos dados, facilitando a comparação entre os subconjuntos).

Criando um gráfico de barras com Deneb

Agora vamos dar uma olhada em como um visual personalizado para o LuckyTemplates é criado usando modelos do Deneb e como eles se comparam com os visuais padrão do LuckyTemplates.

Neste exemplo, adicionei um gráfico de barras padrão do LuckyTemplates para mostrar o total de vendas por canal no lado esquerdo. Vamos construir algo semelhante usando Deneb e Vega-Lite.

Adicionaremos o visual Deneb no lado direito.

A primeira coisa que precisamos fazer é adicionar nossos dados, então vamos adicionar nossos canais e vendas totais .

Apenas por diversão, vamos ativar o Shadow .

Em seguida, escolhemos Editar .

Selecionaremos os modelos simples de gráfico de barras fornecidos na interface. Para a categoria, escolhemos Canal e para a medida, Vendas totais .

Assim que clicarmos em Create , podemos ver nosso visual Deneb.

Podemos ver que há muitas coisas semelhantes entre o LuckyTemplates e o Deneb. Uma coisa que não é semelhante imediatamente é que temos os rótulos de dados mostrados no visual do LuckyTemplates. Para o visual Deneb, esses rótulos de dados podem ser facilmente adicionados ao visual, o que faremos adicionando uma camada diferente.

Assim que clicarmos em Editar no visual do Deneb, veremos uma única marca aqui.

Vou pegar um trecho de código para adicionar os rótulos de dados e substituir o código da marca única por duas marcas.

Assim que executarmos isso, teremos rótulos de dados.

A segunda coisa que podemos fazer é formatar esses rótulos de dados. Mais uma vez, tenho um bloco de cotação aqui que posso colocar em vez de apenas usar a codificação simples para o Total Sales .

A outra coisa muito legal sobre Deneb e Vega-lite é que podemos facilmente alterar um gráfico de barras para um gráfico de colunas. Vamos clicar em Editar novamente. Tudo o que precisamos fazer é inverter o X e o Y.

Obviamente, há algum trabalho a ser feito e ajustes são necessários, mas eu queria mostrar como as coisas podem ser facilmente alteradas no Vega-Lite.

Fazendo um gráfico de linha com Deneb

Em seguida, adicionei um gráfico de linha padrão do LuckyTemplates que mostra Total Sales by Date . Vamos construir algo semelhante usando o Deneb Vega-lite. Vamos adicionar um visual Deneb, adicionar nossa Data e Total de vendas .

Vamos escolher um gráfico de linha com uma faixa de intervalo, escolha Data para nosso eixo X e escolha Total de vendas para os próximos três valores.

Aqui está o visual base resultante para Deneb. Você pode ver que há muitas semelhanças entre os dois. Existem algumas diferenças, como o eixo X sendo exibido numericamente no visual do Deneb.

Há algo que podemos fazer para corrigir isso facilmente. Vamos virar para Deneb e alterar a codificação da data X para temporal .

A segunda diferença é o título. Vamos adicionar um título ao visual Deneb. Editaremos o código mais uma vez, adicionaremos o bloco de título e formataremos o JSON.

E aqui está o nosso título. Temos controle total sobre a fonte, tamanho, cor do título, etc.

Criando um gráfico de área com Deneb

Vamos tentar um gráfico de área também. Adicionei um gráfico de área padrão do LuckyTemplates mostrando vendas totais cumulativas por data .

Agora vamos construir algo semelhante usando Deneb Vega-Lite. Vamos inserir o visual Deneb e, em seguida, adicionar as medidas Date e Cumulative Total Sales .

Vamos obter o bloco de código para um gráfico de área autônomo e aplicá-lo.

O gráfico de área na parte inferior é o resultado.

Um dos recursos adicionais do Vega-Lite é que você pode usar pincéis . Essa é a palavra que eles usam para selecionar um intervalo específico em seu gráfico.

Uma das coisas realmente legais é que você pode usar pincéis em visuais vinculados. Vamos criar um novo Visual Deneb, adicionar os mesmos dados de Data e Vendas cumulativas . Clique em Editar no visual e escolha Especificação vazia .

Copie o código para gráficos duplos vinculados por um pincel retangular. Em seguida, cole e execute o código.

Agora temos nosso visual primário, onde podemos usar um pincel para exibir um intervalo selecionado do primeiro em nosso visual secundário.

Usando um gráfico de colunas sobrepostas com Deneb

Aqui está um exemplo de algo que venho procurando há algum tempo. Este é um gráfico de coluna sobreposto ou gráfico de marcadores de coluna que mostra uma relação entre dois valores para a mesma categoria. Eu criei isso em Deneb também.

Adicionei algum código do Notepad ++ para tornar a coluna sobreposta visual.

O que temos aqui é um visual de quatro camadas composto de quatro camadas sobrepostas: uma para a coluna traseira, uma para a coluna frontal, uma para o rótulo traseiro e uma para o rótulo frontal. Podemos ver que o gráfico responde com as seleções feitas no LuckyTemplates e também se ajusta de acordo.

Produzindo um gráfico de anéis com Deneb

Outra coisa que venho procurando há algum tempo é um gráfico de anéis semelhante aos anéis de atividade de um relógio da Apple. Eu criei algo assim para o usando Python, mas não foi tão bom quanto eu gostaria que fosse.

Tentei fazer a mesma coisa em Deneb e tive muito sucesso. Neste visual Deneb, temos um visual de nove camadas onde adicionamos medidas separadas para os anéis 1, 2 e 3, valores para os anéis 1, 2 e 3, cores para os anéis 1, 2 e 3 e categorias para os anéis 1, 2 e 3.

Vamos dar uma olhada no código que usei aqui. Ele usa um conceito no Vega-Lite chamado Transform and Params para estender os dados que são disponibilizados para as diversas marcas. Em seguida, coloquei nove marcas umas sobre as outras usando o mesmo eixo para criar o gráfico de anéis. Isso é totalmente interativo com as dicas de ferramentas do LuckyTemplates.

Outra coisa interessante é que você pode usar o Visual Studio Code para desenvolver seus visuais Vega-Lite. Primeiro, você precisará de uma extensão para visualizar o código Vega-Lite. Atualmente, estou usando a extensão Vega Viewer .

Então você precisa configurar um arquivo técnico com a extensão vl.json. Basta clicar com o botão direito do mouse no código para visualizar o Vega Graph .

Como o visual do Vega-Lite é uma experiência de código completa, na verdade acho o ambiente do Visual Studio Code muito útil em meu desenvolvimento.

Conclusão

Espero que você ache este tutorial esclarecedor e que ele o faça explorar as possibilidades de usar o Deneb e o Vega-Lite para desenvolver visualizações além do que está atualmente disponível no LuckyTemplates.

Se você gostou do visual personalizado para o conteúdo do LuckyTemplates abordado neste tutorial específico, não se esqueça de se inscrever no canal de TV LuckyTemplates .

Temos uma grande quantidade de conteúdo sendo publicado o tempo todo, meu e de vários criadores de conteúdo, todos dedicados a melhorar a maneira como você usa o LuckyTemplates e a Power Platform.

grego