Rainforest Infographic

Paul Rouget von Mozilla gab mir kürzlich Motivation für ein Wochenendexperiment:

I challenge you to create a beautiful CSS3/HTML5 infographic...build something interactive/live/animated/sexy in CSS3/HTML5/SVG, share it here. I'll publish the most interesting ones on the Mozilla Hacks blog :) (probably in June).

Zunächst suchte ich nach einer einigermaßen guten Datenquelle, die viele Informationen bereitstellt und deren Thematik mich interessiert. Ich entschied mich relativ schnell für die Regenwälder unseres Planeten, speziell für deren Schwund und die Abholzung. Mit Mongabay fand ich auch schnell eine brauchbare Datenquelle. Thema war gewählt und Daten vorhanden - es konnte also losgehen. Die Seite benutzt HTML5 Markup und CSS3. Viele Standard-Dinge, aber auch einige knifflige Sachen habe ich ausprobiert und hatte viel Spaß daran. Ich wollte möglichst wenig bzw. keine Bilder verwenden, sondern alle Elemente mittels Markup und CSS-Style erstellen. Ein bisschen JavaScript musste natürlich auch sein. Nach einigen MooTools Orgien habe ich mal jQuery benutzt. Die Seite bleibt insofern trotzdem statisch, da ich keine externe API anzapfe um Live Daten zu erhalten.

Schaut es euch live an und gebt mir bitte Feedback!

Addendum

Die Seite wurde gestern bei t3n erwähnt! Vielen Dank dafür!