-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
220 lines (202 loc) · 13.4 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
<!DOCTYPE html>
<html>
<head>
<!-- Link com o repositório do projeto no observable: https://observablehq.com/d/ffb89fcb60d326fa -->
<!-- Nome na aba do navegador -->
<title>Nutrição em um olhar</title>
<!-- Import o D3 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- Folha de estilos -->
<link rel="stylesheet" href="style.css">
<!-- Fontes -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
rel="stylesheet">
</head>
<body>
<!-- Título da página -->
<div class="conteiner">
<h1>NUTRIÇÃO EM UM OLHAR</h1>
</div>
<!-- Parágrafo de introdução -->
<div class="conteiner">
<h2>Sobre a ferramenta</h2>
<p class="introducao">O objetivo central dessa ferramenta é possibilitar ao visualizador um maior
entendimento sobre os alimentos (em especial, os macronutrientes)
e compreender se suas escolhas alimentares estão balanceadas.</p>
<p class="introducao">A partir de informações de peso, número de refeições por dia (por padrão,
definido como 3), quantidade de proteínas por quilograma (por padrão, 1.0g) e as proporções
desejadas de macronutrientes (por padrão, estão definidas como 25% para gorduras, 25% para
proteínas e 50% para carboidratos, recomendações da nutricionista Isolda Vasconcelos em
<a
href="https://www.boasaude.com.br/nutricao/15404/qual-a-proporcao-de-proteina-e-carboidratos-ideal-nas-refeicoes.html">
Saúde e Nutrição
</a>).
Essas proporções podem ser alteradas pelo usuário a depender do seu objetivo. Por exemplo, pessoas
sedentárias consomem, em geral, menos proteínas do que um atleta. Para entender melhor em qual grupo
você se encaixa, recomendamos ler algumas referências, como em <a
href="https://www.atletis.com.br/quantidade-proteina-dia#:~:text=Para%20adultos%20sedent%C3%A1rios%2C%20a%20quantidade,g%20a%20cada%20quilo%20no%20m%C3%A1ximo.">
"Descubra a quantidade ideal de proteína por dia" - Atletis Blog.
</a>
</p>
<p class="introducao"> Os dados necessários foram obtidos através do Kaggle, em
<a href="https://www.kaggle.com/datasets/ispangler/composio-nutricional-de-alimentos-taco">
Composição nutricional de alimentos - TACO
</a>. Nele temos dados sobre a composição dos principais alimentos consumidos no Brasil, baseado em um plano
de amostragem que garante valores representativos, com análises realizadas por laboratórios com
capacidade analítica comprovada.
</p>
</div>
<!-- Como utilizar a ferramenta -->
<div class="conteiner">
<h2>Como utilizar a ferramenta</h2>
<ul id="como_utilizar">
<li>Começamos informando alguns dados iniciais do usuário (caso não forem preenchidos, serão usados os dados
padrão):</li>
<ul>
<li>
Peso: o peso do usuário em quilogramas (kg);
</li>
<li>
Número de refeições: o número de refeições que o usuário faz por dia (por padrão, 3);
</li>
<li>
Quantidade de proteínas por quilograma: a quantidade de proteínas em gramas que o usuário deseja
consumir por Kg de massa corporal em um dia (por padrão, 1.0g);
</li>
<li>
Proporção de proteína: a proporção de calorias com a fonte sendo proteína que o usuário deseja
consumir em um dia (por padrão, 25%);
</li>
<li>
Proporção de carboidrato: a proporção de calorias com a fonte sendo carboidrato que o usuário deseja
consumir em um dia (por padrão, 50%);
</li>
<li>
Proporção de lipídios (gordura): a proporção de calorias com a fonte sendo lipídeos que o usuário
deseja consumir em um dia (por padrão, 25%),
</li>
<li>
Tolerância: margem de erro na alimentação (Tolerância igual a 10% significa que a alimentação pode
ter até 10% a mais ou a menos do que o desejado).
</li>
</ul>
<li>Com isso, podemos selecionar até 3 alimentos para uma refeição, os quais podem ser filtrados por:</li>
<ul>
<li>Texto: você pode inserir um texto para filtrar a lista com apenas os alimentos que contém aquela
porção de texto (como uma palavra em específico, por exemplo),</li>
<li>Gráfico de violino (na esquerda): você pode selecionar uma porção do gráfico de violino (com a
função de "brush") para filtrar a lista
com apenas os alimentos que contém aquela porção de macronutrientes (a intersecção dos filtros).
</li>
</ul>
<li>Após escolher um alimento, devemos escolher qual dos alimentos estamos escolhendo (1, 2 ou 3), para
isso, utilizamos o dropdown ao lado do que seleciona o alimento;</li>
<li>Após escolher um alimento e qual sua "posição" no prato, devemos clicar no botão de confirmar para
atualizar os dados com a escolha (após isso podemos reiniciar o processo e escolher os outros alimentos,
até formar o prato com até 3 alimentos),</li>
<li>Após selecionar todos os alimentos do prato, é necessário indicar a quantidade de cada um deles que será
consumida na
refeição
(por padrão, 50g), para isso, temos um slider que nos permite variar a quantidade desejada.</li>
</ul>
<p>Com isso, conseguimos ver pelo gráfico de barras (à direita), a partir das cores, se a refeição está balanceada ou não, sendo: verde para balanceada, vermelho para
excesso do macronutriente e amerelo para falta do macronutriente na refeição.</p>
<p>Vale lembrar que alguns valores padrão foram definidos, com base nas opiniões de alguns nutricionistas que
foram indicados em fontes já citadas anteriormente. Esses valores podem ser alterados pelo usuário, caso ele
tenha outra recomendação de alimentação (dado que isso pode variar de acordo com o objetivo do usuário
também).</p>
<br>
<p>Observação: a página foi desenvolvida para ficar bem dimensionada para uma tela (de notebook) com 15.6",
podendo ficar com algo mal alinhado em outras dimensões (infelizmente a página não é bem responsiva). Se
algo estiver fora do lugar, recomendamos utilizar a função de zoom out do navegador (atalho "CTRL -" para
grande parte dos navegadores).
</p>
</div>
<!-- Área para inserir informações do usuário -->
<div class="conteiner">
<h2>Informações do usuário</h2>
<div id="observablehq-inserts_cell-50c5675d"></div>
</div>
<!-- Parte só últil no backend -->
<div id="observablehq-insert_atualize_barchart_cell-50c5675d" class="not_visible"></div>
<!-- Seletor dos alimentos e sliders -->
<div id="seletor_e_sliders">
<!-- Seletor dos alimentos -->
<div id="observablehq-list_food_cell-50c5675d"></div>
<!-- Sliders para os pesos dos alimentos -->
<div id="observablehq-sliders_quantity_cell-50c5675d"></div>
</div>
<!-- Gráficos -->
<div id="observablehq-bar_chart_cell-50c5675d"></div>
<!-- Valor energético do prato -->
<div class="conteiner">
<div id="observablehq-valor_energetico-50c5675d"></div>
</div>
<!-- Parágrafo final -->
<div class="conteiner">
<h2>Links importantes</h2>
<p>Por fim, gostaríamos de deixar alguns links importantes desse projeto:</p>
<ul>
<li>
O <a href="https://observablehq.com/d/ffb89fcb60d326fa">repositório no observable</a> com o notebook no
qual foram desenvolvidas as visualizações desse projeto,
</li>
<li>
O <a href="https://github.com/fgv-vis-2023/assignment-3-nutricao_em_um_olhar">repositório no github</a>
com o código fonte desse projeto (a página html) e o relatório do mesmo.
</li>
</ul>
</div>
<!-- Parte só últil no backend -->
<div class="not_visible">
<div id="observablehq-init_bar_chart_cell-50c5675d"></div>
<div id="observablehq-outputs_alimentos-50c5675d"></div>
<div id="observablehq-filter_food_to_bar_chart-50c5675d"></div>
<div id="observablehq-alimentos_selecionados-50c5675d"></div>
<div id="observablehq-filtro_textual-50c5675d"></div>
<div id="observablehq-num_alimento-50c5675d"></div>
<div id="observablehq-botao_confirmar-50c5675d"></div>
<div id="observablehq-function_to_sliders_of_quantity_of_food_cell-50c5675d"></div>
<div id="observablehq-function_confirm_buttom-50c5675d"></div>
<div id="observablehq-update_dropdown-50c5675d"></div>
<div id="observablehq-update_dropdown_cell-50c5675d"></div>
<div id="observablehq-brush_cell-50c5675d"></div>
<div id="observablehq-violinplot_function_cell-50c5675d"></div>
<div id="observablehq-BarChart-50c5675d"></div>
<div id="observablehq-chart-50c5675d"></div>
<div id="observablehq-pallete-50c5675d"></div>
<p>Credit: <a href="https://observablehq.com/d/ffb89fcb60d326fa@1777">Untitled by Bruno Pereira Fornaro</a></p>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/dist/inspector.css">
<!-- Link com o repositório do projeto no observable: https://observablehq.com/d/ffb89fcb60d326fa -->
<script type="module">
import { Runtime, Inspector } from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@5/dist/runtime.js";
import define from "https://api.observablehq.com/d/[email protected]?v=3";
new Runtime().module(define, name => {
if (name === "inserts_cell") return new Inspector(document.querySelector("#observablehq-inserts_cell-50c5675d"));
if (name === "insert_atualize_barchart_cell") return new Inspector(document.querySelector("#observablehq-insert_atualize_barchart_cell-50c5675d"));
if (name === "list_food_cell") return new Inspector(document.querySelector("#observablehq-list_food_cell-50c5675d"));
if (name === "sliders_quantity_cell") return new Inspector(document.querySelector("#observablehq-sliders_quantity_cell-50c5675d"));
if (name === "bar_chart_cell") return new Inspector(document.querySelector("#observablehq-bar_chart_cell-50c5675d"));
if (name === "valor_energetico") return new Inspector(document.querySelector("#observablehq-valor_energetico-50c5675d"));
if (name === "init_bar_chart_cell") return new Inspector(document.querySelector("#observablehq-init_bar_chart_cell-50c5675d"));
if (name === "outputs_alimentos") return new Inspector(document.querySelector("#observablehq-outputs_alimentos-50c5675d"));
if (name === "filter_food_to_bar_chart") return new Inspector(document.querySelector("#observablehq-filter_food_to_bar_chart-50c5675d"));
if (name === "alimentos_selecionados") return new Inspector(document.querySelector("#observablehq-alimentos_selecionados-50c5675d"));
if (name === "filtro_textual") return new Inspector(document.querySelector("#observablehq-filtro_textual-50c5675d"));
if (name === "num_alimento") return new Inspector(document.querySelector("#observablehq-num_alimento-50c5675d"));
if (name === "botao_confirmar") return new Inspector(document.querySelector("#observablehq-botao_confirmar-50c5675d"));
if (name === "function_to_sliders_of_quantity_of_food_cell") return new Inspector(document.querySelector("#observablehq-function_to_sliders_of_quantity_of_food_cell-50c5675d"));
if (name === "function_confirm_buttom") return new Inspector(document.querySelector("#observablehq-function_confirm_buttom-50c5675d"));
if (name === "update_dropdown") return new Inspector(document.querySelector("#observablehq-update_dropdown-50c5675d"));
if (name === "update_dropdown_cell") return new Inspector(document.querySelector("#observablehq-update_dropdown_cell-50c5675d"));
if (name === "brush_cell") return new Inspector(document.querySelector("#observablehq-brush_cell-50c5675d"));
if (name === "violinplot_function_cell") return new Inspector(document.querySelector("#observablehq-violinplot_function_cell-50c5675d"));
if (name === "BarChart") return new Inspector(document.querySelector("#observablehq-BarChart-50c5675d"));
if (name === "pallete") return new Inspector(document.querySelector("#observablehq-pallete-50c5675d"));
});
</script>
</body>