Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

CNN's Ecosphere in HTML5

DZone's Guide to

CNN's Ecosphere in HTML5

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

We've seen WebGL worlds and tweet clouds before, but what about a WebGL earth with a virtual ecosystem whose localized growth is determined by Twitter activity?

Okay, maybe you hadn't thought of that before. (Though why not? if languaging is like life itself.) But CNN did, and has their glorious new CNN Ecosphere to show for it.

Here's how CNN describes the site:

The ECOSPHERE is a real-time Twitter Visualiser that aggregates tweets tagged with #COP17 and then orders them into specific topics or discussions.

Each submitted tweet will stimulate growth in the individual topic plants causing some plants to grow larger or faster than others depending on how the conversation is evolving. The result is an instant snapshot of how the world sees climate change. 


And here's a screenshot:


Each colored cauliflower-like growth corresponds to a specific topic, and expands or contracts under a combination of tweet and time pressure.

Cool idea in itself, but the interactive visualization makes it much cooler. Try playing with it a little, then viewing this 'making of' video from the development studio (Minivegas):

Not just WebGL, but WebGL linked with Twitter to visualize data in a way that smacks iconically of the data itself. Runs very smoothly in my browser, too.

 

Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.

Topics:

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}