3e:null 3f:["$","title",null,{"children":"A Dengue no Brasil | Felippe Rodrigues | Observable"}] 45:T51d,## Como a aplicação funciona? A aplicação aqui presente **NÃO** tem a pretensão de fornecer uma predição perfeita da Dengue no Brasil. Ela foi desenvolvida utilizando técnicas de [redes neurais](https://pt.wikipedia.org/wiki/Rede_neural_artificial) para tentar aproximar ao máximo a tendência do número de casos de dengue por semana epidemiológica para cada um dos estados brasileiros, e para ser o mais transparente possível quanto a seus métodos e suas incertezas intrínsecas. Além da incerteza exposta pelas [barras de confiança na própria visualização](http://proceedings.mlr.press/v48/gal16.pdf), as quais tentam representar a variação interna derivada da natureza [estocástica](https://pt.wikipedia.org/wiki/Estoc%C3%A1stico) do modelo preditivo utilizado, existe uma incerteza aleatória intrínseca, que deriva da própria coleta de dados de Dengue no território nacional, a qual, infelizmente, não pode ser completamente eliminada. Variações em menor ou até maior escala dos valores reais são esperadas e prováveis! Ainda assim, acreditamos que os modelos disponibilizados são úteis para a obtenção de alertas a curto prazo, e principalmente para promover o pensamento crítico e baseado em dados sobre a possibilidade de novas epidemias de Dengue no Brasil. 46:Ta2f,## Como a plataforma Observable funciona Nossa aplicação web é executada totalmente no computador do usuário. Isso quer dizer que todos os dados que você inserir na aplicação ficam contidos completamente em seu navegador e só são acessíveis a você. Sendo assim, fique à vontade para utilizar dados que pendem confirmação, ou para simplesmente explorar diferentes cenários hipotéticos, com a certeza de que ninguém terá acesso aquela informação até que você deseje compartilhá-la. Além disso, os modelos utilizados para a predição também ficam disponíveis abertamente na web (para o acompanhamento por pesquisadores, e para propagação de conhecimento com a comunidade), então explore-os diretamente em seus [repositórios](about:blank). Como essa é uma aplicação local e limitada a uma sessão específica de seu navegador, quando você o reiniciar ou eventualmente trocar da página atual, todos os dados não salvos, inseridos ou preditos, serão perdidos. Para evitar retrabalho, uma vez que você possua um volume suficiente de valores inseridos, ou uma predição que você acredita ser muito representativa de um cenário futuro, você poderá exportar o banco de dados que contém o estado atual da sua visualização, e simplesmente inseri-lo novamente para retornar de onde parou. Por fim, os cálculos que o modelo realiza tentam utilizar da melhor maneira possível os recursos disponíveis em sua máquina e acessíveis pelo seu navegador. Sendo assim, computadores mais potentes, que possuem placas de vídeo, podem apresentar predições mais rápidas, enquanto computadores mais antigos ou com recursos limitados poderão experimentar um pequeno atraso entre simulações. Com isso em mente, os modelos disponibilizados foram desenvolvidos pensando na sua compatibilidade com ambientes diversos, presando pela sua disponibilidade acima de performance bruta de modelos maiores. A ideia aqui é que o modelo esteja nas suas mãos! É nosso desejo que esta aplicação, bem como as informações históricas presentes em toda a plataforma, promovam o pensamento crítico sobre epidemias de arboviroses no Brasil! Além disso, esperamos inspirar novas atividades similares, em que todas as componentes do projeto aqui disponibilizadas possam ser adaptadas e expandidas, permitindo que novos usuários melhorem os modelos preditivos aqui disponibilizados ou as possibilidades de nossa interface! O UNICEF acredita no livre compartilhamento do conhecimento, e esperamos que formatos interativos sejam cada vez mais comuns na comunicação científica. 47:T927,48:T469,async function drawLegend($el) { return (transition, data) => { const legend = $el.selectAll('foreignObject') .data([ [ ...data.slice(0,3), { values: data[2].values.length > 0 ? [1] : [], type: 'Intervalo de Confiança (95%)' }, { values: data[2].values.length > 0 ? [1] : [], type: 'Benchmark' } ] ]) .join('foreignObject') .attr('width', w) .attr('height', h) .selectAll('.legend-wrapper') .data(d => [d]) .join('xhtml:div') .classed('legend-wrapper', true) .selectAll('.legend-group') .data(d => d) .join('xhtml:div') .classed('legend-group', true); legend.selectAll('.legend__rect') .data(d => d.values.slice(0,1).map(e => d.type)) .join('xhtml:div') .classed('legend__rect', true) .style('background-color', d => d === 'Benchmark' ? '#F26A21' : scaleColor(d)); legend.selectAll('.legend__label') .data(d => d.values.slice(0,1).map(e => d.type)) .join('xhtml:span') .classed('legend__label', true) .text(d => d.toUpperCase()); } }49:T4ac,function drawBars($el) { // return updating function return (transition, range, newData) => { const { MIN_DATE, MAX_DATE, MAX_VALUE, ENTRIES } = range; const barW = w / ENTRIES; scaleX.domain([MIN_DATE * 1000, MAX_DATE * 1000]); scaleY.domain([0, MAX_VALUE]); let $groups = $el.selectAll('g') .data(newData.slice(0,3), d => d.type) .join('g') .attr('fill', d => scaleColor(d.type)); const $bars = $groups .selectAll('rect') .data(d => d.values, d => d.END) .join( enter => enter .append('rect') .attr('x', d => scaleX(d.END * 1000)) .attr('width', barW) .attr('y', h) .attr('height', 0) .on('mouseenter', (event, d) => showTooltipOnEnter(event, d)) .on('mouseleave', (event, d) => hideTooltipOnLeave(event, d)), update => update, exit => exit.remove(), ) .call(bar => bar .transition(transition) .attr('x', d => scaleX(d.END * 1000)) .attr('width', barW) .transition(transition) .attr('y', d => scaleY(d.N_CASES)) .attr('height', d => h - scaleY(d.N_CASES)) ); } }4a:T4de,barChart = { const $svg = d3.select('.d3-graph') const $axis = d3.select('.g-axis').attr('transform', `translate(${margin.l},${margin.t})`) const $vis = d3.select('.g-vis').attr('transform', `translate(${margin.l},${margin.t})`) const $benchmark = d3.select('.g-benchmark').attr('transform', `translate(${margin.l},${margin.t})`) const $ciInterval = d3.select('.g-ciInterval').attr('transform', `translate(${margin.l},${margin.t})`) const $legend = d3.select('.g-legend').attr('transform', `translate(${margin.l},0)`) await HistCasesByStateFill(); const bars = await drawBars($vis); const axis = await drawAxis($axis); const legend = await drawLegend($legend); const ciInterval = await drawCIBars($ciInterval); const benchmark = await drawBenchmarkLines($benchmark); return { async update() { const dataIn = await data(); const range = await getRange(); const transition = $svg.transition() .duration(250) .ease(d3.easeLinear); bars(transition, range, dataIn); axis(transition, range, dataIn); legend(transition, dataIn); ciInterval(transition, range, dataIn); benchmark(transition, range, dataIn) return 'Gráfico redesenhado'; } } }4b:[{"id":"9f15df4289b7e119d55099812b35a91bd51f7c48dcd1298ef04fc56b54b2d15a3105d4aee0916f8d285e08a1ea13ea14468c55079268dd0b7978cce38693e44f","href":"https://static.observableusercontent.com/files/9f15df4289b7e119d55099812b35a91bd51f7c48dcd1298ef04fc56b54b2d15a3105d4aee0916f8d285e08a1ea13ea14468c55079268dd0b7978cce38693e44f","name":"Dengue_Original.db","type":"application/x-sqlite3","lastModified":1749450334157.04,"size":720896},{"id":"9c20a27a2b3c8c70992b092b176609e746da20f8b16d905594b1f0f8ed337da013e2f8cb58cc13eccb319f86d2d3be195bf078a14c084900c1cb967a8f622322","href":"https://static.observableusercontent.com/files/9c20a27a2b3c8c70992b092b176609e746da20f8b16d905594b1f0f8ed337da013e2f8cb58cc13eccb319f86d2d3be195bf078a14c084900c1cb967a8f622322","name":"IMG_8137x.jpg","type":"image/jpeg","lastModified":1749450334157.04,"size":3609789}] 43:{"id":"ace3d52a405c3da6","slug":null,"title":"A Dengue no Brasil","thumbnail":"c1641ee87bc106c461409fb0e79d3557f816103fc264ea23ae468b3a49a51cd6","access_level":"unlisted","create_time":"$D2025-06-09T06:25:34.157Z","update_time":"$D2025-06-09T06:26:00.711Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"28cd53ad0591db87","login":"fsorodrigues","name":"Felippe Rodrigues","avatar_url":"https://avatars-next.observableusercontent.com/eecaaecedda0bf6d53d64dcca0bd39dfe79d9a84fe90af8ef76169c09f90f3cc","tier":"starter_2024","bio":"","following":false},"version":1789,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0de7a26e438e89eb","login":"fsorodrigues","name":"Felippe Rodrigues","avatar_url":"https://avatars-next.observableusercontent.com/eecaaecedda0bf6d53d64dcca0bd39dfe79d9a84fe90af8ef76169c09f90f3cc","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"0de7a26e438e89eb","login":"fsorodrigues","name":"Felippe Rodrigues","avatar_url":"https://avatars-next.observableusercontent.com/eecaaecedda0bf6d53d64dcca0bd39dfe79d9a84fe90af8ef76169c09f90f3cc","tier":null,"role":"editor"},{"type":"team","id":"28cd53ad0591db87","login":"fsorodrigues","name":"Felippe Rodrigues","avatar_url":"https://avatars-next.observableusercontent.com/eecaaecedda0bf6d53d64dcca0bd39dfe79d9a84fe90af8ef76169c09f90f3cc","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A Dengue no Brasil","cells":[{"id":0,"value":"

A Dengue no Brasil

Modelo preditivo de casos

\n UNICEF BRASIL\n

\n DOE AGORA\n

\n \n\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":979,"value":"Dados: Ministério da Saúde","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1599,"value":"Semanas no passado: 52\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":23,"value":"$45","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1499,"value":"## Para quem fizemos a aplicação\n- Gestores de saúde pública e tomadores de decisão que queiram usufruir de uma plataforma unificada para visualização de dados de dengue.\n\n- Jornalistas e comunicadores da ciência, os quais podem utilizar as visualizações e análises desenvolvidas sobre a dengue em suas próprias plataformas.\n\n- População em geral, a qual pode se beneficiar de conhecer mais sobre o histórico da dengue no Brasil e em especial em seu Estado. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":834,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1766,"value":"Foto: João Laet","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":854,"value":"$46","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"# Apêndice\n## Aplicação\nVariáveis globais","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"mutable index = (await getState()).ID","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1178,"value":"mutable estado = (await getState()).STATE_ID","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"NextDate = db.query(`\n SELECT WEEK, \n YEAR, \n strftime('%d-%m', DATETIME(BEGIN,'unixepoch')) as BEGIN,\n strftime('%d-%m', DATETIME(END,'unixepoch')) as END \n FROM FutureDates WHERE ID = $1`, [`${index +1}`]\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"mutable predicted = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"Executar função que desenha o gráfico","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"barChart.update()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"Executar funções que registra eventos nos botões/menus","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"addEventListeners()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"## Dados","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"Importar base de dados com SQLite","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"db = FileAttachment(\"Dengue_Original.db\").sqlite()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"Variável de controle do estado ativo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"Preparar tabelas para o gráfico","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"async function HistCasesByStateFill() {\n const appState = await getState();\n await db.query(`\n REPLACE INTO HistCasesByState\n SELECT * FROM HistDengueCases\n WHERE STATE_ID LIKE $1`,\n [`${appState.STATE_ID}`]\n )\n return \"Dados inseridos na tabela\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"async function graph_historicCases() {\n const zoom = getZoomValue();\n return await db.query(`\n SELECT * FROM HistCasesByState\n ORDER BY END DESC\n LIMIT ${zoom}\n `)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"async function graph_UserInput() {\n return await db.query(`SELECT * FROM UserInputCases`)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"async function graph_Predicted() {\n return await db.query(`SELECT * FROM PredictedCases`);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":998,"value":"async function graph_Real(graph_UserInput, graph_Predicted) {\n const appState = await getState();\n return graph_Predicted.length \n ? await db.query(`\n SELECT * FROM RealDengueCases\n WHERE STATE_ID LIKE $1\n LIMIT $2`,\n [`${appState.STATE_ID}`, `${graph_UserInput.length + graph_Predicted.length}`]\n ) \n : [];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1313,"value":"data()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"Criar objeto para \"d3 data bind\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"async function data() {\n const input = await graph_UserInput();\n const predicted = await graph_Predicted();\n return [\n { values: await graph_historicCases(), type: 'Casos históricos' }, \n { values: input, type: 'Casos inseridos' },\n { values: predicted, type: 'Casos preditos' },\n { values: await graph_Real(input, predicted), type: 'Benchmark' },\n ]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"Carregar tabela com semanas epidemiológicas no futuro","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"dates = db.query(\"SELECT * FROM FutureDates\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"## Escalas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"scaleY = d3.scaleLinear().range([h, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"scaleX = d3.scaleTime().range([0, w]).nice()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"scaleColor = d3.scaleOrdinal()\n .domain(['Casos históricos', 'Casos inseridos', 'Casos preditos', 'Intervalo de Confiança (95%)'])\n .range(colorScheme)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"Paleta de cores para escala","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"colorInterpolator = d3.interpolate('#1CABE2','#edf8fd')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":174,"value":"colorScheme = { \n const scale = d3.scaleLinear().domain([0,3]);\n return [...d3.range(0,3).map(d => colorInterpolator(scale(d))), '#D8D1C9'];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"## Layout\n### Gráfico","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"margin = ({ t: 25, r: 100, b: 10, l: 50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1555,"value":"padding = ({ y: 4, x: 8 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":196,"value":"h = height - (margin.t + margin.b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"w = width - (margin.r + margin.l)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1785,"value":"d3.select('.input-range').on('input', handleWeekInputChange)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"### CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1538,"value":"Tooltip e interações","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1542,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1079,"value":"Menu de controle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1075,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1088,"value":"Tipografia","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"$47","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"## Funções\n### Modelo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":218,"value":"function extract_array(table, size) {\n let vals = new Array(table.length);\n for(let i = 0; i < table.length; i++){\n vals[i] = table[i].N_CASES\n }\n return vals.slice(-size)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"async function model(appState) {\n const model = await tf.loadGraphModel(`https://raw.githubusercontent.com/unicefBR-dengueproject/historic-dengue-models/main/${appState.STATE_ID}/model.json`);\n const val_full = await db.query(`\n SELECT END, N_CASES FROM(\n SELECT END, N_CASES FROM HistCasesByState\n UNION\n SELECT END, N_CASES FROM UserInputCases)\n `);\n \n const input_size = parseInt(model.signature.inputs.input_1.tensorShape.dim[1].size); // Tamanho do input para o modelo\n const input = extract_array(val_full, input_size);\n\n const tensorInput = tf.tile(tf.tensor(input).reshape([1, -1, 1]), [100,1,1]) // Numero de valores para predição sequencial\n const predict_graph = await model.executeAsync(tensorInput)\n const tensor = tf.moments(predict_graph, 0); // previously mean_var\n \n return {\n mean: await tensor.mean.reshape([-1]).array(),\n std: await tensor.variance.sqrt().reshape([-1]).array(),\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"### Utils","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"function insert_prediction_table(mean, std, appState){\n for(let i = 0; i < mean.length; i++){\n db.query(`\n INSERT INTO PredictedCases \n SELECT $1, WEEK, YEAR, BEGIN, END, $2, $3 \n FROM FutureDates \n WHERE ID = $4`, \n [`${appState.STATE_ID}`,`${mean[i]}`, `${std[i]}`,`${appState.ID + 1 + i}`]\n )\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"async function getRange() {\n const zoom = getZoomValue();\n const query = await db.query(`\n WITH HistoricSlice AS (\n SELECT N_CASES, END FROM HistCasesByState ORDER BY END DESC LIMIT ${zoom}\n ),\n Range AS (\n SELECT N_CASES, END FROM HistoricSlice\n UNION\n SELECT N_CASES, END FROM UserInputCases\n UNION\n SELECT N_CASES + 2 * STDDEV AS N_CASES, END FROM PredictedCases\n )\n SELECT MIN(END) AS MIN_DATE, MAX(END) AS MAX_DATE,\n MAX(N_CASES) * 1.25 AS MAX_VALUE, COUNT(N_CASES) AS ENTRIES\n FROM Range\n `);\n \n return query[0];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1128,"value":"getState = async function() {\n const query = await db.query('SELECT * FROM InternalState');\n return query[0]\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"function numberFormatter(x, n) {\n return x.toLocaleString('pt-BR', { minimumFractionDigits: 0, maximumFractionDigits: n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1777,"value":"async function handleWeekInputChange(ev) {\n const value = +ev.target.value;\n const max = +ev.target.max;\n const min = +ev.target.min;\n const weekValue = max - value + min;\n d3.select('.input-value').text(weekValue);\n \n // redesenhar o gráfico\n barChart.update();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1781,"value":"function getZoomValue() {\n const value = +d3.select('.input-range').node().value;\n const max = +d3.select('.input-range').attr('max');\n const min = +d3.select('.input-range').attr('min');\n const weekValue = max - value + min;\n return weekValue;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"### Eventos\nFunções de eventos \nExecutadas para interação do usuário com o gráfico","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"async function clickAdd() {\n // selecionar \n const input = d3.select('#CasosUser');\n // obter valor em \n const value = +input.property('value');\n\n // carregar dados do estado interno\n const appState = await getState();\n const newIndex = appState.ID + 1;\n\n // inserir novo valor na tabela\n await db.query(`\n INSERT INTO UserInputCases\n SELECT ID, $1, WEEK, YEAR, BEGIN, END, $2 FROM FutureDates WHERE ID = $3`, \n [`${appState.STATE_ID}`, `${value}`, `${newIndex}`]\n );\n await db.query(`DELETE FROM PredictedCases`)\n // atualizar estado da aplicação\n await db.query(`UPDATE InternalState SET ID = $1`, [`${newIndex}`]);\n\n mutable index = newIndex;\n\n // volta ao valor 0\n input.property('value', 0);\n\n // update base dados para download\n registerDownloadBtn()\n\n // redesenhar o gráfico\n barChart.update()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"async function clickRemove() {\n const appState = await getState();\n const newIndex = appState.ID > 0 ? appState.ID - 1 : 0;\n await db.query(`DELETE FROM UserInputCases WHERE ID = $1`, [`${appState.ID}`])\n await db.query(`DELETE FROM PredictedCases`)\n await db.query(`UPDATE InternalState SET ID = $1`, [`${newIndex}`]);\n\n mutable index = newIndex;\n\n // update base dados para download\n registerDownloadBtn()\n\n // update gráfico\n barChart.update()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"async function clickModel() {\n const appState = await getState();\n // realizar predição\n const { mean, std } = await model(appState);\n insert_prediction_table(mean, std, appState)\n mutable predicted = true;\n \n // update base dados para download\n registerDownloadBtn()\n\n // redesenhar o gráfico\n barChart.update()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"async function changeState() {\n const value = d3.select('#estadosMenu').node().value\n \n // resetar gráfico e tabelas\n await db.query(`DELETE FROM HistCasesByState`);\n await db.query(`DELETE FROM PredictedCases`);\n await db.query(`DELETE FROM UserInputCases`);\n await db.query(`UPDATE InternalState SET ID = 0, STATE_ID = $1`, [`${value}`]);\n await HistCasesByStateFill();\n mutable predicted = false;\n mutable index = 0;\n mutable estado = value;\n \n // update base dados para download\n registerDownloadBtn()\n\n // redesenhar o gráfico\n barChart.update()\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"function save_name() {\n const date_now = new Date;\n // adjust 0 before single digit date\n const date = (\"0\" + date_now.getDate()).slice(-2);\n // current month\n const month = (\"0\" + (date_now.getMonth() + 1)).slice(-2);\n // current year\n const year = date_now.getFullYear();\n // current hours\n const hours = date_now.getHours();\n // current minutes\n const minutes = date_now.getMinutes();\n // current seconds\n const seconds = date_now.getSeconds();\n\n const appState = getState();\n \n // prints date & time in YYYY-MM-DD HH:MM:SS format\n return (year + \"-\" + month + \"-\" + date + \"T\" + hours + \"-\" + minutes + \"-\" + seconds + \"_ProjectDengue_UF_\" + appState.STATE_ID +\".db\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":805,"value":"downloadBtn = async () => {\n const downloadData = new Blob([await db._db.export()]);\n const size = (downloadData.size / 1024).toFixed(0);\n const button = DOM.download(\n downloadData,\n save_name(),\n `Download (${size}kb)`\n );\n\n return button;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1524,"value":"function showTooltipOnEnter(event, d) {\n const tooltip = d3.select('.tooltip')\n const $target = d3.select(event.target)\n const { x, y, width, height } = event.target.getBBox();\n\n tooltip.select(`.tooltip__content`)\n .html(() => {\n const stdDev = d.STDDEV ? ` +/-${numberFormatter(2 * d.STDDEV, 1)}` : '';\n return `\n SE ${d.WEEK}/${d.YEAR}
\n Casos: ${numberFormatter(d.N_CASES, 1)}${stdDev}\n ` \n });\n \n tooltip\n .style('opacity', 1)\n .style('transform', `translate(${margin.l}px, ${margin.t}px)`)\n .style('top', `${y - (tooltip.node().clientHeight + padding.y)}px`)\n .style('left', `${x - (tooltip.node().clientWidth/2) + width/2}px`);\n\n $target.classed('active', true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1525,"value":"function hideTooltipOnLeave(event, d) {\n const tooltip = d3.select('.tooltip')\n const $target = d3.select(event.target)\n $target.classed('active', false);\n\n tooltip.style('opacity', 0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"Registradora de eventos \nExecuta as funções acima e registra eventos nos elementos da aplicação","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":257,"value":"function addEventListeners() {\n d3.select('#adicionarBtn').on('click', clickAdd);\n\n d3.select('#removerBtn').on('click', clickRemove);\n\n d3.select('#modelBtn').on('click', clickModel);\n\n d3.select('#estadosMenu').on('change', changeState);\n\n return \"Eventos registrados\"\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":890,"value":"Download button","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"async function registerDownloadBtn() {\n const button = await downloadBtn();\n const container = d3.select('.downloadBtn-container').node();\n while (container.firstChild) {\n container.removeChild(container.lastChild); \n }\n container.appendChild(html`Salve os seus dados: ${button}`);\n\n return 'Botão registrado'\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"### Gráfico\nComponentes \nUtilizadas para desenhar partes específicas dos gráficos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"function drawAxis($el) {\n const xAxis = d3.axisBottom(scaleX).ticks(d3.timeYear.every(1)).tickSize(0);\n const x = $el\n .selectAll('.axis-x')\n .data([1])\n .join('g')\n .classed('axis-x', true);\n \n const yAxis = d3.axisLeft(scaleY).ticks(5); \n const y = $el\n .selectAll('.axis-y')\n .data([1])\n .join('g')\n .classed('axis-y', true);\n\n return async (transition, range) => {\n x.attr('transform', `translate(0,${h})`).transition(transition).call(xAxis);\n y.transition(transition).call(yAxis);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1015,"value":"pathGen = d3.line()\n .x(d => scaleX(d.END * 1000))\n .y(d => scaleY(d.N_CASES))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1012,"value":"async function drawBenchmarkLines($el) {\n return (transition, range, newData) => {\n const { MIN_DATE, MAX_DATE, MAX_VALUE, ENTRIES } = range;\n scaleX.domain([MIN_DATE * 1000, MAX_DATE * 1000]);\n scaleY.domain([0, MAX_VALUE]);\n\n // \n const $groups = $el.selectAll('g')\n .data(newData.slice(-1), d => d.type)\n .join('g');\n\n //\n const $line = $groups.selectAll('path');\n \n $line\n .data(d => [d.values])\n .join(\n enter => enter\n .append('path')\n .attr('d', pathGen),\n update => update,\n exit => exit.remove(),\n )\n .attr('fill', 'none')\n .attr('stroke', '#F26A21')\n .attr('stroke-width', 3)\n .call(line => line\n .transition(transition)\n .attr('d', pathGen)\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"async function drawCIBars($el) { \n return (transition, range, newData) => {\n const { ENTRIES } = range;\n const barW = w / ENTRIES;\n\n const interval = $el\n .attr('fill', scaleColor('Intervalo de Confiança (95%)'))\n .attr('opacity', 0.8);\n \n interval.selectAll('rect')\n .data(newData[2].values, d => d.END)\n .join('rect')\n .transition(transition)\n .attr('x', d => scaleX(d.END * 1000) + barW / 4)\n .transition(transition)\n .attr('width', barW / 2)\n .attr('y', d => scaleY(d.N_CASES))\n .transition(transition)\n .attr('y', d => scaleY(d.N_CASES + 2 * d.STDDEV))\n .attr('height', d => h - scaleY(4 * d.STDDEV))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"Aplicação \nFunções dos componentes são executadas dentro dessa função. \nAnimação acontece com a execução do método `update`.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"## Bibliotecas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"// tf = require('@tensorflow/tfjs')\ntf = require('@tensorflow/tfjs@3.7')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 44:"$43:body"