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.

Sumário

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

Pré-requisitos

Para rodar o programa, primeiro, clone o repositório em seu computador com

git clone

Provavelmente você vai precisar instalar:

• A versão 3.6.3 (atual) do R
• Rstudio
• Bibliotecas de R

Tutoriais e links estão disponíveis a seguir.

Instalação do R 3.6.3 e RStudio

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 --version

Para instalar o Rstudio, primeiro, entre aqui e baixe o Rstudio Desktop

Outras instruções caso a instalação não funcione

Instalação das bibliotecas em R

A instalação da maioria das bibliotecas se resolve com

install.packages("package_name")

r
packages 

Se 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.R


Se executar as funções para os modelos referentes ao município é o que você procura, execute
bash
$ Rscript update_municipio.R --m SP


Se o que quer é executar as funções para os modelos referentes aos estados, execute
bash
$ Rscript update_estado.R


Se quer executar todos ao mesmo tempo,
bash
$ Rscript update_all.R

Alguns 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 
.html
 e 
.svg
 serão atualizados na pasta 
web
, 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) ou 
plots_municipio.R
 (gráficos referentes a todos os municipios). 

Em um dos arquivos 
update.R
 (gráficos referente Brasil todo) ou  
update_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.atualizar 
IMPORTANTE: 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.R
 da forma
r
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 o
plots.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 BR


Escolha 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.

  
    TITULO DA PÁGINA
  


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:

Alterando o logo do observatório

Busque por

src=""

2. Título Principal

Este grupo inclui o título principal da página e a data de atualização.

Alterando o título da página

Busque por

3. Cards de conteúdo

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.

Criando um card

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`

TITULO DO CARD

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 substituindo TITULO DO CARD

TITULO DO CARD

2. Conteúdo

Existem múltiplos elementos de conteúdo que podem ser combinados livremente em um card:

2.1.1 Data de atualização (automatica)

Ao compilar o arquivo

update.R

Última atualização: 

javascript

updateDate('last.update');

2.1.2 Data de atualização (manual)

Se necessário, modifique uma data de atualização manual buscando por

Última atualização: DD/MM/AAAA HH:MM

2.2 Imagem estática com legenda

Modifique uma imagem estática e sua legenda buscando por

 
BREVE LEGENDA AQUI
 

2.3 Gráfico GGPlot interativo

Modifique um GGPlot interativo buscando por

Nota:

IDENTIFICADOR.DO.GRAFICO

estados.html

IDENTIFICADOR.GRÁFICO.UF

IDENTIFICADOR.GRÁFICO

2.4 Legenda de gráfico

Modifique a legenda de um gráfico buscando por

  LEGENDA 1
  LEGENDA 2

A cor da legenda pode ser alterada substituindo

COR_DA_LEGENDA

legendBlack
legendGrey
legendBlue
legendLightBlue
legendDarkBlue
legendPurple
legendPink
legendRed
legendOrange
legendYellow
legendGreen
legendTeal

2.5 Texto justificado

Modifique o texto de um card buscando por

  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.

2.6 Assinatura

Modifique uma assinatura buscando por

Observatório COVID-19

2.7 Botão com link para outra página

Modifique um botão buscando por

  TEXTO DO BOTÃO

2.8 Botão com texto escondido

Modifique um botão que revela texto escondido buscando por

    TEXTO DO BOTÃO ▾



    

2.9 Equação matemática

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 \)

2.10 Tabelas automáticas

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.

Carregando...

2.11 Tabela de Conteúdo

Caso queira uma tabela de conteúdo na sua página, descomente o código

html

html

Índice

Adicionando cards em uma página

Substitua qualquer

Mudando a quantidade de colunas

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

 pela 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 tags 

Seu texto aqui



Adicionando 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:
 
  
  
Seu texto aqui



Para trocar o ícone basta substituir 
 pelo código do ícone desejado, obtido em Ionicons

Lembre-se

Alterações nas barras superior e inferior devem ser incluidas em todos os arquivos .html para garantir consistência na navegação.