Repositório do site https://covid19br.github.io/
Repositório do site Observatório Covid-19 BR.
Aqui você encontra os códigos para calcular as projeções e gerar os gráficos, assim como os dados usados. Se for alterar qualquer coisa no repositório, siga o tutorial abaixo.
Pré-requisitos
Instalação do R 3.6.3 e RStudio
Instalação das bibliotecas em R
Como baixar e executar
Criando novos gráficos
Atualizando e criando novas páginas em html
Para rodar o programa, primeiro, clone o repositório em seu computador com
git clone. Em seguida, serão necessárias instalações para que o programa compile.
Provavelmente você vai precisar instalar:
Tutoriais e links estão disponíveis a seguir.
Instruções de instalação do R podem ser encontradas aqui. É necessária a versão mais recente do R para executar o código. Se ja possui o R, verifique a versão com o comando
bash $ R --versionE atualize o R.
Para instalar o Rstudio, primeiro, entre aqui e baixe o Rstudio Desktop
Outras instruções caso a instalação não funcione
A instalação da maioria das bibliotecas se resolve com
install.packages("package_name"), em R.Para instalar todas as bibliotecas necessárias, execute o arquivo "./src/installpackages.R". São as bibliotecas a seguir:
r packagesSe por acaso precisar instalar novas bibliotecas, lembre-se de adicionar aqui e no arquivo.
Como baixar e executar
Clone o repositório na linha de comando. Dependendo do que será alterado (pagina de estados, municípios ou do país todo), o comando será diferente.
Caso queira executar as funções para o modelo referente ao brasil inteiro, execute
bash $ Rscript update.RSe executar as funções para os modelos referentes ao município é o que você procura, execute
bash $ Rscript update_municipio.R --m SPSe o que quer é executar as funções para os modelos referentes aos estados, execute
bash $ Rscript update_estado.RSe quer executar todos ao mesmo tempo,
bash $ Rscript update_all.RAlguns avisos aparecem após a execução, e ela demora um pouco. Espere terminar, e se não houver erros, os arquivos referentes aos gráficos em.htmle.svgserão atualizados na pastaweb, e podem ser vistos individualmente direto no navegador.Criando novos gráficos em páginas já existentes
Após terminar de criar um gráfico novo, para que ele seja incluído no html, o primeiro passo é fazer com que ele seja transformado em imagem ".svg" e um código ".html" com ggplotly (que garante a interatividade do gráfico no site). Para isso, ele deve estar sendo plotado em um dos arquivos R
plots.R(gráficos referentes ao Brasil todo) ouplots_municipio.R(gráficos referentes a todos os municipios).Em um dos arquivos
update.R(gráficos referente Brasil todo) ouupdate_municipio.R(referente a todos os municípios), adicione o nome do seu gráfico à lista de gráficos a serem renderizados:## No arquivo de update em questão plots.para.atualizarIMPORTANTE: ele deve ser um ggplot. Caso seja uma análise para estado, enviar uma mensagem.
Adicionando novas modelagens
Caso você tenha um novo modelo a incluir, que gere uma nova página, crie um arquivo para fazer update do seu modelo, e inclua ele no arquivo
update_all.Rda formar source("update_seumodelo.R")Este arquivo de update deve conter as seguintes linhas de código, se os seus plots forem interativos: ```r
Data de Atualizacao
print("Atualizando data de atualizacao...") file <- file("../web/last.update.seumodelo.txt") # coloco o nome do municipio? writeLines(c(paste(now())), file) close(file)
Graficos a serem atualizados
plots.para.atualizar <- makeNamedList(plots.criados) filenames <- names(plots.para.atualizar) n <- length(plots.para.atualizar)
for (i in 1:n){ graph.html <- ggplotly(plots.para.atualizar.municipio[[i]]) %>% layout(margin = list(l = 50, r = 20, b = 20, t = 20, pad = 4)) graph.svg <- plots.para.atualizar[[i]] + theme(axis.text = elementtext(size=11, family="Arial", face="plain"), # ticks axis.title = elementtext(size=14, family="Arial", face="plain")) # title filepath <- paste("../web/",filenames[i],sep="") saveWidget(frameableWidget(graph.html), file = paste(filepath,".html",sep=""), libdir="./libs") # HTML Interative Plot ggsave(paste(filepath,".svg",sep=""), plot = graph.svg, device = svg, scale= .8, width= 210, height = 142, units = "mm") } ``
substituindo apenas oplots.criados` pela lista dos plots que vão ser colocados na página.Caso queira plots estáticos: ```r
Data de Atualizacao
print("Atualizando data de atualizacao...") file <- file("../web/last.update.seumodelo.txt") # coloco o nome do municipio? writeLines(c(paste(now())), file) close(file)
Graficos a serem atualizados
plots.para.atualizar <- makeNamedList(plots.criados) filenames <- names(plots.para.atualizar) n <- length(plots.para.atualizar)
for (i in 1:n){ graph.svg <- plots.para.atualizar.municipio[[i]] + theme(axis.text = elementtext(size=11, family="Arial", face="plain"), # ticks axis.title = elementtext(size=14, family="Arial", face="plain")) # title filepath <- paste("../web/",filenames[i],sep="") ggsave(paste(filepath,".svg",sep=""), plot = graph.svg, device = svg, scale= .8, width= 210, height = 142, units = "mm") } ``` Suas imagenns serão geradas com o mesmo nnome que o plot leva no R.
Atualizando e criando novas páginas
O arquivo
template.htmlé um bom ponto de partida para criação de novas páginas. Ele inclui as barras de navegação superiores e inferiores pré-fabricadas, bem como a estrutura principal do corpo.Primeiro substitua os dados do trecho de código a seguir, que se encontra nas linhas 8 a 11.
html NOME DA SUA PÁGINA · Observatório Covid-19 BREscolha também quais arquivos de CSS sua página vai usar, de acordo com o conteúdo. Para adicionar o arquivo, descomente a linha de código referente a ele. Os possíveis CSS se encontram nas linhas 19 a 24, no trecho
Os aquivos CSS: tables é o estilo para tabelas, o toc é para índices, o midia serve para calendários e listas, email serve para emails ofuscados (que não dá para clicar para evitar span de robôs), accordion serve para criar menus acordeão, e charts serve para estilo de gráficos. Uma pagina simples pode usar apenas o css global, que já está incluido no template.
A estrutura do site é composta por quatro principais grupos:
1. Barra Superior
A barra superior é o elemento flutuante que inclui o logo, o menu de estados e o menu de paginas do site.
Título
Inclua o título da página no trecho a seguir, na linha 73 a 79.
Adicionando itens no menu principal
Inclua os dados da página no código a seguir e use-o para substituir
no arquivo .html:
No arquivo .html do próprio item, o código deve ser o seguinte para correta indicação da página ativa:
Busque por
e substitua o conteúdo desrc=""pelo arquivo .svg desejado.
Este grupo inclui o título principal da página e a data de atualização.
Busque por
e substitua o conteúdo apóspelo título desejado.
Os cards armazenam todas as informações importantes do corpo da página. Conforme mais cards de conteúdo são adicionados sua disposição é atualizada automáticamente.
A estrutura básica de um card é formada por: ``` <!-- NEW.CARD -->
Cada card distinto deve conter um identificador distinto em `` para facilitar sua edição. Basta adicionar os componentes desejados em `` de acordo com os códigos pré-fabricados a seguir: ##### 1. Títulos dos cards Títulos são identificados por `` *Atenção!* Títulos também devem ser inclusos no **conteúdo** do card. ##### 1.1 Título com ícone Modifique o **ícone** buscando por `` e substituindo `NOME_DO_ARQUIVO.svg`. O ícone deve ser uma imagem em .svg. Modifique o **título** buscando por `` e substituindo `TITULO DO CARD` Modifique a **descrição** do card buscando por `` e substituindo `BREVE DESCRICAO`
BREVE DESCRICAO
Use o site Iconfinder (https://www.iconfinder.com/p/coronavirus-awareness-icons) para encontrar ícone gratuitos em svg relacionados ao COVID-19. **Importante:** o nome do autor do ícone deve ser citado em Sobre.1.2 Título sem ícone
Modifique o título buscando por
<!-- CARD.TITLE.TEXT -->
e substituindoTITULO DO CARD
Existem múltiplos elementos de conteúdo que podem ser combinados livremente em um card:
Ao compilar o arquivo
update.Ra hora é atualizada automaticamente para cada página. Insira o código a seguir para exibir o horário da última atualização dos gráficos:
Última atualização:Para cada página, a seguinte função deve ser chamada em
javascriptcom o nome do arquivo que contém a data de atualização como argumento:
updateDate('last.update');A página deve incluir o script updateDate.js para correto funcionamento: Esse script já está incluido no template.
Se necessário, modifique uma data de atualização manual buscando por
ou insira uma nova com o código a seguir:Última atualização: DD/MM/AAAA HH:MM
Modifique uma imagem estática e sua legenda buscando por
ou insira uma nova com o código a seguir:![]()
BREVE LEGENDA AQUI
Modifique um GGPlot interativo buscando por
ou insira um novo utilizando:Nota:
IDENTIFICADOR.DO.GRAFICOdeve ser substituído pelo mesmo identificador utilizado na geração do gráfico nos arquivos para plotagem. Nota 2: Para correto funcionamento na página
estados.html, os gráficos devem ser salvos no R com seguinte nomenclatura:
IDENTIFICADOR.GRÁFICO.UFPorém ao incluí-los no código HTML é necessário omitir o código UF:
IDENTIFICADOR.GRÁFICO
Modifique a legenda de um gráfico buscando por
ou insira uma nova utilizando:Para manter boa visualização online, cada linha pode conter apenas duas legendas. Para adicionar mais legendas adicione um novo bloco.LEGENDA 1 LEGENDA 2
A cor da legenda pode ser alterada substituindo
COR_DA_LEGENDApor:
legendBlack legendGrey legendBlue legendLightBlue legendDarkBlue legendPurple legendPink legendRed legendOrange legendYellow legendGreen legendTeal
Modifique o texto de um card buscando por
(ou pelo próprio texto) ou insira um novo bloco utilizando:Você deve escrever o seu texto aqui. O texto exibido será justificado. Apesar de estar em outra linha, não há quebra de linha aqui. Caso precise de uma quebra de linha, inclua outro bloco de texto.
Modifique uma assinatura buscando por
ou insira uma nova utilizando:Modifique um botão buscando por
ou insira um novo utilizando:TEXTO DO BOTÃO
Modifique um botão que revela texto escondido buscando por
ou insira um novo utilizando:TEXTO DO BOTÃO ▾Em é possível inserir qualquer tipo de conteúdo descrito aqui: texto, imagens, assinaturas e etc.
No final do template está comentado os scripts para equação matemática. No seu arquivo, descomente-os.
Para escrever a equação
\( EQUAÇÃO NA FORMA LATEX AQUI \)
No arquivo template.html o script necessário para utilizar tabelas criadas no R está comentado. Descomente-o apenas em páginas cujo uso de tabelas é necessário.
Adicione o seguinte código em seu card na posição em que gostaria que a tabela. Substitua TABELA.html pelo nome da sua tabela gerada em R.Carregando...
Caso queira uma tabela de conteúdo na sua página, descomente o código
htmle adicione as seguintes linha de código antes dos cards.
htmlATENÇÃO: lembre de descomentar também o CSS relativo a tabela de conteúdo (toc).Índice
Substitua qualquer
pelo código do seu card de acordo com a posição desejada.A quantidade de colunas é ajustada automáticamente de acordo com a tela do dispositivo para permitir melhor navegação mobile. No entanto, caso deseje alterar manualmente o numero de colunas para telas a partir de 1200px de largura basta buscar por
e substituirpela tag desejada:Este caso particular é utilizado para otimizar as páginas específicas de estados em telas de alta resolução.
4. Barra inferior
A barra inferior é o elemento fixo no final da página e pode conter múltiplos itens.
Adicionando texto
Substitua
pelo texto desejado usando as tagsAdicionando texto com ícones
Como o site inclui a biblioteca Ionicons é possível adicionar ícones seguidos de texto na barra inferior.
Substitua
pelo seguinte código, personalizando o texto e o ícone:Para trocar o ícone basta substituir pelo código do ícone desejado, obtido em IoniconsLembre-se
Alterações nas barras superior e inferior devem ser incluidas em todos os arquivos .html para garantir consistência na navegação.