Dev

.github/workflows/deploy-pages.yml

@@ -0,0 +1,35 @@
+name: Deploy GitHub Pages
+
+on:
+  push:
+    branches: [master]
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build-deploy:
+    runs-on: ubuntu-latest
+    environment:
+      name: github-pages
+      url: ${{ steps.deploy.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: npm
+      - run: npm ci
+      - run: npm test
+      - run: npm run build
+      - uses: actions/upload-pages-artifact@v3
+        with:
+          path: dist
+      - id: deploy
+        uses: actions/deploy-pages@v4

.github/workflows/test.yml

@@ -0,0 +1,21 @@
+name: Test
+
+on:
+  push:
+    branches: [feature/new_structure, dev]
+  pull_request:
+    branches: [dev, master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "22"
+          cache: npm
+      - run: npm ci
+      - run: npm run typecheck
+      - run: npm test
+      - run: npm run build

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+dist/
+*.log
+.DS_Store

README.md

@@ -1,33 +1,53 @@
-# Eleições Municipais
+# Panorama Eleitoral — newfront
 
-### Description
+Versão em TypeScript + D3 v7 do site de visualização das eleições municipais do Rio de Janeiro.
 
-This project was started during a visualization course on my master.
-The main goal was to show the evolution in the political scenario along the past
-five elections on all **brazilian cities** with the help of the nice javascript library [d3.js](https://d3js.org/) and jQuery.
+## Desenvolvimento
 
-This current release only shows the State of Rio de Janeiro on a choropleth chart.
-It still is in early development, with the district chamber chart(sankey chart) fixed only at the capital of state.
+**Desenvolvimento rápido** (Vite + HMR, sem build prévio):
 
-The main data source is the Tribunal Superior Eleitoral [TSE](http://www.tse.jus.br/eleicoes/estatisticas/repositorio-de-dados-eleitorais), the major authority in brazilian electoral system.
+```bash
+npm install
+npm run dev       # http://localhost:4173 — recarrega ao salvar src/
+```
 
-The other data were gathered on:<br />
-[Wikipedia](https://pt.wikipedia.org/wiki/Lista_de_partidos_pol%C3%ADticos_no_Brasil)<br />
-[IBGE](http://www.ibge.gov.br/home/)
+**Build de produção** (artefato em `dist/` para GitHub Pages):
 
-<p align="center">
-  Visualização:<br/>
-  <a href="http://azbr.github.io" > Eleições Municipais</a>
-</p>
+```bash
+npm run build
+npm run preview   # confere o dist/ antes do deploy
+```
 
+Outros comandos:
 
-### Authors
-**<center>Glauco Azevedo</center>**
+```bash
+npm test
+npm run typecheck
+```
 
----
+O `npm run dev` usa [Vite](https://vite.dev/) (esbuild interno + HMR). Turbopack é específico do Next.js e não se aplica a este site estático.
 
-### Next Releases 
+## Estrutura
 
-- Update scripts to the d3 latest
-- Implement better code standards
-- Update data sources with more recent data sets
+| Pasta | Conteúdo |
+|-------|----------|
+| `index.html` | Entrada Vite (dev) |
+| `src/` | TypeScript (mapa, Sankey, dados) |
+| `public/` | Estáticos (CSS, ícones) |
+| `data/` | JSON/CSV eleitorais (servidos em `/data/` no dev e copiados para `dist/data/` no build) |
+| `dist/` | Artefato de deploy (gitignored) |
+| `tests/` | Testes unitários |
+
+## Deploy
+
+Push em `master` dispara o workflow GitHub Actions que executa testes, build e publica `dist/` no GitHub Pages.
+
+## Comportamento
+
+- Mapa coroplético das prefeituras (2004–2016)
+- Clique em município: Sankey da câmara apenas para **Rio de Janeiro**
+- Outros municípios exibem mensagem até integração com pipeline TSE
+
+## Legado
+
+Os arquivos `mapa.js`, `sankey.js`, `camara.js` e `index.html` na raiz do repositório (site antigo) permanecem como referência até o merge em `master`.

index.html

@@ -1,27 +1,32 @@
 <!DOCTYPE html>
-<html>
+<html lang="pt-BR">
 
 <head>
     <meta charset="utf-8" />
-    <link href="estilos.css" rel="stylesheet" />
-    <script src="https://d3js.org/d3.v3.js" type="text/javascript"></script>
-    <script src="https://d3js.org/d3-queue.v3.min.js" type="text/javascript"></script>
-    <script src="https://d3js.org/topojson.v1.min.js"></script>
-    <script src="mapa.js" type="text/javascript"></script>
-    <script src="sankey.js" type="text/javascript"></script>
-    <script src="camara.js" type="text/javascript"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Panorama Eleitoral — Municípios do RJ</title>
+    <link href="/styles/main.css" rel="stylesheet" />
 </head>
 
 <body>
     <div id="pagediv">
-        <div id="topBar">
-            <h1>Panorama Eleitoral - Municípios do RJ</h1>
-            <p> Autoria: Glauco Azevedo <a href="http://github.com/azbr"><img id="git" src="github-mark.svg"/></a> - FGV/EMAp - Rio de Janeiro, Dez/2016 </p>
-            <p>Essa visualização foi feita utilizando a biblioteca d3.js, com implementação própria do mapa interativo e do sankeychart.</p>
-        </div>
-        <div id="centerblock">
+        <header id="topBar">
+            <h1>Panorama Eleitoral — Municípios do RJ</h1>
+            <p>
+                Autoria: Glauco Azevedo
+                <a href="https://github.com/azbr" aria-label="Perfil no GitHub">
+                    <img id="git" src="/github-mark.svg" alt="" width="16" height="16" />
+                </a>
+                — FGV/EMAp — Rio de Janeiro
+            </p>
+            <p>
+                Visualização com <strong>D3.js 7</strong>: mapa coroplético das prefeituras e diagrama Sankey da câmara municipal.
+            </p>
+        </header>
 
-            <select id="uf-option">
+        <main id="centerblock">
+            <label for="uf-option" class="visually-hidden">Estado</label>
+            <select id="uf-option" aria-label="Unidade federativa">
                 <option value="AC" disabled>Acre</option>
                 <option value="AL" disabled>Alagoas</option>
                 <option value="AP" disabled>Amapá</option>
@@ -51,23 +56,26 @@ <h1>Panorama Eleitoral - Municípios do RJ</h1>
                 <option value="TO" disabled>Tocantins</option>
             </select>
 
-            <div id="spacer1" class="row-spacer"></div>
-            <div id="mapas">
-                <svg id="mainChart"></svg>
-                <div id="timescroll">
-                    <button id="previous">Anterior</button>
-                    <div id="ano-atual"></div>
-                    <button id="next">Próximo</button>
+            <section id="mapas" aria-labelledby="mapa-titulo">
+                <h2 id="mapa-titulo" class="visually-hidden">Mapa de prefeituras</h2>
+                <svg id="mainChart" role="img" aria-label="Mapa coroplético dos municípios do Rio de Janeiro"></svg>
+                <div id="timescroll" role="group" aria-label="Navegação por ano eleitoral">
+                    <button type="button" id="previous" aria-label="Ano anterior">Anterior</button>
+                    <div id="ano-atual" aria-live="polite" aria-atomic="true"></div>
+                    <button type="button" id="next" aria-label="Próximo ano">Próximo</button>
                 </div>
-            </div>
-            <div id="spacer1" class="row-spacer"></div>
-            <div id="sankey">
-                <svg id="sankeyChart"></svg>
-            </div>
-            <div id="spacer1" class="row-spacer"></div>
-            <div id="lista-features">
-            </div>
-        </div>
+            </section>
+
+            <section id="sankey" aria-labelledby="sankey-titulo">
+                <h2 id="sankey-titulo" class="visually-hidden">Composição da câmara municipal</h2>
+                <p id="sankey-message" class="sankey-message sankey-message--hint"></p>
+                <svg id="sankeyChart" role="img" aria-label="Diagrama Sankey da câmara municipal" aria-hidden="true"></svg>
+            </section>
+
+            <aside id="lista-features" aria-label="Legenda e instruções"></aside>
+        </main>
     </div>
+    <script type="module" src="/src/main.ts"></script>
 </body>
+
 </html>