Feature/new structure

README.md

@@ -4,23 +4,37 @@ Versão em TypeScript + D3 v7 do site de visualização das eleições municipai
 
 ## Desenvolvimento
 
+**Desenvolvimento rápido** (Vite + HMR, sem build prévio):
+
 ```bash
 npm install
-npm test          # Vitest
+npm run dev       # http://localhost:4173 — recarrega ao salvar src/
+```
+
+**Build de produção** (artefato em `dist/` para GitHub Pages):
+
+```bash
+npm run build
+npm run preview   # confere o dist/ antes do deploy
+```
+
+Outros comandos:
+
+```bash
+npm test
 npm run typecheck
-npm run build     # gera dist/
-npm run preview   # serve dist/ em http://localhost:4173
 ```
 
-Abra `dist/index.html` via servidor estático (o `preview` ou extensão Live Server) para carregar `data/` corretamente.
+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.
 
 ## Estrutura
 
 | Pasta | Conteúdo |
 |-------|----------|
+| `index.html` | Entrada Vite (dev) |
 | `src/` | TypeScript (mapa, Sankey, dados) |
-| `public/` | HTML e CSS servidos em produção |
-| `data/` | JSON/CSV eleitorais (legado) |
+| `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 |
 
@@ -36,4 +50,4 @@ Push em `master` dispara o workflow GitHub Actions que executa testes, build e p
 
 ## Legado
 
-Os arquivos `mapa.js`, `sankey.js`, `camara.js` e `index.html` na raiz permanecem como referência até o merge em `dev`/`master`.
+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>