Greenpeace

Guide to create visualisations for our sites

3rd version - faster, easier to share and more compatible

Add data visualisations, infographics and multimedia to our site. Recommendations on how to share this materials with other sites.

▸ 6 core principles:

Sun icon

Clarity

Communicate clearly to the average citizen. We aim for simplicity instead of graphics for experts.

Computer, tablet and mobile

Any device

Graphs that render properly in any device: desktops, mobiles and tablets.

Earth icon

Any page and forever

Publish on any page of any of our sites and that it stays published forever.

Share icon

Share with anyone

To be able to share with any site and that they can translate and adjust the graphics.

Website design icon

Consistent with our design

Be consistent with the design of our sites, using a predefined color palette and official fonts.

Collaboration icon

Openness and collaboration

Encourage and accept external quality collaborations , be more open and transparent in our campaigns. (open and open source).

Howto guides and more than 58 examples you can use... now!

▸ Charts and tables

  1. Bar charts
  2. Line charts and mixed charts
  3. Pie charts
  4. Bubble charts and scatter diagrams
  5. Timelines
  6. Fluxes
  7. Treemap & heatmap
  8. Experimental stuff
  9. Zoom, annotations, scales, errors and other deviations
  10. Networks
  11. Tables

How to use charts that draw responsive graphics automatically from data in any screen size.

▸ Maps

  1. Geo charts
  2. Maps

How to use interactive maps, and tools to build maps.

▸ Multimedia and infographics

  1. Multimedia
  2. Infographics
  3. Typography and colours
  4. Sizes, formats and file types
  5. Interactivity and animation
  6. Add an infographic to your website
  7. Inserting an iframe in a page

How to add interactive and responsive videos, infographics, and interactive pieces. Rules for typography and colours.

▸ Other

  1. Publishing in social media New
  2. Sharing with others
  3. Using infographics, charts and maps created by others
  4. Visualisation development, testing and translation - Tool to develop, test and translate interactive visualisations in different Greenpeace layouts.

How to share data visualisation and infographics with other sites and create a space for open collaboration.

 

It all starts with the story that we want to tell with data ...

Use the previous and next buttons at the end of every page to browse this style guide.

 

Next