-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
252 lines (227 loc) · 15.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<html lang = "pt-br">
<head>
<title>Fetal Health Analysis</title>
<meta charset="utf-8">
<!--Changing website viewport to cover all the device width-->
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">
<!--Bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<!--JS-->
<script src="./main.js"></script>
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<!--CSS-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--Title of the website centered-->
<center>
<h1 class=”display-2" >Análise de saúde fetal</h1>
</center>
<!--div para explicação do trabalho-->
<div class="container">
<div class="row">
<div class="col-12">
<!-- titulo para esse resumo/contexto do tema que fiz -->
<h2 class=”display-2" >Contexto</h5>
<p>
A redução da mortalidade infantil é refletida em vários dos Objetivos de Desenvolvimento
Sustentável e é um indicador-chave do progresso humano.
A ONU espera que, até 2030, os países acabem com as mortes evitáveis de recém-nascidos
e crianças menores de 5 anos de idade, com todos os países visando reduzir a
mortalidade de menores de 5 anos para pelo menos 25 por 1.000 nascidos vivos.<br>
</p>
<p>
Juntamente com a ideia de mortalidade infantil, está a mortalidade materna, que
resulta em 295.000 mortes pré e pós-parto (a partir de 2017).
A maioria dessas mortes (94%) ocorreu em áreas com recursos limitados e a maioria
poderia ter sido evitada.
</p>
<p>
Diante do que foi mencionado acima, Cardiotocogramas (CTGs) são uma opção simples e
acessível em termos de custos para avaliar a saúde fetal, permitindo que profissionais
de saúde ajam para prevenir a mortalidade infantil e materna. O equipamento em si
funciona enviando pulsos de ultrassom e lendo sua resposta, assim iluminando a taxa
cardíaca fetal (TCF), movimentos fetais, contrações uterinas e mais. Esse exame é
importante para avaliar a saúde do feto, pois permite detectar a presença de
possíveis problemas, como falta de oxigênio ou sofrimento fetal.
</p>
<p>
Durante o exame, dois sensores são colocados na barriga da mãe: um para monitorar a
frequência cardíaca fetal e outro para registrar as contrações uterinas. O exame é
indolor e não apresenta riscos para a mãe ou para o feto.
</p>
<p>
Os resultados do cardiotocograma são interpretados por um médico obstetra, que poderá
identificar se a frequência cardíaca fetal está dentro dos valores normais e se há
alguma anormalidade nas contrações uterinas. Caso seja detectada alguma irregularidade,
o médico poderá indicar um tratamento ou procedimento para proteger a saúde do feto e da mãe.
</p>
<h3 class=”display-2" >Objetivos</h5>
<p>
Nosso objetivo é dar maior poder aos médicos para identificação da saúde do feto, ajudando, portanto,
na tomada de decisões, buscando uma melhora na saúde do feto. Tomando como base para essa análise, o
conjunto de dados, que logo sera comentado, que contem 2126 registros, com diversas variáveis relevantes
e a classificação da saúde do feto. É uma alternativa a modelos de machine learning, onde colocaria
todas as variáveis e resultaria a saúde do feto no estado atual, passando por uma caixa preta, nos
queremos evitar essa caixa preta, deitando a informação disposta de forma clara para um especialista,
o que é muito importante já que estamos lidando com algo muito delicado, vidas.
</p>
<p>
Buscando a compreensão de um público maior, também vamos fazer uma explicação mais detalhada, que um
profissional não precisaria, mas dessa forma a visualização fica mais acessível, não para a real
predição de saúde de um feto, mas sim para possíveis insights. Vamos inicialmente apresentar um
Heatmap das correlações entre as variáveis, para mostrar melhor a relação entre as variáveis e ao
final da página temos uma explicação de cada uma das variáveis que utilizamos.
</p>
<h3 class=”display-2" >Dados</h5>
<p>
Os dados utilizados foram retirados do site <a href="https://www.kaggle.com/andrewmvd/fetal-health-classification">Kaggle</a>,
uma plataforma de ciência de dados, ela permite que usuários encontrem e publiquem conjuntos de dados. A base consiste
em 21 variáveis quantitativas e uma qualitativa (a saúde do feto). Vale relembrar que todas as há a explicação de todas as variáveis
no final da página.
</p>
<p>
Este conjunto de dados contém 2126 registros de recursos extraídos
de exames de cardiotocograma, que foram classificados por três obstetras
especialistas em 3 classes: Normal, Suspeito ou Patológico.
</p>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-5">
<h3 class=”display-2" >Correlação entre as variáveis</h5>
Visando ajudar aqueles que não possuem um amplo conhecimento sobre o tema e as variáveis, foi criada uma visualização que permite uma
compreensão mais clara sobre a correlação entre elas. Com esse gráfico, a intenção é auxiliar na escolha das variáveis a serem relacionadas
nas análises, a fim de gerar análises mais produtivas e evitar que o usuário se depare com a tentativa de relacionar todas as possíveis
duplas de variáveis na busca por entender o quanto elas estão relacionadas. Essa visualização apresenta as informações de maneira simples
e intuitiva, sendo capaz de fornecer informações valiosas sobre a distribuição de pontos e possíveis tendências. Uma possível aplicação é,
partindo da visualização, localizar variáveis com baixa correlação entre si, mas alta correlação com a saúde do feto, relacioná-las e ver como,
os dados se distribuem, se é possível encontrar padrões entre essas variáveis que não seriam correlacionadas. É importante ressaltar que essa
visualização é apenas uma ferramenta secundária, e que testes independentes devem ser realizados para uma análise mais completa e precisa.
Contudo, essa matriz de correlação é a base fundamental para a exploração de dados e pode fornecer informações úteis para uma visualização
final mais eficaz.
</div>
<div class="col-7" id = "div1">
<center>
<h3 class=”display-2" >Correlation map</h5>
</center>
<svg id="vini"></svg>
</div>
</div>
</div>
<div class = "container">
<div class = "row" id = "div2">
<!-- Initialize a select button -->
<div class = "col-4">
<h2 class=”display-2" >Área para análise</h5>
<p>Seleção para o valor de X</p>
<select id="x-select"></select>
<p>Seleção para o valor de Y</p>
<select id="y-select"></select>
<p>Seleção para o valor do raio dos círculos</p>
<select id="r-select"></select>
<h3>Estatísticas dos dados selecionados:</h5>
<svg class="stats"></svg>
</div>
<div class="col-1">
</div>
<div class = "col-7">
<center>
<h2 class=”display-2" >Scatterplot Interativo</h5>
</center>
<svg id="chart"></svg>
<center>
<button id = "reset-brush">Reset brushing</button>
</center>
</div>
<p id="analysis-text">
Aqui você tem total controle para fazer explorações de forma geral, relacionando a saúde do feto com até mais três variáveis a sua
escolha, uma sera representada no eixo x, outra no eixo y e a última no tamanho dos pontos. Além disso, é possível selecionar uma
área de interesse apenas clicando e arrastando no gráfico, ao fazer essa área apenas os pontos dentro dela são ressaltados e, além
disso, são disponíveis estatísticas considerando apenas os pontos da área selecionada, essa região pode ser redimensionada e
arrastada por toda a visualização.
</p>
</div>
</div>
<div class="container">
<div class="row">
<h3>Sugestão</h3>
<div class="col-5">
<p>Uma sugestão que fazemos é a seguinte análise:</p>
<ul>
<li>Eixo x: 'abnormal_short_term_variability'</li>
<li>Eixo y: 'histogram_mean'</li>
<li>Raio: 'prolongued_decelerations'</li>
</ul>
<p>O propósito inicial da visualização de scatterplot com interação é que fizesse parte da análise exploratória dos dados. Porém enquanto desenvolviamos esta visualização, encontramos diversos cruzamentos de variáveis que tornava muito evidente a separação entre os fetos normais e os patológicos. Assim tivemos o insight de como esta ferramenta poderia ser utilizada por obstetras para uma análise rápida e preventiva da saúde do feto.</p>
<p>A principal escolha de variáveis que encontramos foi a sugerida acima. Veja na imagem à direita que grande parte dos fetos patológicos se encontra com 'histogram_mean' menor que 110. Não somente isso, mas casos patológicos com 'histogram_mean' entre 110 e 130 também possuem um 'prolongued_decelerations' maior em comapração aos fetos normais no mesmo intervalo. Ademais, vemos que os casos com um 'abnormal_short_term_variability' muito grande tendem a ser suspeitos ou patológicos, independente das outras variáveis. </p>
<p>Acreditar que um obstreta pode coletar dados de um novo paciente e localizá-los nesta visualização foi o que nos levou a seguir com esta visualização. Ficamos felizes com o resultado, e convidamos o visitante deste site a explorar outras diversas combinações de variáveis que podem levar a visualizações tão interessantes quanto a sugerida.</p>
</div>
<div class="col-1"></div>
<div class="col-6">
<img src="model1.png" width="100%">
<center>Imagem: gráfico com as variáveis sugeridas</center>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<h5 class=”display-2" >Variáveis:</h5>
<p>
<b>'baseline_value'</b>- Frequência cardíaca fetal basal <br>
<b>'accelerations'</b> - Número de acelerações (cardiacas do feto) por segundo<br>
<b>'fetal_movement'</b> - Número de movimentos fetais por segundo<br>
<b>'uterine_contractions'</b> - Número de contrações uterinas por segundo<br>
<b>'light_decelerations'</b> - Número de desacelerações (cardiacas do feto) leves por segundo<br>
<b>'severe_decelerations'</b> - Número de desacelerações (cardiacas do feto) severas por segundo<br>
<b>'prolongued_decelerations'</b> - Número de desacelerações (cardiacas do feto) prolongadas por segundo<br>
<b>'abnormal_short_term_variability'</b> - Porcentagem de tempo com variabilidade anormal de curto prazo. É uma
medida que indica a quantidade de tempo em que a frequência cardíaca fetal apresentou uma variação anormal em
relação ao padrão esperado durante um período de tempo específico (curto prazo).<br>
<b>'mean_value_of_short_term_variability'</b> - Valor médio da variabilidade de curto prazo. É uma medida
que indica a média das flutuações de frequência cardíaca fetal que ocorrem de uma batida para outra durante
um determinado período de tempo.<br>
<b>'percentage_of_time_with_abnormal_long_term_variability'</b> - Porcentagem de tempo com variabilidade anormal de longo prazo. É
uma medida que indica a quantidade de tempo em que a frequência cardíaca fetal apresentou uma variação anormal em relação ao padrão
esperado durante um período de tempo específico (longo prazo).<br>
<b>'mean_value_of_long_term_variability'</b> - Valor médio da variabilidade de longo prazo. É uma medida que representa a média das
flutuações da frequência cardíaca fetal que ocorrem em períodos mais longos, geralmente com duração de alguns minutos ou mais.<br>
<b>'histogram_width'</b> - Largura do histograma da FCF. É uma medida que indica a amplitude de variação da frequência cardíaca
fetal durante um exame CTG.<br>
<b>'histogram_min'</b> - Mínimo (baixa frequência) do histograma da FCF.Representa a menor frequência cardíaca fetal registrada
durante o período de monitoramento (bpm).<br>
<b>'histogram_max'</b> - Máximo (alta frequência) do histograma de FCF. Representa a maior frequência cardíaca fetal registrada
durante o período de monitoramento (bpm). <br>
<b>'histogram_number_of_peaks'</b> - Número de picos do histograma. <br>
<b>'histogram_number_of_zeroes'</b> - Número de zeros do histograma. O número de zeros do histograma em um exame CTG é a contagem
de episódios em que não há variação da frequência cardíaca fetal durante um período de tempo. <br>
<b>'histogram_mode'</b> - Moda do histogram<br>
<b>'histogram_mean'</b> - Media do histogram<br>
<b>'histogram_median'</b> - Mediana do histograma<br>
<b>'histogram_variance'</b> - Variancia do Histograma<br>
<b>'histogram_tendency'</b> - Tendência do histograma<br>
</p>
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// Run script1.js for div1
if (document.getElementById("div1")) {
// Script for div1
heatmap();
}
// Run script2.js for div2
if (document.getElementById("div2")) {
// Script for div2
scatterplot();
}
}
);
</script>
</body>
</html>