--- name: mira-chart-race description: >- Cria um slide de gráfico de corrida no Mira: série temporal animada que corre no tempo, toca uma vez e para no fim. Dois modos: "bars" (barras que trocam de posição no ranking) e "lines" (linhas desenhadas com o rótulo perseguindo a ponta); dados em CSV largo embutidos, roda por file:// offline, gera section em D3 v7 no tema do Mira. Use SEMPRE que o usuário disser /mira-chart-race, gráfico de corrida, corrida de barras, bar chart race, racing chart, gráfico animado no tempo, dados temporais animados, ranking ao longo do tempo, barras que mudam de posição, linhas crescendo no tempo. Para gráfico estático use /mira-chart; para enquete ao vivo use /mira-survey. --- # Skill: Mira Chart Race, dados temporais viram corrida animada Pega uma série temporal (vários períodos, várias séries) e devolve um slide onde os dados **correm no tempo**: o período avança, as barras trocam de posição (ou as linhas vão sendo desenhadas) e, ao chegar no fim, para no quadro final (não reinicia). É o gráfico animado de "X ao longo do tempo" (linguagens mais usadas, fatia de mercado, população, etc.). > **Artefato de referência:** `decks/teste-chart-race/index.html` tem os dois modos com dados de exemplo. O motor abaixo é o mesmo desse arquivo. ## Regras herdadas (obrigatórias) 1. **Idioma**: siga `agents/_shared/idioma.md`. Todo texto visível revisado, acentuação 100% correta. Nenhum travessão. 2. **Cores**: laranja da marca `#FF904D` como primeira cor da paleta; tema `mira-dark`. Nunca roxo como cor principal. 3. **D3 v7**: o motor usa o `d3` global que já vem no `` do deck. Consulte `agents/mira-animator/references/diretrizes-d3.md` se precisar ajustar. 4. **Toca uma vez e para**: entra animando e **para no último período**, sem reiniciar. É uma exceção consciente à regra zero do Mira (loop perpétuo), escolhida para esta skill por ser um gráfico de apresentação. 5. **Output**: salve em `decks//`. Nunca escreva em fontes vinculadas. ## O modelo mental O slide recebe **um CSV no formato largo** e transforma cada período num quadro da animação. Sem servidor nem `fetch`: os dados entram **embutidos inline** no ` ``` ## Princípios de design 1. **O período é o herói.** O relógio (texto grande no canto) mostra "onde no tempo estamos" e prende o olhar. 2. **A virada conta a história.** Prepare os dados para que a ultrapassagem importante apareça (quem assume a liderança, quando uma série dispara). Em `bars` é o reordenamento; em `lines`, o cruzamento. 3. **Cores estáveis por série.** Cada série mantém a mesma cor do início ao fim (paleta determinística pela ordem das colunas). Laranja da marca primeiro. 4. **Leveza.** Eixos discretos, poucos ticks, números em formato humano (`d3.format('~s')`: 1.2k, não 1200). Sem grade pesada. 5. **Ritmo legível.** `stepMs` entre ~1000 e ~2000 ms por período é confortável; séries muito longas pedem passo mais curto. ## Checklist - [ ] CSV no formato largo, 1ª coluna = período, linhas em ordem cronológica. - [ ] Modo escolhido (`bars` padrão; `lines` para tendência de poucas séries) e parâmetros definidos (`topN`, `unit`, `decimals`, ritmo). - [ ] Dados **embutidos inline** no `