A visualização de dados é uma ferramenta poderosa para transformar informações brutas em insights acionáveis. E quando essa ferramenta é combinada com a criatividade e a paixão por um tema específico, como a série "Stranger Things", o resultado pode ser surpreendente. Neste artigo, vamos explorar como criar um dashboard interativo inspirado no universo da série, utilizando WebDataRocks, CSS e Javascript. Prepare-se para entrar no mundo invertido da visualização de dados!
Por que "Stranger Things" e Visualização de Dados?
A série "Stranger Things", ambientada nos anos 80, conquistou fãs ao redor do mundo com sua atmosfera nostálgica, mistério e personagens cativantes. A estética da série, com suas cores vibrantes e elementos retrô, oferece um terreno fértil para projetos criativos. Unir essa estética à visualização de dados não só torna o processo mais divertido, como também pode atrair um público mais amplo para o mundo da análise de dados.
Neste tutorial, vamos utilizar um dataset com informações sobre os episódios de "Stranger Things" para criar um dashboard que permita explorar as avaliações de cada episódio, identificar os mais populares e até mesmo adicionar um toque especial com um efeito de "mundo invertido".
Tecnologias Utilizadas
Para construir nosso dashboard, utilizaremos as seguintes tecnologias:
- WebDataRocks: Uma biblioteca Javascript para criação de pivot tables e dashboards interativos.
- HTML: Para estruturar o layout da página.
- CSS: Para estilizar o dashboard e adicionar o efeito de "mundo invertido".
- Javascript: Para adicionar interatividade e controlar o efeito de "mundo invertido".
Passo a Passo: Criando o Dashboard "Stranger Things"
Passo 1: Configurando o Ambiente HTML
O primeiro passo é configurar o ambiente HTML básico. Precisamos adicionar as bibliotecas do WebDataRocks e definir um contêiner para o nosso dashboard.
Adicione as seguintes linhas no seu arquivo HTML:
<link id="wdr-theme" href="https://cdn.webdatarocks.com/latest/theme/stripedteal/webdatarocks.min.css" rel="stylesheet" /> <script src="https://cdn.webdatarocks.com/latest/webdatarocks.toolbar.min.js"></script> <script src="https://cdn.webdatarocks.com/latest/webdatarocks.js"></script>
Este código carrega os estilos e scripts necessários do WebDataRocks. O tema "stripedteal" é um dos temas built-in, mas você pode escolher outros ou até mesmo criar o seu próprio.
Em seguida, adicione o contêiner para o pivot table:
<div id="wrapper"> <div class="spotlight off"></div> <div id="wdr-component"></div> </div>
O `wrapper` e `spotlight` serão usados para o efeito de "mundo invertido" posteriormente.
Passo 2: Inicializando o Pivot Table com WebDataRocks
Agora, vamos inicializar o pivot table com WebDataRocks. Precisamos definir o contêiner, a largura, a altura e a fonte de dados.
Adicione o seguinte código Javascript:
var pivot = new WebDataRocks({
container: "wdr-component",
width: "100%",
height: 490,
report: {
dataSource: { data: getData() },
options: {
grid: { showTotals: "off", showGrandTotals: "off" }
}
}
});
Este código cria uma nova instância do WebDataRocks e define as opções básicas. A função `getData()` é responsável por fornecer os dados para o pivot table.
Passo 3: Definindo a Fonte de Dados (getData())
A função `getData()` deve retornar um array de objetos, onde cada objeto representa uma linha do seu dataset. No nosso caso, cada objeto representará um episódio de "Stranger Things".
Aqui está um exemplo de como a função `getData()` pode ser implementada:
function getData() {
return [
{
index: {caption: "index", type: "number"},
Episode_Number: {caption: "Episode Number", type: "number"},
Title: {caption: "Title", type: "string" },
Image_url: {caption: "Image_url", type: "string"},
Year: {caption: "Year", type: "string"},
Description: {caption: "Description", type: "string"},
Genre: {caption: "Genre", type: "string"},
Runtime: {caption: "Runtime", type: "string"},
Rating: {caption: "Rating", type: "number"}
},
// ... Adicione os outros episódios aqui
];
}
Lembre-se de preencher os dados com as informações reais dos episódios de "Stranger Things".
Passo 4: Personalizando o Pivot Table com o Slice Object
Para exibir apenas as informações mais relevantes, podemos usar o Slice Object para definir as linhas, colunas e medidas do pivot table.
Adicione o seguinte código ao objeto `report`:
slice: {
rows: [
{uniqueName: "Episode_Number", sort: "asc"},
{uniqueName: "Year"},
{uniqueName: "Title"},
{uniqueName: "Runtime"}
],
columns: [
{uniqueName: "Measures"}
],
measures: [
{uniqueName: "Rating" , aggregation: "sum"}
],
expands: {expandAll: true}
}
Este código define que as linhas do pivot table serão o número do episódio (ordenado crescentemente), o ano, o título e a duração. A coluna será a medida, que é a avaliação (Rating), agregada como a soma.
Passo 5: Adicionando Formatação Condicional
Para destacar os episódios mais bem avaliados, podemos usar formatação condicional.
Adicione o seguinte código ao objeto `report`:
conditions: [
{
formula: "#value >= 9",
measure: "Rating",
format: {
backgroundColor: "#007A6E",
color: "#FFFFFF",
fontFamily: "Arial",
fontSize: "12px"
}
}
]
Este código formata as células com avaliação igual ou superior a 9, definindo o fundo como verde escuro e o texto como branco.
Passo 6: Estilizando o Título com CSS
Para dar um toque "Stranger Things" ao nosso dashboard, vamos estilizar o título com a fonte e cores características da série.
Adicione o seguinte código HTML:
<h2 id="title">Stranger Things Episode Rating</h2>
E o seguinte código CSS:
body {
height: 100%;
padding: 30px;
margin: 0;
display: grid;
place-items: center;
background: #100d08;
}
h2 {
margin: 0 0 20px 0;
font-family: "Benguiat Bold", "Times New Roman", serif; /* Typical Stranger Things font */
font-size: 2.5rem;
font-weight: bold;
text-align: center;
margin-bottom: 2rem;
/* neon outlight */
color: #000;
text-shadow: 0 0 5px #ff0000;
-webkit-text-stroke: 2px #ff0000;
text-stroke: 2px #ff0000;
position: relative;
z-index: 500;
}
Certifique-se de ter a fonte "Benguiat Bold" instalada ou substitua por uma fonte similar. Este CSS define o fundo escuro, a fonte característica e o efeito de brilho vermelho.
Passo 7: Implementando o Efeito "Mundo Invertido"
Para adicionar o toque final, vamos implementar o efeito de "mundo invertido". Isso envolve adicionar um botão que inverte a tela e adiciona um efeito de spotlight.
Adicione o seguinte código HTML:
<button id="toggle-spotlight" title="Turn the light off">⬇️ Go to the Upside Down</button>
E o seguinte código CSS:
h2 {
font-family: "Benguiat Bold", serif;
font-size: 2.5rem;
color: #000;
text-shadow: 0 0 5px #ff0000;
-webkit-text-stroke: 2px #ff0000;
}
h2.upside-down {
transform: rotate(180deg);
text-shadow: 0 0 5px #ff4444;
-webkit-text-stroke: 2px #ff4444;
}
.spotlight {
position: absolute;
inset: 0;
background-image: radial-gradient(
circle at var(--clientX,50%) var(--clientY,50%),
transparent 6em,
black 8em
);
}
.spotlight.off {
opacity: 0;
}
#toggle-spotlight {
position: absolute; top: 1rem; left: 1rem;
background: #880808; color: #fff;
padding: 8px 14px; border-radius: 8px;
cursor: pointer;
}
Finalmente, adicione o seguinte código Javascript:
const toggleBtn = document.getElementById("toggle-spotlight");
const spotlight = document.querySelector(".spotlight");
const wrapper = document.getElementById("wrapper");
const title = document.getElementById("title");
const themeLink = document.getElementById("wdr-theme");
const defaultTheme = "https://cdn.webdatarocks.com/latest/theme/stripedteal/webdatarocks.min.css";
const lightBlueTheme = "https://cdn.webdatarocks.com/latest/theme/lightblue/webdatarocks.min.css";
let spotlightEnabled = false;
toggleBtn.addEventListener("click", () => {
spotlightEnabled = !spotlightEnabled;
spotlight.classList.toggle("off", !spotlightEnabled);
title.classList.toggle("upside-down", spotlightEnabled);
if (spotlightEnabled) {
themeLink.href = lightBlueTheme;
toggleBtn.textContent = "🚲 Go back";
toggleBtn.title = "Light up the grid";
} else {
themeLink.href = defaultTheme;
toggleBtn.textContent = "⬇️ Go to the Upside Down";
toggleBtn.title = "Turn the light off";
}
});
wrapper.addEventListener("mousemove", (e) => {
const rect = wrapper.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
wrapper.style.setProperty("--clientX", x + "px");
wrapper.style.setProperty("--clientY", y + "px");
});
Este código Javascript controla o botão, o spotlight, a inversão do título e a mudança de tema. Ele também adiciona o efeito de spotlight que segue o mouse.
Conclusão
Parabéns! Você criou um dashboard interativo inspirado em "Stranger Things" com WebDataRocks, CSS e Javascript. Este projeto demonstra como a visualização de dados pode ser combinada com a criatividade para criar experiências envolventes e informativas.
A tecnologia de visualização de dados está em constante evolução, com novas ferramentas e técnicas surgindo regularmente. No futuro, podemos esperar dashboards ainda mais interativos, personalizados e integrados com outras tecnologias, como inteligência artificial e realidade aumentada. A capacidade de transformar dados em insights acionáveis será cada vez mais valorizada, tornando a visualização de dados uma habilidade essencial para profissionais de diversas áreas.