Need implementation advice for a visual concept (rather infovis than gaming)

[felix kamille]

hello folks!

 

I created some kind of visual language to illustrate information of a certain subject including lots of data but non-quantitative things as well such as (text, images, videos etc.). it's a combination of DATAVIS and VISUAL STORYTELLING. I'd like to explain the visual concept to you shortly and would appreciate your thoughts of how you would implement the visuals.

 

the visual key concept in short:

a 

set of circles

 

representing a quantitative value

 by the amount of circles (

numerosity

), e.g. 1000 people. the circles are 

arranged automatically

 following some kind of 

physics 

(e.g. force layout). the 

circles can be rearranged

 as sub sets or simple bar charts, but even more individual shapes are possible such as the shape of a human body or a country's borderline. a circle may 

contain clipped content

 such as a portrait of somebody. the user can 

interact with them

: they show tooltips when hovering. 

additional ui elements

 are added by clicking them. 

zooming

 is also important (zoomable information landscape).

 

I attached some ILLUSTRATION below.

 

technical additions:

1. the circles can be many, up to 5.000 circles maybe...of course not all containing pictures and stuff at the same time, but just 5.000 simple circles to represent a certain amount of something should be possible including movement when rearranging them
2. it has to be web based, of course, no flash or sth 3rd party, native HTML5 etc
3. I've worked with d3 and lots of circles before. I considered the canvas and maybe WebGL to do a better job concerning performance. SVG has problems with lots of elements. not to mention the total amount of elements limit for browsers. so I found pixi. 
4. any visual framework suggestion? pixi.js, d3js, threejs, paperjs, maybe game dev frameworks...
5. any physics framework suggestion? box2dweb, matterjs, phsyicsjs, coffeephysics...

in parts it is similar to: http://wefeelfine.org/

 

thank you a lot folks! I really appreciate every single answer.

greets from dresden