Prototipar animações e efeitos visuais [Ideia #72]

[rodmaia]

• [x] Prototipar 3 alternativas de efeitos visuais
• [x] Testar bibliotecas de animação mais promissoras
• [x] Implementar 3 provas de conceito dos protótipos usando uma ou mais bibliotecas
• [x] Fazer ajustes na API para buscar dados relacionados as ideias acima, se necessário
• [x] Verificar possibilidade de adicionar alguma informação adicional na API salic que possa agregar valor no produto;
• [x] Identificar filtros pertinentes para cada uma das visualizações;

Critérios de aceitação

• [x] Responsivo
• [x] Performance
• [x] Todas as formas de visualização precisam utilizar dados reais ou dados mock para mostrar de forma clara a proposta.
• [x] Todas as formas de visualização precisam entregar valor para o MinC, não pode ser só "bonitinho".
• [x] A equipe inteira deve estar consciente das propostas sendo implementadas, ou seja, o que ela agrega de valor.

[FranciscoSMM]

Exemplo visual dos grafos, usando curvas para as ligações entre os estados e as siglas das UFs dentro dos circulos.

[joaaogui]

Em relação ao grafo:

Branch: graph File: gh-pages/graph.html

Para popular o grafo, abrir o console do browser e rodar getLinks()

Pendencias:

• Mudar o nome dos estado de dentro da bola para a sigla de cada um
• Definir qual o melhor tamanho para as bolinhas , devido a diferença entre os estados com muitos e os com menos projetos

[joaaogui]

Sunburst:

• Trocar biblioteca para o echarts, com o objetivo de utilizar somente uma biblioteca.
• Tamanho do sunburst, pode diminuir, principalmente a área central
• Para continuar com visualização de sunburst, é indispensável ter a visualização de segmentos.
• Não funciona mostrar a diferença entre range de anos, mudar para uma visualização do sunburst para cada ano

[FranciscoSMM]

Nessa issue, primeiramente nós fizemos um panorama de partes do salic em que poderiamos criar um valor ou apresentar novas visualizações sobre as informações já mostradas.

Assim, após discutirmos, decidimos que fariamos representações relacionadas a DESLOCAMENTOS de projetos e ao quantidades deles variando com o TEMPO.

Pesquisando bibliotecas de JAvascript para descobrir ideias de como representar as informações que escolhemos, ficamos com 2 no final da pesquisa:

O Echarts https://ecomfe.github.io/echarts-doc/public/en/index.html

E a do Vasturiano https://github.com/vasturiano/sunburst-chart

A primeira estamos usando mais para utilizar a ideia de GRAFOS, para o deslocamento e um gráfico de SUNBURST para tempo.

No gráfico de sunburst a ideia é de colocar as camadas aparecendo depois de se selecionar a área que se quer. Também precisamos usar setas para indicar diferentes segmentos, pois alguns são pequenos demais para que existam palavras dentro deles. Outra parte seria de usar um gradiente de cores relacionadas as áreas para poder remeter a escolhida.

Com os grafos, estabelecemos que a grossura das ligações entre cada estado determinaria a quantidade de deslocamentos entre eles e o tamanho da bola de cada estado seria a quantidade de deslocamentos dentro do próprio estado. Com o grafo, um tamanho mínimo para a bola do estado era preciso, uma vez que havia uma disparidade muito grande entre a quantidade de deslocamentos. Ainda existe um problema quanto a força de repulsão entre os estados.

[marcosronaldo]

Terceira ideia em #155