Hugging Face's logo

Spaces:
paulosena
/
mortalidade
Running

App Files Community
paulosena commited on
Commit
b69fc2a
·
verified ·
1 Parent(s): 6b47848

crie uma visualização para esses dados: Capítulo CID-10 2018 2019 2020 2021 2022 2023 Total I. Algumas doenças infecciosas e parasitárias 9 5 8 54 15 13 104 II. Neoplasias (tumores) 29 30 36 25 32 35 187 III. Doenças sangue órgãos hemat e transt imunitár - 1 1 1 - - 3 IV. Doenças endócrinas nutricionais e metabólicas 10 5 12 18 12 9 66 V. Transtornos mentais e comportamentais 1 2 - - 2 - 5 VI. Doenças do sistema nervoso 3 8 5 6 7 7 36 IX. Doenças do aparelho circulatório 50 35 55 36 39 45 260 X. Doenças do aparelho respiratório 21 37 23 22 17 31 151 XI. Doenças do aparelho digestivo 9 11 10 15 17 20 82 XII. Doenças da pele e do tecido subcutâneo 1 1 1 1 1 2 7 XIII.Doenças sist osteomuscular e tec conjuntivo - - 3 - - 2 5 XIV. Doenças do aparelho geniturinário 5 5 5 4 2 9 30 XV. Gravidez parto e puerpério - - - 1 - - 1 XVI. Algumas afec originadas no período perinatal 1 4 - 2 1 - 8 XVII.Malf cong deformid e anomalias cromossômicas 1 - - 1 - - 2 XVIII.Sint sinais e achad anorm ex clín e laborat 6 9 - 8 8 19 50 XX. Causas externas de morbidade e mortalidade 9 10 8 17 8 12 64 Total 155 163 167 211 161 204 1061 Fonte: MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade - SIM Período:2018-2023 Causa mal definidas 2018 2019 2020 2021 2022 2023 Total Sint sinais e achad anorm,exc morte súbita infânci 6 9 - 8 8 19 50 Doenças do aparelho circulatório, mal definidas 2 2 10 1 3 7 25 Doenças do aparelho respiratório, mal definidas - 3 5 2 2 2 14 Total 8 14 15 11 13 28 89 Fonte: MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade - SIM Faixa Etária 2018 2019 2020 2021 2022 2023 Total Menor 1 ano 2 4 - 3 1 1 11 1 a 4 anos 1 - 2 - - 1 4 5 a 9 anos - - - 2 - - 2 10 a 14 anos - - - - - 1 1 15 a 19 anos - - - 3 - 1 4 20 a 29 anos 3 3 3 1 - 1 11 30 a 39 anos 3 4 4 13 2 8 34 40 a 49 anos 6 7 9 19 7 8 56 50 a 59 anos 14 21 14 20 17 16 102 60 a 69 anos 29 36 27 35 34 42 203 70 a 79 anos 39 29 48 51 53 47 267 80 anos e mais 58 59 60 64 47 78 366 Total 155 163 167 211 161 204 1061 Fonte: MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade - SIM Local ocorrência 2018 2019 2020 2021 2022 2023 Total Hospital 121 127 155 198 153 196 950 Outro estabelecimento de saúde 1 - 1 4 2 - 8 Domicílio 27 32 7 6 4 3 79 Via pública 4 4 2 1 1 2 14 Outros 2 - 2 2 1 2 9 Ignorado - - - - - 1 1 Total 155 163 167 211 161 204 1061 Fonte: MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade - SIM Fx.Etária Menor 1A 2018 2019 2021 2022 2023 Total 0 a 6 dias 1 3 2 1 - 7 7 a 27 dias - 1 1 - - 2 28 a 364 dias 1 - - - 1 2 Total 2 4 3 1 1 11 Fonte: MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade - SIM Fx.Etária Menor 1A 2018 2019 2021 2022 2023 Total Taxa de mortalidade infantil 8,58 17,86 13,57 4,98 4,72 8,47 Fonte: MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade - SIM obitos em mulheres em idade fértil e óbitos maternos Óbitos mulheres idade fértil por Capítulo CID-10 e Ano do Óbito Município: 354000 POMPEIA Período:2018-2023 Capítulo CID-10 2018 2019 2020 2021 2022 2023 Total I. Algumas doenças infecciosas e parasitárias - 1 - 8 - - 9 II. Neoplasias (tumores) 3 2 1 - - 3 9 IV. Doenças endócrinas nutricionais e metabólicas - 1 - - - - 1 VI. Doenças do sistema nervoso - - - 1 - - 1 IX. Doenças do aparelho circulatório 1 - 1 1 1 3 7 X. Doenças do aparelho respiratório - 1 - - - - 1 XI. Doenças do aparelho digestivo - - - 1 1 1 3 XII. Doenças da pele e do tecido subcutâneo - - - 1 - - 1 XIII.Doenças sist osteomuscular e tec conjuntivo - - 1 - - - 1 XIV. Doenças do aparelho geniturinário 1 - - - 1 1 3 XV. Gravidez parto e puerpério - - - 1 - - 1 XVIII.Sint sinais e achad anorm ex clín e laborat - - - 1 - - 1 XX. Causas externas de morbidade e mortalidade 1 - 1 3 - 1 6 Total 6 5 4 17 3 9 44 Fonte: MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade - SIM obitos maternos Óbitos de mulheres em idade fértil e óbitos maternos - São Paulo Óbitos maternos por Capítulo CID-10 e Ano do Óbito Município: 354000 POMPEIA Período:2018-2023 Capítulo CID-10 2021 Total XV. Gravidez parto e puerpério 1 1 Total 1 1 Fonte: MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade - SIM Óbitos por causas evitáveis em menores de 5 anos - São Paulo Óbitos p/Residênc por Capítulo CID-10 e Ano do Óbito Município: 354000 POMPEIA Período:2018-2023 Capítulo CID-10 2018 2019 2020 2021 2022 2023 Total II. Neoplasias (tumores) - - 1 - - - 1 X. Doenças do aparelho respiratório 1 - - - - - 1 XVI. Algumas afec originadas no período perinatal 1 4 - 2 1 - 8 XVII.Malf cong deformid e anomalias cromossômicas - - - 1 - - 1 XVIII.Sint sinais e achad anorm ex clín e laborat 1 - - - - 1 2 XX. Causas externas de morbidade e mortalidade - - 1 - - 1 2 Total 3 4 2 3 1 2 15 Fonte: MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade - SIM Óbitos por causas evitáveis de 5 a 74 anos - São Paulo Óbitos p/Residênc por Causas evitáveis e Ano do Óbito Município: 354000 POMPEIA Período:2019-2023 Causas evitáveis 2019 2020 2021 2022 2023 Total 1. Causas evitáveis 57 50 56 50 58 271 1.2. Reduz ações prom prev contr atenç doenç infec 12 5 5 10 12 44 .. Tuberculose respirat c/confirm bacter e histol - - - - 1 1 .. Doenças infecciosas intestinais - - - - 1 1 .. Doenças pelo vírus da imunodeficiência humana 1 - - - - 1 .. Outras infecções 1 - - 5 - 6 .. Infecções respirat incl pneumonia e influenza 7 4 4 5 6 26 .. Infecções da pele e do tecido subcutâneo - 1 1 - 1 3 .. Outras doenças de notificação compulsória 2 - - - 1 3 .. Infecção do trato urinário localiz não especif 1 - - - 2 3 1.3. Reduz ações prom prev contr atenç doe ñ trans 37 40 41 34 38 190 .. Neopl malig lábio melanoma malig pele outr pele - - 1 1 - 2 .. Neopl malig fígado vias biliares intra-hepátic 1 1 1 1 1 5 .. Neoplasia maligna do estômago - 2 1 - 1 4 .. Neopl malig cólon junção retossigmoid reto ânus 1 1 1 2 2 7 .. Neoplasia maligna boca faringe e laringe 1 - - 2 2 5 .. Neoplasia maligna do esôfago 2 1 - 1 1 5 .. Neoplasia maligna traqueia brônquios pulmões 4 7 4 - 3 18 .. Neoplasia maligna da mama 1 - - 2 2 5 .. Leucemia linfoide 1 - - - - 1 .. Leucemia mieloide - - - 2 1 3 .. Diabetes mellitus 2 5 8 - 2 17 .. Obesidade 1 1 3 1 - 6 .. Psicose alcoólica e outr transtornos do álcool 2 - 4 4 3 13 .. Epilepsia e estado de mal epiléptico 1 - - - - 1 .. Doenças hipertensivas exceto hipert secundária 1 1 3 1 - 6 .. Doenças isquêmicas do coração 5 6 6 6 4 27 .. Insuficiência cardíaca 4 6 - 1 3 14 .. Doenças cerebrovasculares 5 8 5 7 9 34 .. Doenças crônicas vias aéreas infer e edema pulm 4 - 2 2 1 9 .. Doenças pulmonares devidas a agentes externos - - - - 1 1 .. Hérnias íleo paralítico e obstr intest s/hérnia - - 1 1 1 3 .. Transtornos da vesícula biliar e vias biliares - - - - 1 1 .. Insuficiência renal crônica 1 1 1 - - 3 1.4. Reduz ações prev contr atenção causas matern - - 1 - - 1 .. Complicações gravidez parto e puerpério - - 1 - - 1 1.5. Reduz ações prom prev atenç causas externas 8 5 9 6 8 36 .. Acidentes de transporte 4 4 - 2 3 13 .. Quedas - 1 - 1 - 2 .. Lesões autoprovocadas intencionalmente 1 - 3 2 - 6 .. Agressões 2 - 3 - 1 6 .. Intervenções legais e operacões de guerra - - - - 2 2 .. Exposição a forças mecânicas inanimadas 1 - - - 1 2 .. Outros riscos acidentais à respiração - - 1 1 1 3 .. Exposição acid outros fatores e aos não especif - - 1 - - 1 .. Eventos cuja intenção é indeterminada - - 1 - - 1 2. Causas mal definidas 5 - 3 5 9 22 3. Demais causas (não claramente evitáveis) 29 28 60 29 27 173 Total 91 78 119 84 94 466 Fonte: MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade - SIM - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1000 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mortalidade
3
- emoji: 📚
4
- colorFrom: red
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mortalidade
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1000 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="pt-BR">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dashboard de Mortalidade - Pompeia (2018-2023)</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .chart-container {
12
+ position: relative;
13
+ height: 300px;
14
+ width: 100%;
15
+ }
16
+ .fade-in {
17
+ animation: fadeIn 0.5s ease-in-out;
18
+ }
19
+ @keyframes fadeIn {
20
+ from { opacity: 0; transform: translateY(10px); }
21
+ to { opacity: 1; transform: translateY(0); }
22
+ }
23
+ .tab-content {
24
+ display: none;
25
+ }
26
+ .tab-content.active {
27
+ display: block;
28
+ }
29
+ .data-table {
30
+ width: 100%;
31
+ overflow-x: auto;
32
+ }
33
+ .data-table th {
34
+ background-color: #f3f4f6;
35
+ position: sticky;
36
+ top: 0;
37
+ }
38
+ </style>
39
+ </head>
40
+ <body class="bg-gray-50">
41
+ <div class="container mx-auto px-4 py-8">
42
+ <header class="mb-8">
43
+ <h1 class="text-3xl font-bold text-gray-800 flex items-center">
44
+ <i class="fas fa-chart-line text-blue-500 mr-3"></i>
45
+ Dashboard de Mortalidade - Pompeia/SP
46
+ </h1>
47
+ <p class="text-gray-600 mt-2">Período: 2018-2023 | Fonte: MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade (SIM)</p>
48
+ </header>
49
+
50
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8 fade-in">
51
+ <div class="flex flex-wrap justify-between items-center mb-6">
52
+ <h2 class="text-xl font-semibold text-gray-800">
53
+ <i class="fas fa-info-circle text-blue-500 mr-2"></i>
54
+ Resumo Geral
55
+ </h2>
56
+ <div class="flex space-x-2">
57
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">Total: 1.061 óbitos</span>
58
+ <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm font-medium">2018-2023</span>
59
+ </div>
60
+ </div>
61
+
62
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
63
+ <div class="bg-blue-50 p-4 rounded-lg border border-blue-100">
64
+ <div class="flex justify-between items-start">
65
+ <div>
66
+ <p class="text-sm text-blue-600 font-medium">Média Anual</p>
67
+ <p class="text-2xl font-bold text-blue-800">177</p>
68
+ </div>
69
+ <i class="fas fa-calendar-alt text-blue-400 text-xl"></i>
70
+ </div>
71
+ <div class="mt-2 text-xs text-blue-500">óbitos por ano</div>
72
+ </div>
73
+
74
+ <div class="bg-purple-50 p-4 rounded-lg border border-purple-100">
75
+ <div class="flex justify-between items-start">
76
+ <div>
77
+ <p class="text-sm text-purple-600 font-medium">Principal Causa</p>
78
+ <p class="text-lg font-bold text-purple-800 truncate">Aparelho Circulatório</p>
79
+ </div>
80
+ <i class="fas fa-heartbeat text-purple-400 text-xl"></i>
81
+ </div>
82
+ <div class="mt-2 text-xs text-purple-500">260 óbitos (24.5%)</div>
83
+ </div>
84
+
85
+ <div class="bg-red-50 p-4 rounded-lg border border-red-100">
86
+ <div class="flex justify-between items-start">
87
+ <div>
88
+ <p class="text-sm text-red-600 font-medium">Faixa Etária Mais Afetada</p>
89
+ <p class="text-lg font-bold text-red-800">80+ anos</p>
90
+ </div>
91
+ <i class="fas fa-user-tie text-red-400 text-xl"></i>
92
+ </div>
93
+ <div class="mt-2 text-xs text-red-500">366 óbitos (34.5%)</div>
94
+ </div>
95
+
96
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
97
+ <div class="flex justify-between items-start">
98
+ <div>
99
+ <p class="text-sm text-green-600 font-medium">Local Mais Comum</p>
100
+ <p class="text-lg font-bold text-green-800">Hospital</p>
101
+ </div>
102
+ <i class="fas fa-hospital text-green-400 text-xl"></i>
103
+ </div>
104
+ <div class="mt-2 text-xs text-green-500">950 óbitos (89.5%)</div>
105
+ </div>
106
+ </div>
107
+
108
+ <div class="chart-container">
109
+ <canvas id="annualTrendChart"></canvas>
110
+ </div>
111
+ </div>
112
+
113
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8 fade-in">
114
+ <div class="flex flex-wrap justify-between items-center mb-6">
115
+ <h2 class="text-xl font-semibold text-gray-800">
116
+ <i class="fas fa-filter text-blue-500 mr-2"></i>
117
+ Filtros e Visualizações
118
+ </h2>
119
+ <div class="flex space-x-2">
120
+ <button onclick="toggleTab('causes')" class="px-4 py-2 bg-blue-500 text-white rounded-md text-sm font-medium active-tab">
121
+ Por Causas
122
+ </button>
123
+ <button onclick="toggleTab('age')" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md text-sm font-medium">
124
+ Por Idade
125
+ </button>
126
+ <button onclick="toggleTab('location')" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md text-sm font-medium">
127
+ Por Local
128
+ </button>
129
+ <button onclick="toggleTab('special')" class="px-4 py-2 bg-gray-200 text-gray-700 rounded-md text-sm font-medium">
130
+ Grupos Especiais
131
+ </button>
132
+ </div>
133
+ </div>
134
+
135
+ <div id="causes" class="tab-content active">
136
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
137
+ <div class="chart-container">
138
+ <canvas id="causeDistributionChart"></canvas>
139
+ </div>
140
+ <div class="chart-container">
141
+ <canvas id="causeTrendChart"></canvas>
142
+ </div>
143
+ </div>
144
+ <div class="mt-6 overflow-x-auto">
145
+ <table class="data-table min-w-full divide-y divide-gray-200">
146
+ <thead class="bg-gray-50">
147
+ <tr>
148
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Capítulo CID-10</th>
149
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2018</th>
150
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2019</th>
151
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2020</th>
152
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2021</th>
153
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2022</th>
154
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2023</th>
155
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
156
+ </tr>
157
+ </thead>
158
+ <tbody class="bg-white divide-y divide-gray-200">
159
+ <tr>
160
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">I. Doenças infecciosas</td>
161
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9</td>
162
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">5</td>
163
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td>
164
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">54</td>
165
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15</td>
166
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">13</td>
167
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">104</td>
168
+ </tr>
169
+ <tr class="bg-gray-50">
170
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">II. Neoplasias</td>
171
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">29</td>
172
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">30</td>
173
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">36</td>
174
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">25</td>
175
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32</td>
176
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">35</td>
177
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">187</td>
178
+ </tr>
179
+ <tr>
180
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">IX. Aparelho circulatório</td>
181
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">50</td>
182
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">35</td>
183
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">55</td>
184
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">36</td>
185
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">39</td>
186
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">45</td>
187
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">260</td>
188
+ </tr>
189
+ <tr class="bg-gray-50">
190
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">X. Aparelho respiratório</td>
191
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">21</td>
192
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">37</td>
193
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">23</td>
194
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">22</td>
195
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">17</td>
196
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">31</td>
197
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">151</td>
198
+ </tr>
199
+ <tr>
200
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">XI. Aparelho digestivo</td>
201
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">9</td>
202
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">11</td>
203
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">10</td>
204
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">15</td>
205
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">17</td>
206
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">20</td>
207
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">82</td>
208
+ </tr>
209
+ </tbody>
210
+ </table>
211
+ </div>
212
+ </div>
213
+
214
+ <div id="age" class="tab-content">
215
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
216
+ <div class="chart-container">
217
+ <canvas id="ageDistributionChart"></canvas>
218
+ </div>
219
+ <div class="chart-container">
220
+ <canvas id="ageTrendChart"></canvas>
221
+ </div>
222
+ </div>
223
+ <div class="mt-6 overflow-x-auto">
224
+ <table class="data-table min-w-full divide-y divide-gray-200">
225
+ <thead class="bg-gray-50">
226
+ <tr>
227
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Faixa Etária</th>
228
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2018</th>
229
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2019</th>
230
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2020</th>
231
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2021</th>
232
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2022</th>
233
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2023</th>
234
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
235
+ </tr>
236
+ </thead>
237
+ <tbody class="bg-white divide-y divide-gray-200">
238
+ <tr>
239
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Menor 1 ano</td>
240
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
241
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4</td>
242
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
243
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3</td>
244
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
245
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
246
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">11</td>
247
+ </tr>
248
+ <tr class="bg-gray-50">
249
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1 a 4 anos</td>
250
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
251
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
252
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
253
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
254
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">-</td>
255
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
256
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">4</td>
257
+ </tr>
258
+ <tr>
259
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">30 a 39 anos</td>
260
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3</td>
261
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4</td>
262
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4</td>
263
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">13</td>
264
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
265
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">8</td>
266
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">34</td>
267
+ </tr>
268
+ <tr class="bg-gray-50">
269
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">60 a 69 anos</td>
270
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">29</td>
271
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">36</td>
272
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">27</td>
273
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">35</td>
274
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">34</td>
275
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">42</td>
276
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">203</td>
277
+ </tr>
278
+ <tr>
279
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">80+ anos</td>
280
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">58</td>
281
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">59</td>
282
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">60</td>
283
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">64</td>
284
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">47</td>
285
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">78</td>
286
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">366</td>
287
+ </tr>
288
+ </tbody>
289
+ </table>
290
+ </div>
291
+ </div>
292
+
293
+ <div id="location" class="tab-content">
294
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
295
+ <div class="chart-container">
296
+ <canvas id="locationDistributionChart"></canvas>
297
+ </div>
298
+ <div class="chart-container">
299
+ <canvas id="locationTrendChart"></canvas>
300
+ </div>
301
+ </div>
302
+ <div class="mt-6 overflow-x-auto">
303
+ <table class="data-table min-w-full divide-y divide-gray-200">
304
+ <thead class="bg-gray-50">
305
+ <tr>
306
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Local de Ocorrência</th>
307
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2018</th>
308
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2019</th>
309
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2020</th>
310
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2021</th>
311
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2022</th>
312
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">2023</th>
313
+ <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
314
+ </tr>
315
+ </thead>
316
+ <tbody class="bg-white divide-y divide-gray-200">
317
+ <tr>
318
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Hospital</td>
319
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">121</td>
320
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">127</td>
321
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">155</td>
322
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">198</td>
323
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">153</td>
324
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">196</td>
325
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">950</td>
326
+ </tr>
327
+ <tr class="bg-gray-50">
328
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Domicílio</td>
329
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">27</td>
330
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">32</td>
331
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">7</td>
332
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">6</td>
333
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4</td>
334
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3</td>
335
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">79</td>
336
+ </tr>
337
+ <tr>
338
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Via pública</td>
339
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4</td>
340
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">4</td>
341
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
342
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
343
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1</td>
344
+ <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2</td>
345
+ <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">14</td>
346
+ </tr>
347
+ </tbody>
348
+ </table>
349
+ </div>
350
+ </div>
351
+
352
+ <div id="special" class="tab-content">
353
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
354
+ <div class="chart-container">
355
+ <canvas id="womenChart"></canvas>
356
+ </div>
357
+ <div class="chart-container">
358
+ <canvas id="childrenChart"></canvas>
359
+ </div>
360
+ </div>
361
+ <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-6">
362
+ <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
363
+ <h3 class="text-lg font-medium text-gray-900 mb-4">
364
+ <i class="fas fa-female text-pink-500 mr-2"></i>
365
+ Óbitos em Mulheres em Idade Fértil (15-49 anos)
366
+ </h3>
367
+ <div class="space-y-3">
368
+ <div>
369
+ <div class="flex justify-between mb-1">
370
+ <span class="text-sm font-medium text-gray-700">Total (2018-2023)</span>
371
+ <span class="text-sm font-medium text-gray-900">44</span>
372
+ </div>
373
+ <div class="w-full bg-gray-200 rounded-full h-2">
374
+ <div class="bg-pink-500 h-2 rounded-full" style="width: 100%"></div>
375
+ </div>
376
+ </div>
377
+ <div>
378
+ <div class="flex justify-between mb-1">
379
+ <span class="text-sm font-medium text-gray-700">Principais causas</span>
380
+ <span class="text-sm font-medium text-gray-900">Neoplasias (9), Ap. Circulatório (7)</span>
381
+ </div>
382
+ </div>
383
+ </div>
384
+ </div>
385
+ <div class="bg-white p-4 rounded-lg border border-gray-200 shadow-sm">
386
+ <h3 class="text-lg font-medium text-gray-900 mb-4">
387
+ <i class="fas fa-baby text-blue-300 mr-2"></i>
388
+ Óbitos em Menores de 5 Anos
389
+ </h3>
390
+ <div class="space-y-3">
391
+ <div>
392
+ <div class="flex justify-between mb-1">
393
+ <span class="text-sm font-medium text-gray-700">Total (2018-2023)</span>
394
+ <span class="text-sm font-medium text-gray-900">15</span>
395
+ </div>
396
+ <div class="w-full bg-gray-200 rounded-full h-2">
397
+ <div class="bg-blue-300 h-2 rounded-full" style="width: 100%"></div>
398
+ </div>
399
+ </div>
400
+ <div>
401
+ <div class="flex justify-between mb-1">
402
+ <span class="text-sm font-medium text-gray-700">Principais causas</span>
403
+ <span class="text-sm font-medium text-gray-900">Período perinatal (8), Malformações (1)</span>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+
412
+ <div class="bg-white rounded-lg shadow-md p-6 mb-8 fade-in">
413
+ <h2 class="text-xl font-semibold text-gray-800 mb-6">
414
+ <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
415
+ Óbitos por Causas Evitáveis (2019-2023)
416
+ </h2>
417
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
418
+ <div class="bg-yellow-50 p-4 rounded-lg border border-yellow-100">
419
+ <div class="flex justify-between items-start">
420
+ <div>
421
+ <p class="text-sm text-yellow-700 font-medium">Total de óbitos evitáveis</p>
422
+ <p class="text-2xl font-bold text-yellow-800">271</p>
423
+ </div>
424
+ <i class="fas fa-procedures text-yellow-500 text-xl"></i>
425
+ </div>
426
+ <div class="mt-2 text-xs text-yellow-600">56.3% de todos os óbitos no período</div>
427
+ </div>
428
+ <div class="bg-red-50 p-4 rounded-lg border border-red-100">
429
+ <div class="flex justify-between items-start">
430
+ <div>
431
+ <p class="text-sm text-red-700 font-medium">Doenças infecciosas</p>
432
+ <p class="text-2xl font-bold text-red-800">44</p>
433
+ </div>
434
+ <i class="fas fa-virus text-red-500 text-xl"></i>
435
+ </div>
436
+ <div class="mt-2 text-xs text-red-600">16.2% dos evitáveis</div>
437
+ </div>
438
+ <div class="bg-green-50 p-4 rounded-lg border border-green-100">
439
+ <div class="flex justify-between items-start">
440
+ <div>
441
+ <p class="text-sm text-green-700 font-medium">Causas externas</p>
442
+ <p class="text-2xl font-bold text-green-800">36</p>
443
+ </div>
444
+ <i class="fas fa-car-crash text-green-500 text-xl"></i>
445
+ </div>
446
+ <div class="mt-2 text-xs text-green-600">13.3% dos evitáveis</div>
447
+ </div>
448
+ </div>
449
+ <div class="chart-container">
450
+ <canvas id="avoidableChart"></canvas>
451
+ </div>
452
+ </div>
453
+
454
+ <footer class="text-center text-gray-500 text-sm mt-12">
455
+ <p>Dados fornecidos por MS/SVS/CGIAE - Sistema de Informações sobre Mortalidade (SIM)</p>
456
+ <p class="mt-1">Município: Pompeia/SP | Período: 2018-2023 | Última atualização: Junho/2023</p>
457
+ </footer>
458
+ </div>
459
+
460
+ <script>
461
+ // Tab functionality
462
+ function toggleTab(tabId) {
463
+ // Hide all tab contents
464
+ document.querySelectorAll('.tab-content').forEach(tab => {
465
+ tab.classList.remove('active');
466
+ });
467
+
468
+ // Show selected tab content
469
+ document.getElementById(tabId).classList.add('active');
470
+
471
+ // Update tab button styles
472
+ document.querySelectorAll('[onclick^="toggleTab"]').forEach(btn => {
473
+ if (btn.textContent.trim().toLowerCase().includes(tabId)) {
474
+ btn.classList.remove('bg-gray-200', 'text-gray-700');
475
+ btn.classList.add('bg-blue-500', 'text-white');
476
+ } else {
477
+ btn.classList.remove('bg-blue-500', 'text-white');
478
+ btn.classList.add('bg-gray-200', 'text-gray-700');
479
+ }
480
+ });
481
+ }
482
+
483
+ // Annual Trend Chart
484
+ const annualTrendCtx = document.getElementById('annualTrendChart').getContext('2d');
485
+ const annualTrendChart = new Chart(annualTrendCtx, {
486
+ type: 'line',
487
+ data: {
488
+ labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
489
+ datasets: [{
490
+ label: 'Total de Óbitos',
491
+ data: [155, 163, 167, 211, 161, 204],
492
+ borderColor: 'rgb(59, 130, 246)',
493
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
494
+ borderWidth: 2,
495
+ fill: true,
496
+ tension: 0.4
497
+ }]
498
+ },
499
+ options: {
500
+ responsive: true,
501
+ maintainAspectRatio: false,
502
+ plugins: {
503
+ title: {
504
+ display: true,
505
+ text: 'Evolução Anual do Número de Óbitos (2018-2023)',
506
+ font: {
507
+ size: 14
508
+ }
509
+ },
510
+ tooltip: {
511
+ mode: 'index',
512
+ intersect: false
513
+ }
514
+ },
515
+ scales: {
516
+ y: {
517
+ beginAtZero: true,
518
+ title: {
519
+ display: true,
520
+ text: 'Número de Óbitos'
521
+ }
522
+ }
523
+ }
524
+ }
525
+ });
526
+
527
+ // Cause Distribution Chart
528
+ const causeDistributionCtx = document.getElementById('causeDistributionChart').getContext('2d');
529
+ const causeDistributionChart = new Chart(causeDistributionCtx, {
530
+ type: 'doughnut',
531
+ data: {
532
+ labels: [
533
+ 'Aparelho circulatório',
534
+ 'Neoplasias',
535
+ 'Aparelho respiratório',
536
+ 'Doenças infecciosas',
537
+ 'Aparelho digestivo',
538
+ 'Outras'
539
+ ],
540
+ datasets: [{
541
+ data: [260, 187, 151, 104, 82, 277],
542
+ backgroundColor: [
543
+ 'rgba(239, 68, 68, 0.7)',
544
+ 'rgba(139, 92, 246, 0.7)',
545
+ 'rgba(16, 185, 129, 0.7)',
546
+ 'rgba(59, 130, 246, 0.7)',
547
+ 'rgba(245, 158, 11, 0.7)',
548
+ 'rgba(156, 163, 175, 0.7)'
549
+ ],
550
+ borderColor: [
551
+ 'rgba(239, 68, 68, 1)',
552
+ 'rgba(139, 92, 246, 1)',
553
+ 'rgba(16, 185, 129, 1)',
554
+ 'rgba(59, 130, 246, 1)',
555
+ 'rgba(245, 158, 11, 1)',
556
+ 'rgba(156, 163, 175, 1)'
557
+ ],
558
+ borderWidth: 1
559
+ }]
560
+ },
561
+ options: {
562
+ responsive: true,
563
+ maintainAspectRatio: false,
564
+ plugins: {
565
+ title: {
566
+ display: true,
567
+ text: 'Distribuição por Causas (2018-2023)',
568
+ font: {
569
+ size: 14
570
+ }
571
+ },
572
+ legend: {
573
+ position: 'right',
574
+ },
575
+ tooltip: {
576
+ callbacks: {
577
+ label: function(context) {
578
+ const label = context.label || '';
579
+ const value = context.raw || 0;
580
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
581
+ const percentage = Math.round((value / total) * 100);
582
+ return `${label}: ${value} (${percentage}%)`;
583
+ }
584
+ }
585
+ }
586
+ }
587
+ }
588
+ });
589
+
590
+ // Cause Trend Chart
591
+ const causeTrendCtx = document.getElementById('causeTrendChart').getContext('2d');
592
+ const causeTrendChart = new Chart(causeTrendCtx, {
593
+ type: 'bar',
594
+ data: {
595
+ labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
596
+ datasets: [
597
+ {
598
+ label: 'Aparelho circulatório',
599
+ data: [50, 35, 55, 36, 39, 45],
600
+ backgroundColor: 'rgba(239, 68, 68, 0.7)',
601
+ borderColor: 'rgba(239, 68, 68, 1)',
602
+ borderWidth: 1
603
+ },
604
+ {
605
+ label: 'Neoplasias',
606
+ data: [29, 30, 36, 25, 32, 35],
607
+ backgroundColor: 'rgba(139, 92, 246, 0.7)',
608
+ borderColor: 'rgba(139, 92, 246, 1)',
609
+ borderWidth: 1
610
+ },
611
+ {
612
+ label: 'Aparelho respiratório',
613
+ data: [21, 37, 23, 22, 17, 31],
614
+ backgroundColor: 'rgba(16, 185, 129, 0.7)',
615
+ borderColor: 'rgba(16, 185, 129, 1)',
616
+ borderWidth: 1
617
+ }
618
+ ]
619
+ },
620
+ options: {
621
+ responsive: true,
622
+ maintainAspectRatio: false,
623
+ plugins: {
624
+ title: {
625
+ display: true,
626
+ text: 'Evolução das Principais Causas de Óbito',
627
+ font: {
628
+ size: 14
629
+ }
630
+ },
631
+ tooltip: {
632
+ mode: 'index',
633
+ intersect: false
634
+ }
635
+ },
636
+ scales: {
637
+ y: {
638
+ beginAtZero: true,
639
+ title: {
640
+ display: true,
641
+ text: 'Número de Óbitos'
642
+ }
643
+ }
644
+ }
645
+ }
646
+ });
647
+
648
+ // Age Distribution Chart
649
+ const ageDistributionCtx = document.getElementById('ageDistributionChart').getContext('2d');
650
+ const ageDistributionChart = new Chart(ageDistributionCtx, {
651
+ type: 'bar',
652
+ data: {
653
+ labels: ['<1', '1-4', '5-9', '10-14', '15-19', '20-29', '30-39', '40-49', '50-59', '60-69', '70-79', '80+'],
654
+ datasets: [{
655
+ label: 'Óbitos por Faixa Etária (Total 2018-2023)',
656
+ data: [11, 4, 2, 1, 4, 11, 34, 56, 102, 203, 267, 366],
657
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
658
+ borderColor: 'rgba(59, 130, 246, 1)',
659
+ borderWidth: 1
660
+ }]
661
+ },
662
+ options: {
663
+ responsive: true,
664
+ maintainAspectRatio: false,
665
+ plugins: {
666
+ title: {
667
+ display: true,
668
+ text: 'Distribuição por Faixa Etária (2018-2023)',
669
+ font: {
670
+ size: 14
671
+ }
672
+ },
673
+ tooltip: {
674
+ callbacks: {
675
+ label: function(context) {
676
+ const label = context.dataset.label || '';
677
+ const value = context.raw || 0;
678
+ const total = 1061;
679
+ const percentage = Math.round((value / total) * 100);
680
+ return `${value} óbitos (${percentage}%)`;
681
+ }
682
+ }
683
+ }
684
+ },
685
+ scales: {
686
+ y: {
687
+ beginAtZero: true,
688
+ title: {
689
+ display: true,
690
+ text: 'Número de Óbitos'
691
+ }
692
+ }
693
+ }
694
+ }
695
+ });
696
+
697
+ // Age Trend Chart
698
+ const ageTrendCtx = document.getElementById('ageTrendChart').getContext('2d');
699
+ const ageTrendChart = new Chart(ageTrendCtx, {
700
+ type: 'line',
701
+ data: {
702
+ labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
703
+ datasets: [
704
+ {
705
+ label: '60-69 anos',
706
+ data: [29, 36, 27, 35, 34, 42],
707
+ borderColor: 'rgba(239, 68, 68, 1)',
708
+ backgroundColor: 'rgba(239, 68, 68, 0.1)',
709
+ borderWidth: 2,
710
+ fill: true,
711
+ tension: 0.4
712
+ },
713
+ {
714
+ label: '70-79 anos',
715
+ data: [39, 29, 48, 51, 53, 47],
716
+ borderColor: 'rgba(139, 92, 246, 1)',
717
+ backgroundColor: 'rgba(139, 92, 246, 0.1)',
718
+ borderWidth: 2,
719
+ fill: true,
720
+ tension: 0.4
721
+ },
722
+ {
723
+ label: '80+ anos',
724
+ data: [58, 59, 60, 64, 47, 78],
725
+ borderColor: 'rgba(16, 185, 129, 1)',
726
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
727
+ borderWidth: 2,
728
+ fill: true,
729
+ tension: 0.4
730
+ }
731
+ ]
732
+ },
733
+ options: {
734
+ responsive: true,
735
+ maintainAspectRatio: false,
736
+ plugins: {
737
+ title: {
738
+ display: true,
739
+ text: 'Evolução por Faixa Etária (Idosos)',
740
+ font: {
741
+ size: 14
742
+ }
743
+ },
744
+ tooltip: {
745
+ mode: 'index',
746
+ intersect: false
747
+ }
748
+ },
749
+ scales: {
750
+ y: {
751
+ beginAtZero: true,
752
+ title: {
753
+ display: true,
754
+ text: 'Número de Óbitos'
755
+ }
756
+ }
757
+ }
758
+ }
759
+ });
760
+
761
+ // Location Distribution Chart
762
+ const locationDistributionCtx = document.getElementById('locationDistributionChart').getContext('2d');
763
+ const locationDistributionChart = new Chart(locationDistributionCtx, {
764
+ type: 'pie',
765
+ data: {
766
+ labels: ['Hospital', 'Domicílio', 'Via pública', 'Outros'],
767
+ datasets: [{
768
+ data: [950, 79, 14, 18],
769
+ backgroundColor: [
770
+ 'rgba(59, 130, 246, 0.7)',
771
+ 'rgba(16, 185, 129, 0.7)',
772
+ 'rgba(245, 158, 11, 0.7)',
773
+ 'rgba(156, 163, 175, 0.7)'
774
+ ],
775
+ borderColor: [
776
+ 'rgba(59, 130, 246, 1)',
777
+ 'rgba(16, 185, 129, 1)',
778
+ 'rgba(245, 158, 11, 1)',
779
+ 'rgba(156, 163, 175, 1)'
780
+ ],
781
+ borderWidth: 1
782
+ }]
783
+ },
784
+ options: {
785
+ responsive: true,
786
+ maintainAspectRatio: false,
787
+ plugins: {
788
+ title: {
789
+ display: true,
790
+ text: 'Distribuição por Local de Ocorrência (2018-2023)',
791
+ font: {
792
+ size: 14
793
+ }
794
+ },
795
+ tooltip: {
796
+ callbacks: {
797
+ label: function(context) {
798
+ const label = context.label || '';
799
+ const value = context.raw || 0;
800
+ const total = context.dataset.data.reduce((a, b) => a + b, 0);
801
+ const percentage = Math.round((value / total) * 100);
802
+ return `${label}: ${value} (${percentage}%)`;
803
+ }
804
+ }
805
+ }
806
+ }
807
+ }
808
+ });
809
+
810
+ // Location Trend Chart
811
+ const locationTrendCtx = document.getElementById('locationTrendChart').getContext('2d');
812
+ const locationTrendChart = new Chart(locationTrendCtx, {
813
+ type: 'line',
814
+ data: {
815
+ labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
816
+ datasets: [
817
+ {
818
+ label: 'Hospital',
819
+ data: [121, 127, 155, 198, 153, 196],
820
+ borderColor: 'rgba(59, 130, 246, 1)',
821
+ backgroundColor: 'rgba(59, 130, 246, 0.1)',
822
+ borderWidth: 2,
823
+ fill: true,
824
+ tension: 0.4
825
+ },
826
+ {
827
+ label: 'Domicílio',
828
+ data: [27, 32, 7, 6, 4, 3],
829
+ borderColor: 'rgba(16, 185, 129, 1)',
830
+ backgroundColor: 'rgba(16, 185, 129, 0.1)',
831
+ borderWidth: 2,
832
+ fill: true,
833
+ tension: 0.4
834
+ }
835
+ ]
836
+ },
837
+ options: {
838
+ responsive: true,
839
+ maintainAspectRatio: false,
840
+ plugins: {
841
+ title: {
842
+ display: true,
843
+ text: 'Evolução por Local de Ocorrência',
844
+ font: {
845
+ size: 14
846
+ }
847
+ },
848
+ tooltip: {
849
+ mode: 'index',
850
+ intersect: false
851
+ }
852
+ },
853
+ scales: {
854
+ y: {
855
+ beginAtZero: true,
856
+ title: {
857
+ display: true,
858
+ text: 'Número de Óbitos'
859
+ }
860
+ }
861
+ }
862
+ }
863
+ });
864
+
865
+ // Women Chart
866
+ const womenCtx = document.getElementById('womenChart').getContext('2d');
867
+ const womenChart = new Chart(womenCtx, {
868
+ type: 'bar',
869
+ data: {
870
+ labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
871
+ datasets: [{
872
+ label: 'Óbitos em Mulheres em Idade Fértil (15-49 anos)',
873
+ data: [6, 5, 4, 17, 3, 9],
874
+ backgroundColor: 'rgba(236, 72, 153, 0.7)',
875
+ borderColor: 'rgba(236, 72, 153, 1)',
876
+ borderWidth: 1
877
+ }]
878
+ },
879
+ options: {
880
+ responsive: true,
881
+ maintainAspectRatio: false,
882
+ plugins: {
883
+ title: {
884
+ display: true,
885
+ text: 'Óbitos em Mulheres em Idade Fértil',
886
+ font: {
887
+ size: 14
888
+ }
889
+ }
890
+ },
891
+ scales: {
892
+ y: {
893
+ beginAtZero: true,
894
+ title: {
895
+ display: true,
896
+ text: 'Número de Óbitos'
897
+ }
898
+ }
899
+ }
900
+ }
901
+ });
902
+
903
+ // Children Chart
904
+ const childrenCtx = document.getElementById('childrenChart').getContext('2d');
905
+ const childrenChart = new Chart(childrenCtx, {
906
+ type: 'bar',
907
+ data: {
908
+ labels: ['2018', '2019', '2020', '2021', '2022', '2023'],
909
+ datasets: [{
910
+ label: 'Óbitos em Menores de 5 Anos',
911
+ data: [3, 4, 2, 5, 1, 2],
912
+ backgroundColor: 'rgba(56, 189, 248, 0.7)',
913
+ borderColor: 'rgba(56, 189, 248, 1)',
914
+ borderWidth: 1
915
+ }]
916
+ },
917
+ options: {
918
+ responsive: true,
919
+ maintainAspectRatio: false,
920
+ plugins: {
921
+ title: {
922
+ display: true,
923
+ text: 'Óbitos em Menores de 5 Anos',
924
+ font: {
925
+ size: 14
926
+ }
927
+ }
928
+ },
929
+ scales: {
930
+ y: {
931
+ beginAtZero: true,
932
+ title: {
933
+ display: true,
934
+ text: 'Número de Óbitos'
935
+ }
936
+ }
937
+ }
938
+ }
939
+ });
940
+
941
+ // Avoidable Deaths Chart
942
+ const avoidableCtx = document.getElementById('avoidableChart').getContext('2d');
943
+ const avoidableChart = new Chart(avoidableCtx, {
944
+ type: 'bar',
945
+ data: {
946
+ labels: ['2019', '2020', '2021', '2022', '2023'],
947
+ datasets: [
948
+ {
949
+ label: 'Doenças infecciosas',
950
+ data: [12, 5, 5, 10, 12],
951
+ backgroundColor: 'rgba(239, 68, 68, 0.7)',
952
+ borderColor: 'rgba(239, 68, 68, 1)',
953
+ borderWidth: 1
954
+ },
955
+ {
956
+ label: 'Doenças não transmissíveis',
957
+ data: [37, 40, 41, 34, 38],
958
+ backgroundColor: 'rgba(139, 92, 246, 0.7)',
959
+ borderColor: 'rgba(139, 92, 246, 1)',
960
+ borderWidth: 1
961
+ },
962
+ {
963
+ label: 'Causas externas',
964
+ data: [8, 5, 9, 6, 8],
965
+ backgroundColor: 'rgba(16, 185, 129, 0.7)',
966
+ borderColor: 'rgba(16, 185, 129, 1)',
967
+ borderWidth: 1
968
+ }
969
+ ]
970
+ },
971
+ options: {
972
+ responsive: true,
973
+ maintainAspectRatio: false,
974
+ plugins: {
975
+ title: {
976
+ display: true,
977
+ text: 'Óbitos por Causas Evitáveis (2019-2023)',
978
+ font: {
979
+ size: 14
980
+ }
981
+ },
982
+ tooltip: {
983
+ mode: 'index',
984
+ intersect: false
985
+ }
986
+ },
987
+ scales: {
988
+ y: {
989
+ beginAtZero: true,
990
+ title: {
991
+ display: true,
992
+ text: 'Número de Óbitos'
993
+ }
994
+ }
995
+ }
996
+ }
997
+ });
998
+ </script>
999
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=paulosena/mortalidade" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1000
+ </html>