Estou tentando escolher a tecnologia certa a ser usada para atualizar um projeto que basicamente renderiza milhares de pontos em um gráfico panorâmico com zoom. A implementação atual, usando Protovis, está abaixo do esperado. Confira aqui:

http://www.planethunters.org/classify

Existem cerca de 2000 pontos quando o zoom está totalmente diminuído. Tente usar as alças na parte inferior para ampliar um pouco e arraste-o para se movimentar. Você vai ver que é bastante instável e seu uso da CPU provavelmente vai até 100% em um núcleo, a menos que você tenha um computador realmente rápido. Cada mudança na área de foco chama um redesenho de protovis que é muito lento e pior com mais pontos desenhados.

Eu gostaria de fazer algumas atualizações para a interface, bem como alterar a tecnologia de visualização subjacente para ser mais responsivo com animação e interação. No artigo a seguir, parece que a escolha é entre outra biblioteca baseada em SVG ou uma baseada em tela:

http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/

d3.js, que surgiu da Protovis, é baseada em SVG e édeveria ser melhor em renderizar animações. No entanto, tenho dúvidas sobre o quanto melhor e qual é o seu teto de desempenho. Por essa razão, também estou considerando uma revisão mais completa usando uma biblioteca baseada em canvas comoKineticJS. No entanto, antes de me aprofundar no uso de uma ou outra abordagem, gostaria de ouvir de alguém que fez um aplicativo da Web semelhante com tantos dados e obter sua opinião.

O mais importante é o desempenho, com um foco secundário na facilidade de adicionar outros recursos de interação e programar a animação. Provavelmente não haverá mais de 2000 pontos de uma vez, com essas pequenas barras de erro em cada um.Ampliar, afastar e deslocar precisa ser suave. Se as bibliotecas SVG mais recentes são decentes nisso, então talvez a facilidade de usar o d3 supere a configuração aumentada do KineticJS, etc. Mas se há uma enorme vantagem de desempenho em usar uma tela, especialmente para pessoas com computadores mais lentos, com certeza gostaria de ir por esse caminho.

Exemplo de aplicativo feito pelo NYTimes que usa SVG, mas ainda anima de forma aceitavelmente suave:http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html . Se eu conseguir esse desempenho e não precisar escrever meu próprio código de desenho de tela, provavelmente usaria o SVG.

Notei que alguns usuários usaram um híbrido deManipulação de d3.js combinada com renderização de tela. No entanto, não consigo encontrar muita documentação sobre isso on-line ou entrar em contato com o OP desse post. Se alguém tiver alguma experiência fazendo esse tipo de DOM-to-Canvas (demonstração, código) implementação, eu gostaria de ouvir de você também. Parece ser um bom híbrido de ser capaz de manipular dados e ter controle personalizado sobre como renderizá-lo (e, portanto, desempenho), mas eu estou querendo saber se ter que carregar tudo no DOM ainda vai desacelerar as coisas.

Eu sei que existem algumas questões semelhantes a esta, mas nenhuma delas pergunta exatamente a mesma coisa. Obrigado pela ajuda.

Acompanhamento: a implementação que acabei usando está emhttps://github.com/zooniverse/LightCurves