Over a million developers have joined DZone.

CNN's Ecosphere in HTML5

DZone's Guide to

CNN's Ecosphere in HTML5

· Web Dev Zone
Free Resource

Discover how to focus on operators for Reactive Programming and how they are essential to react to data in your application.  Brought to you in partnership with Wakanda

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.


Learn how divergent branches can appear in your repository and how to better understand why they are called “branches".  Brought to you in partnership with Wakanda


Opinions expressed by DZone contributors are their own.


Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.


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

{{ parent.tldr }}

{{ parent.urlSource.name }}