Greenpeace

Experimental stuff

Stuff being tested. It might not work as expected.

Progress bar

Progress bars are small and can be inserted between text...

25%

Progress bar footer

...and they can accumulate progress...

25%
40%

To illustrate progress, or if there’s more than one, to compare progress. Simple progress bars are very easy to do in our site. More advanced progress bars can be interactive and animated. They can interact for example with a map, links or select element.

Progress bars can’t be shared (at the moment) with other sites with a classic “download” link. This will be developed if we use them in important projects.

Copy Copy 2

Intersections

Venn diagrams are great to show intersections between elements.

This library also allows interactive diagrams. And you can use plain CSS and Javascript with each element.

Copy Docs

Tag cloud

A tag cloud (word cloud, or weighted list in visual design) is a novelty visual representation of text data, typically used to depict keyword metadata (tags) on websites, or to visualize free form text.

Copy Docs

Gapminder

Gapminder-like bubble chart. It needs more testing, can't remove toolbar, Data as a csv. Doesn't work well with small screens, use with care!

Zoomable Circle Packing

Circular packing or circular treemap allows to visualise a hierarchic architecture better than with a treemap, but it's not as space efficient.

Counter

Counters can be used for visualisations when we want to show urgency. The classic “money spent in”...

Copy counter Docs

 

Prev Next