Ferramentas de visualização

[Andres MRM]

Edgar, o Angular que você falou é esse?
https://angularjs.org/
Não achei exemplos de gráficos com ele... Mas parece ser uma biblioteca
interessante para facilitar desenvolvimento no cliente.

Te recomendo dar uma olhada no:
http://www.highcharts.com/
Pelo que eu tenho de experiência com ele, as visualizações saem bem fácil e
são bem bonitas. Mas talvez ele não seja tão flexível como o D3... Teria que
ver como é para criar novos modelos de visualizações, nunca tentei.
Ele é forte para barras e linhas, mas tem bastante coisa.
Aparentemente não há um treemap "oficial", mas achei esse aqui:
http://jsfiddle.net/highcharts/VUrr9/
Tem esse aqui que talvez substitua o treemap em alguns casos:
http://www.highcharts.com/demo/pie-drilldown
Esse pode ser bom para mostrar dados das subs:
http://www.highcharts.com/maps/demo/rich-info/grid-light
Tem plugin para permitir a exportação dos dados da visualização em CSV:
http://www.highcharts.com/plugin-registry/single/7/Export-CSV
Não sei se esse plugin será útil, porque provavelmente disponibilizaremos os
dados de outra forma, mas...
Aqui tem um site do Highcharts para experimentos online:
http://cloud.highcharts.com/
Dá até para fazer upload dos dados e ir brincando.


Abs!

[Andres MRM]

Tom, aquela visualização que você mostrou de Berlin, com os gastos por
distrito, é aberta? Pode passar o link?

Será que seria bom irmos sistematizando essas informações na wiki? Ou primeiro
damos uma discutida para depois colocar lá?

>--
>Você está recebendo esta mensagem porque se inscreveu no grupo "gastosabertos-dev" dos Grupos do Google.
>Para cancelar inscrição nesse grupo e parar de receber e-mails dele, envie um e-mail para gastosabertos-...@googlegroups.com.
>Para postar neste grupo, envie um e-mail para gastosab...@googlegroups.com.
>Para ver esta discussão na web, acesse https://groups.google.com/d/msgid/gastosabertos-dev/20141119011903.GD8697%40utopos.Home.
>Para obter mais opções, acesse https://groups.google.com/d/optout.

[Edgar Zanella Alvarenga]

On 18/11/2014 23:54, Andres MRM wrote:
> Tom, aquela visualização que você mostrou de Berlin, com os gastos
> por
> distrito, é aberta? Pode passar o link?

https://github.com/okfn/bubbletree/wiki/Bubble-Tree-Documentation

> Será que seria bom irmos sistematizando essas informações na wiki? Ou
> primeiro damos uma discutida para depois colocar lá?

Podemos ir colocando idéias de visualizações, links, comentários,
possíveis
casos de usos com nossos dados, etc no wiki sim. Everton, qual o link
mesmo?

[Edgar Zanella Alvarenga]

On 18/11/2014 23:19, Andres MRM wrote:
> Edgar, o Angular que você falou é esse?
> https://angularjs.org/

Isso, mas não falei quanto aos gráficos, mas como framework js mesmo.
Utilizamos isso no Mosaico Orçamentário da FGV que vai ser lançado
assim
que tivermos utilizando computadore quânticos. Eu não gostei muito da
minha curta experiência com o Angular, achei bem overengineered, mas tá
bem na modinha atualmente.

Pra frameworks reativos nessa linha eu tive uma experiência muita boa
com o Meteor (https://meteor.com/), mas nunca usei num projeto complexo
pra saber os pontos baixos. Mas que é fácil subir um protótipo de uma
aplicação em tempo real com ele (etherpad, ethercalc, chats, etc) isso
é.
Mas como alternativa ao Angular existem o Knockout e Ember, mas esses
possuo pouca experiência pra falar algo.

> Não achei exemplos de gráficos com ele... Mas parece ser uma
> biblioteca
> interessante para facilitar desenvolvimento no cliente.

No caso do Mosaico utilizamos o Angular com as visualizações realizadas
via
um treemap modificado, tabelas com o datatables e gráficos utilizamos o
NVD3
(http://nvd3.org) que é construída em cima do D3, acho que pelo mesmo
criador
do D3.

O Highhart me pareceu legal esteticamente, mas não sei o quão fácil
seria a
sua integração numa framework como o Angular. Pelo menos existe um
projeto
construindo directives do Angular pro Highchart
(https://github.com/pablojim/highcharts-ng),
então não deve ser problemático.

> Te recomendo dar uma olhada no:
> http://www.highcharts.com/
> Pelo que eu tenho de experiência com ele, as visualizações saem bem
> fácil e
> são bem bonitas. Mas talvez ele não seja tão flexível como o D3...

Eles não são comparáveis na verdade, o D3 é uma biblioteca de baixo
nível
que poderia ser utilizada para a contrução de algo equivalente ao
HighChart.
Não é o caso, visto que ele foi feito com uma salada maluca de Jquery,
Mootools
e Prototype e depois é compilado com o Closure.

Algo mais comparável a ele seria o NVD3, que é bonitinho mas achei bem
inflexível
quanto a customizações. Algumas modificações simples dos gráficos
quando o usei
precisei mudar o código dele em mais de um lugar.

> Teria que ver como é para criar novos modelos de visualizações, nunca
> tentei.
> Ele é forte para barras e linhas, mas tem bastante coisa.
> Aparentemente não há um treemap "oficial", mas achei esse aqui:
> http://jsfiddle.net/highcharts/VUrr9/

Não gosto muito do Treemap, mas esse exemplo é bem básico. Se formos
usar um Treemap
de preferência será melhor pegar algo pronto mais avançado pra
customizarmos.

> Tem esse aqui que talvez substitua o treemap em alguns casos:
> http://www.highcharts.com/demo/pie-drilldown

Gráficos de torta são um dos piores gráficos do mundo! Me fazem amar os
Treemaps! :)

> Esse pode ser bom para mostrar dados das subs:
> http://www.highcharts.com/maps/demo/rich-info/grid-light

Bem legal esse, mas me assustei com a pergormance do exemplo com
Drilldown. Não sei
se foi um problema só no Firefox, mas que fica lento aqui fica.

> Tem plugin para permitir a exportação dos dados da visualização em
> CSV:
> http://www.highcharts.com/plugin-registry/single/7/Export-CSV
> Não sei se esse plugin será útil, porque provavelmente
> disponibilizaremos os
> dados de outra forma, mas...

Sim, acho mais provável isso ser feito server side, talvez via CKAN ou
OpenSpending
mesmo.

Edgar

[Andres MRM]

On 19-11-14 01:36, Edgar Zanella Alvarenga wrote:
>On 18/11/2014 23:19, Andres MRM wrote:
>>Edgar, o Angular que você falou é esse?
>>https://angularjs.org/
>
>Isso, mas não falei quanto aos gráficos, mas como framework js mesmo.
>Utilizamos isso no Mosaico Orçamentário da FGV que vai ser lançado
>assim
>que tivermos utilizando computadore quânticos. Eu não gostei muito da
>minha curta experiência com o Angular, achei bem overengineered, mas tá
>bem na modinha atualmente.
>
>Pra frameworks reativos nessa linha eu tive uma experiência muita boa
>com o Meteor (https://meteor.com/), mas nunca usei num projeto complexo
>pra saber os pontos baixos. Mas que é fácil subir um protótipo de uma
>aplicação em tempo real com ele (etherpad, ethercalc, chats, etc) isso
>é.
>Mas como alternativa ao Angular existem o Knockout e Ember, mas esses
>possuo pouca experiência pra falar algo.
>

Interessante, nunca usei um framework JS nesse estilo. Sempre achei JS meio
bagunçado, mas minha tentativa de torná-lo mais palatável foi usando
CoffeeScript, o que não ajudou muito.

Você conhece o http://pyjs.org/ ? (o site está temporariamente indisponível..)
Ele permite desenvolver toda a interface em Python e compila para JS.
Parece bem "overengineered" também, mas sempre tive vontade de experimentar.
Mas não me parece muito adequado para esse projeto especificamente.

>>Tem esse aqui que talvez substitua o treemap em alguns casos:
>>http://www.highcharts.com/demo/pie-drilldown
>
>Gráficos de torta são um dos piores gráficos do mundo! Me fazem amar
>os Treemaps! :)

Hahah! Você não é a primeira pessoa que me diz isso, mas nunca entendi
direito, qual o problema com as tortas?

>>Esse pode ser bom para mostrar dados das subs:
>>http://www.highcharts.com/maps/demo/rich-info/grid-light
>
>Bem legal esse, mas me assustei com a pergormance do exemplo com
>Drilldown. Não sei
>se foi um problema só no Firefox, mas que fica lento aqui fica.

Uso FF36 aqui e ficou normal. O que não quer dizer que a biblioteca não seja
pesada... Pode ser questão de hardware. Aqui tenho (8 x 3.30GHz e 8Gb).

[Edgar Zanella Alvarenga]

On 19/11/2014 09:58, Andres MRM wrote:

> Interessante, nunca usei um framework JS nesse estilo. Sempre achei
> JS meio
> bagunçado, mas minha tentativa de torná-lo mais palatável foi usando
> CoffeeScript, o que não ajudou muito.
>
> Você conhece o http://pyjs.org/ ? (o site está temporariamente
> indisponível..)
> Ele permite desenvolver toda a interface em Python e compila para JS.
> Parece bem "overengineered" também, mas sempre tive vontade de
> experimentar.
> Mas não me parece muito adequado para esse projeto especificamente.

A alguns anos atrás eu estudei Pyjamas pra desenvolver uma ferramenta
mas
no final optei por fazer em Pylons mesmo e fazer o Javascript só usando
jquery
mesmo. O Pyjamas era um projeto com uma comunidade minúscula e preferi
não
arriscar com um projeto que não parecia maduro o suficiente (nada
contra utilizar
um projeto com uma comunidade pequena por estar em seus primeiros
passos, mas
dependendo do projeto você não vai querer o risco de ter que ficar
reinventando
a roda toda hora, gastar seu tempo de desenvolvimento ampliando um
framework
ao invés de focar na sua aplicação fora o risco do projeto sair do ar a
qualquer
instante). O Pyjs um dos forks do Pyjamas e com uma história
conturbada
(https://en.wikipedia.org/wiki/Pyjamas_%28software%29#History).

>>Gráficos de torta são um dos piores gráficos do mundo! Me fazem amar
>> os Treemaps! :)
> Hahah! Você não é a primeira pessoa que me diz isso, mas nunca
> entendi
> direito, qual o problema com as tortas?

https://en.wikipedia.org/wiki/Pie_chart#Use.2C_effectiveness_and_visual_perception
http://www.richardhollins.com/blog/why-pie-charts-suck/
http://www.brockcraft.com/2009/07/07/three-reasons-why-pie-charts-suck/
http://blog.jgc.org/2009/08/please-dont-use-pie-charts.html
https://prezi.com/wf46godeghfm/this-is-why-3d-pie-charts-suck/

Mas resumo: nossos cérebros são péssimos para estimar áreas, bem
melhores em
comparações lineares.

> Uso FF36 aqui e ficou normal. O que não quer dizer que a biblioteca
> não seja
> pesada... Pode ser questão de hardware. Aqui tenho (8 x 3.30GHz e
> 8Gb).

Meu computador é "velhinho" (Core 2 Quad, 5Gb de Ram) mas não acho que
seja a
causa. Pode ser um código mau optimizado mesmo (dói o coração sempre
que pego
algo ridículo que rodaria bem mais rápido num 486 se não fosse feito em
js e
estivesse rodando dentro de um navegador :P).

[Andres MRM]

Eu tinha dado uma olhada na história dos dois, justamente para entender a
diferença. Aparentemente o Pyjs está mais ativo do que o Pyjamas...

>
>>>Gráficos de torta são um dos piores gráficos do mundo! Me fazem
>>>amar os Treemaps! :)
>>Hahah! Você não é a primeira pessoa que me diz isso, mas nunca
>>entendi
>>direito, qual o problema com as tortas?
>
>https://en.wikipedia.org/wiki/Pie_chart#Use.2C_effectiveness_and_visual_perception
>http://www.richardhollins.com/blog/why-pie-charts-suck/
>http://www.brockcraft.com/2009/07/07/three-reasons-why-pie-charts-suck/
>http://blog.jgc.org/2009/08/please-dont-use-pie-charts.html
>https://prezi.com/wf46godeghfm/this-is-why-3d-pie-charts-suck/
>
>Mas resumo: nossos cérebros são péssimos para estimar áreas, bem
>melhores em
>comparações lineares.

É talvez tenha razão, para comparar vários dados a torta começa a bagunçar.
Mas acho que para casos simples, como mostrar uma porcentagem apenas, ela
serve bem. Algo como no Cuidando: http://cuidando.org.br/map.php?year=2014

>
>>Uso FF36 aqui e ficou normal. O que não quer dizer que a biblioteca
>>não seja
>>pesada... Pode ser questão de hardware. Aqui tenho (8 x 3.30GHz e
>>8Gb).
>
>Meu computador é "velhinho" (Core 2 Quad, 5Gb de Ram) mas não acho que
>seja a
>causa. Pode ser um código mau optimizado mesmo (dói o coração sempre
>que pego
>algo ridículo que rodaria bem mais rápido num 486 se não fosse feito
>em js e
>estivesse rodando dentro de um navegador :P).

Sim... a "web" me agustia as vezes tb.

[Edgar Zanella Alvarenga]

On 19/11/2014 12:20, Andres MRM wrote:

> É talvez tenha razão, para comparar vários dados a torta começa a
> bagunçar.
> Mas acho que para casos simples, como mostrar uma porcentagem apenas,
> ela
> serve bem. Algo como no Cuidando:
> http://cuidando.org.br/map.php?year=2014

Sim, como no final do trecho do artigo da Wikipedia que passei:

"However, if the goal is to compare a given category (a slice of the
pie) with
the total (the whole pie) in a single chart and the multiple is close
to 25 or 50
percent, then a pie chart can often be more effective than a bar graph"