Sistemas de Visualização de Dados e Conhecimento | Mestrado em Inteligência Artificial | Universidade do Minho | 2025/26

Modalidade: Avaliação 1 (individual) · Entrega: 30 Abril 2026

Visualização interativa em D3.js v7 que comunica uma única ideia central sobre os dados energéticos da Our World in Data: a transição energética está em curso, mas é assimétrica. O solar e o vento dispararam na eletricidade, mas os fósseis ainda dominam o consumo total de energia primária.

• Cross-highlight bidirecional entre 3 dos 5 charts via atributo data-iso partilhado — mapa↔lollipop↔dumbbell sincronizados em tempo real.
• Compressão de dados de 15,5 MB → 16 KB (×970) via 5 datasets agregados gerados em notebook reproduzível, otimizados para D3.
• 5 visualizações distintas numa página única — choropleth, stacked area, multi-line, lollipop, dumbbell — partilhando tooltip e paleta consistente.
• Mapeamento UN M49 ↔ ISO 3166-1 injectado no TopoJSON com pycountry: 174/177 geometrias com match.

A história tem dois lados que normalmente são contados em separado: o otimista (solar/vento na eletricidade — crescimento exponencial) e o realista (consumo de energia total, onde transporte e indústria continuam a queimar petróleo e gás diretamente). Esta visualização junta os dois.

🖼️ Screenshots: docs/ (screenshot-overview.png, screenshot-chart1-map.png, screenshot-chart2.png, screenshot-chart3.png, screenshot-chart4.png, screenshot-chart5.png)

• Choropleth interativo (Chart 1) — d3.geoNaturalEarth1 + TopoJSON, switcher pill-style entre 3 métricas (low-carbon 2023, fóssil 2023, variação 2010→2023 com escala divergente verde↔vermelho), tooltip mostra os 3 valores em simultâneo.
• Stacked area (Chart 2) — d3.stack + d3.curveMonotoneX, 9 séries empilhadas (carvão/petróleo/gás cinzentos, low-carbon coloridos), eixo temporal 1965–2024.
• Multi-line (Chart 3) — 4 séries com tonalidades par/ímpar: cores fortes para eletricidade, pálidas para energia primária. O gap visível entre as duas tonalidades verdes é o ponto editorial.
• Lollipop horizontal (Chart 4) — Top 15 países por % low-carbon, hover sincroniza com mapa.
• Dumbbell (Chart 5) — comparação 2010 vs 2023 da quota fóssil em 15 países (≥ 5 M habitantes).

• Paleta consistente — fósseis sempre cinzentos, low-carbon sempre verde-amarelo, fóssil agregado sempre vermelho. Lê-se 5 charts sem reaprender o código de cores.
• Tonalidades par/ímpar no chart 3 comunicam hierarquia conceptual (eletricidade ≠ energia total) sem eixos secundários.
• Cross-highlight sincroniza mapa ↔ lollipop ↔ dumbbell via atributo data-iso partilhado.
• Hero stats dão os 4 números-chave antes de qualquer chart carregar.
• Switcher pill-style para a métrica do mapa — uma região do ecrã muda sem refrescar.
• Padrão function() { return chart; } à la Bostock — reusable charts com getters/setters para todas as opções.
• Responsividade via viewBox + preserveAspectRatio e re-render em resize (debounce 200 ms).
• Tooltip única partilhada entre charts (js/tooltip.js).

• Dataset: Our World in Data — Energy · CC BY 4.0
• Ficheiro bruto: data/owid-energy-data.csv — 15,5 MB · 23 377 linhas × 130 colunas · 1900–2025
• Geometria do mundo: data/countries-110m.json — TopoJSON de world-atlas · CC0

Todo o processamento está documentado em scripts/eda.ipynb. A partir do CSV bruto, o notebook produz 5 datasets agregados (≤ 80 linhas cada) otimizados para D3 — passamos a carregar ≈ 16 KB em vez de 15,5 MB.

1. Países reais vs agregados — a coluna country mistura países com iso_code (220) e agregados sem código (World, Africa, EU (Ember)…). Filtra-se por iso_code.notna() & iso_code != 'OWID_WRL' para comparações entre países.
2. Recorte temporal — séries com cobertura completa só a partir de 1965 (primária) ou 1985 (eletricidade).
3. NaN → 0 para solar/vento/biofuel nos anos pré-tecnologia (não é missing, é ainda não existia).
4. Renomeação — 9 colunas *_share_energy ganham nomes humanos (coal_share_energy → Coal).
5. Colunas derivadas — solar+wind (eletricidade vs primária separadas), fossil_change_2010_2023.
6. Filtro de população — dumbbell mantém só países ≥ 5 M habitantes (evita micro-estados).
7. M49 → ISO3 no TopoJSON — world-atlas usa códigos UN M49 (124 = Canadá); pycountry injecta iso_a3 em cada geometria. 174/177 geometrias com match.
8. Arredondamento a 2 casas decimais nos CSVs finais.

.
├── index.html                              # Página principal
├── README.md
│
├── data/
│   ├── owid-energy-data.csv                # Dataset bruto (15,5 MB)
│   ├── countries_2023.csv                  # Agregado · Chart 1 (mapa)
│   ├── countries-110m.json                 # TopoJSON do mundo · Chart 1
│   ├── world_energy_mix.csv                # Agregado · Chart 2
│   ├── shares_over_time.csv                # Agregado · Chart 3
│   ├── top_countries_lowcarbon_2023.csv    # Agregado · Chart 4
│   ├── fossil_movers_2010_2023.csv         # Agregado · Chart 5
│   └── schema.json                         # Metadados
│
├── scripts/
│   └── eda.ipynb                           # Pipeline EDA + pré-processamento
│
├── css/
│   ├── charts.css                          # Estilos dos gráficos
│   └── style.css                           # Layout da página
│
├── js/
│   ├── tooltip.js                          # Tooltip partilhada
│   ├── dataloader.js                       # Helper loadCSV com type coercion
│   ├── main.js                             # Orquestração: carrega, transforma, renderiza
│   ├── choropleth.js                       # Chart 1 (mapa)
│   ├── areachart.js                        # Chart 2 (stacked area)
│   ├── linechart.js                        # Chart 3 (multi-line)
│   ├── lollipop.js                         # Chart 4
│   └── dumbbell.js                         # Chart 5
│
└── docs/                                   # Screenshots dos charts

• Python 3.11+ com Jupyter (para regenerar os CSVs)
• Qualquer servidor HTTP local (D3 precisa de um — file:// esbarra em CORS)

1. Clonar o repositório:

   git clone <url-do-repo>
   cd <repo>

2. Servir a página:

   python3 -m http.server 8000
   # abrir http://localhost:8000

   Alternativas: npx serve . ou extensão Live Server no VS Code.

3. Regenerar os CSVs do zero (opcional):

   jupyter notebook scripts/eda.ipynb
   # correr todas as células → regenera os 5 CSVs em data/

Trabalho académico individual no âmbito do Mestrado em Inteligência Artificial da Universidade do Minho.

• Our World in Data — Energy · CC BY 4.0
• world-atlas (TopoJSON) · CC0
• Módulos js/*.js desenvolvidos a partir do material das aulas práticas e generalizados como biblioteca reutilizável.