Transforming jQuery Isotope 2D into WebGL Three.js 3D

Published by: Emil // Date 5.12.2013 // Views: 4015 // Add to Twitter :: Facebook

Image
One month ago I saw on Facebook an Square Pie Chart, well, I cannot find it now but that was the impulse to transform jQuery Isotope into 3D WebGL Animation using Three.js. The idea is that Isotope can be made from squares with different sizes and the position of these squars can be translated into 3D space later using Three.js. Same code can create a 3D Word Cloud or some 3D Chart.




Demo:
http://maran-emil.de/experiments/demo17/


Update: I found my inspiration source for this 3D Isotope Code, it was an image from "BehindTheMedspeak: Causes of Untimely Death" article, made by Thomas Porostocky, posted by Bill Gates on twitter/facebook on 18 November.

http://www.bookofjoe.com/2013/11/behindthemedspeak-causes-of-untimely-death.html
https://twitter.com/BillGates/status/402538943901483008/photo/1




---------------------------------------

Related links:

Word Cloud Generator from Jason Davies
http://www.jasondavies.com/wordcloud/
https://github.com/jasondavies/d3-cloud

Isotope jQuery Plugin
http://isotope.metafizzy.co/

---------------------------------------

Inspirational Related Links:

d3.js 2D Square Chart
http://mbostock.github.io/d3/talk/20111018/treemap.html

I love 3D bar charts
http://www.excelcharts.com/blog/i-love-3d-bar-charts/

PIXELS ARE THE NEW PIES
http://dashes.com/anil/2007/07/pixels-are-the-new-pies.html

Americans' Technolust Spending Is as Hot and Heavy as Ever
http://www.wired.com/techbiz/it/magazine/15-08/st_infoporn

Climate Change Survey Results
http://peltiertech.com/WordPress/climate-change-survey-results/