This presentation highlights findings from my work as a visualization designer. The seven principles are distilled pieces from projects I reviewed or worked on myself. I believe it's important to learn from every project as much as you can and share this experience with the community to grow collectively.

1. HELLO!
I’m Benjamin from Interactive Things
presented by Interactive Things 1

2. INTERACTIVE THINGS
User Experience & Data Visualization Studio
presented by Interactive Things 2

3. DATAVISUALIZATION.CH
Resource for Data Visualization & Infographics
presented by Interactive Things 3

5. 7
Principles for Engaging Users with Visualization
presented by Interactive Things 5

6. SUPPLY
Build an treasure chest of data.
presented by Interactive Things 6

12. NARRATION
Tell compelling stories with visualization.
presented by Interactive Things 9

13. Donald Norman
“
Stories are important cognitive
events, for they encapsulate, into
one compact package, information,
knowledge, context, & emotion.
presented by Interactive Things 10

14. Edward Segel & Jeffrey Heer
Narrative Visualization: Telling Stories with Data
Martini Glass Structure
Interactive Slideshow
Drill-Down Story
presented by Interactive Things 11

15. New York Times: Faces of the Dead

16. Edward Segel & Jeffrey Heer
Narrative Visualization: Telling Stories with Data
Martini Glass Structure
Interactive Slideshow
Drill-Down Story
presented by Interactive Things 13

17. New York Times: Budget Forecasts, Compared With Reality

18. Edward Segel & Jeffrey Heer
Narrative Visualization: Telling Stories with Data
Martini Glass Structure
Interactive Slideshow
Drill-Down Story
presented by Interactive Things 15

19. New York Times: Murder: New York City

20. PERSONALIZATION
Make the reader feel at home.
presented by Interactive Things 17

21. New York Times: Jobless Rate for People Like You

22. PARTICIPATION
Foster the dialog between people.
presented by Interactive Things 19

23. New York Times: Mapping America

24. ACTION
Inspire the user to create real impact.
presented by Interactive Things 21

25. Green Peace & Daniel Fischer: Small Habits

26. Global Giving & Roland Loesslein: The Human's Development

27. MEASUREMENT
Analyze the hell out of your work.
presented by Interactive Things 24

28. Google Analytics Chartbeat
Bitly Clicky

29. UNDP & Interactive Things: Human Development Index 2.0

30. OECD, Moritz Stefaner & Raureif: Better Life Index

31. EXPERIMENTATION
Push the medium forward.
presented by Interactive Things 28

34. side without overlapping them.
In our roadside stand example there are three separate
businesses, but what if there were thirty? Thirty bar charts per
week lined up next to each other would be too much. A stacked bar
chart gives us the total sales, but what if we wanted to compare
within each week? We could make a line graph for each store and
then plot all thirty on the same graph. That, too, would quickly
get overcrowded with information. As weʼve seen, once we exceed
about five or six, we start to run out of unique colours, shapes,
thicknesses and so on. Graphing thirty at once becomes a mess.
400
300
200
100
1 2 3 4 5 6 7 8 9 10 11 12
Peter Gassner. Designing with Data - PDF. 13th August 2010. © Five Simple Steps.

35. 141 A Practical Guide to Designing with data ~ Area graphs and charts
400
300
200
100
1 2 3 4 5 6 7 8 9 10 11 12
This is the niche that horizon graphs are designed to fill. They are
basic line graphs split horizontally into a set number of bands.
This example uses four bands, but they can contain as many
as required. Each of the bands is coloured with an increasing
intensity of blue. So far, this is no different than a standard line
graph with some interesting shading.
The next part is the Eureka! moment. Since we are really only
interested in the outer edge of the line graph, why not collapse
each of the bands on top of each other to save space?

36. 200
100
1 2 3 4 5 6 7 8 9 10 11 12
This is the niche that horizon graphs are designed to fill. They are
basic line graphs split horizontally into a set number of bands.
This example uses four bands, but they can contain as many
as required. Each of the bands is coloured with an increasing
intensity of blue. So far, this is no different than a standard line
graph with some interesting shading.
The next part is the Eureka! moment. Since we are really only
interested in the outer edge of the line graph, why not collapse
each of the bands on top of each other to save space?
1 2 3 4 5 6 7 8 9 10 11 12
Now we have the same data presented in a quarter of the space.
By changing the colour of the shading, the graph appears to be
stacking up the parts. There is nothing hiding behind any of the
peaks so, unlike 3-D charts, nothing is being obscured.
This works with both positive and negative values.
Maybe in some weeks the shops were making a loss, which can
be represented with a different colour, such as varying intensities
of red.

37. 142
400
300
200
100
-100
-200
-300
-400
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Now you can rapidly see which weeks saw gains and which saw
losses, and at the same time also watch the line trend upwards
or downwards.
The horizon graph works really well when large numbers of
data sets need to be compared. Converting one line graph into a
horizon graph does save some space, but now that we have this
ribbon, we can stack more ribbons on top to get a quick view of all

38. 400
300
200
100
-100
-200
-300
-400
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
Now you can rapidly see which weeks saw gains and which saw
losses, and at the same time also watch the line trend upwards
or downwards.
The horizon graph works really well when large numbers of
data sets need to be compared. Converting one line graph into a
horizon graph does save some space, but now that we have this
ribbon, we can stack more ribbons on top to get a quick view of all
the different shops and compare them in a limited space.
Shop 27
Shop 28

39. Computed Interactive Dynamic Animated
presented by Interactive Things 32

40. Radiales Netzwerk

41. Radial Network with
Radiales Netzwerk Edge Bundling

42. Force Directed Layout

43. Force Directed Layout

44. Streamgraph

45. Voronoi Tessalation

46. Computed Interactive Dynamic Animated
presented by Interactive Things 37

47. Moritz Stefaner: Map Your Moves

48. PushPopPress: Our Choice

49. Computed Interactive Dynamic Animated
presented by Interactive Things 40

50. GE & Periscopic: Cancer Conversations

51. Computed Interactive Dynamic Animated
presented by Interactive Things 42

52. City of Geneva, Lift & Interactive Things: Ville Vivante

53. SUPPLY
NARRATION
PERSONALIZATION
ACTION
MEASUREMENT
EXPERIMENTATION
presented by Interactive Things 44

55. Edward Tufte
“
The idea for information design is:
Don't get it original, get it right.
presented by Interactive Things 46

56. MERCI!
Don’t hesitate to get in touch:
+41 44 267 66 44
hello@interactivethings.com
@ixt
presented by Interactive Things 47