During the lecture I have used: 1. video about video-diagramms http://www.youtube.com/watch?v=rJC7B-9ZfhE 2. video about modern visualization capabilities http://www.youtube.com/watch?v=C4V-ooITrws

1. Практическая визуализация
Антон Осипов
РИА Новости
Скачать презентацию:
slideshare.com/osips

2. Дизайн или код?

3. Дизайн — это интерфейс
0,1 Mb/s 20 000 Mb/s3

4. Дизайн — это интерфейс
4

5. Цвет кодирует логику
5
0,0 0,5 1,0 1,5 2,0 2,5 3,0 3,5 4,0
0,0 0,5 1,0 1,5 2,0 2,5 3,0 3,5 4,00,0 0,5 1,0 1,5 2,0 2,5 3,0 3,5 4,0
0,0 0,5 1,0 1,5 2,0 2,5 3,0 3,5 4,0
0,0 0,5 1,0 1,5 2,0 2,5 3,0 3,5 4,0

6. Близкие объекты связаны
6
Нижний
Киселевск
Новгород
Великий
Нижний
Киселевск
Новгород
Великий

7. Сходные параметры объединяют объекты
7
1 2 3 4 5 6 7 8
2
4
6
8
10
1 2 3 4 5 6 7 8
2
4
6
8
10
1 2 3 4 5 6 7 8
2
4
6
8
10
Форма Размер
Цвет
1 2 3 4 5 6 7 8
2
4
6
8
10

8. Сходные параметры объединяют объекты
8
1 2 3 4 5 6 7 8
2
4
6
8
10
1 2 3 4 5 6 7 8
2
4
6
8
10
Расстояние Объединяющий объект

9. Не плоите лишние сущности
9
0" 5000" 10000" 15000" 20000" 25000" 30000" 35000"
Литва"
Эстония"
Финляндия"
Украина"
Латвия"
Стоимость,)руб.)
Страна)
Отдых)зарубежом)
Перелет" Проживание"в"отеле"
0" 5"000" 10"000" 15"000" 20"000" 25"000" 30"000" 35"000"
Литва"
Эстония"
Финляндия"
Украина"
Латвия"
Стоимость"отдыха"зарубежом"(руб.)"
Перелет" Проживание"в"отеле"

10. Дизайн информации
11
§ Верстка
§ Визуализация
§ Типографика
§ Иллюстация

11. Визуализация: все исследование в одном графике
12

12. Графики — динамика
2
4
6
8
10
0
2
4
6
8
10
0
5
10
15
20
13

13. Гистограммы — абсолютные значения
0
2
4
6
8
10
0
5
10
15
20
0
2
4
6
8
10
14

14. Графики vs Гистограммы
15
3,9
4,0
4,1
4,2
4,3
0
1
2
3
4
5

15. Не используйте объем
0"
1"
2"
3"
4"
5"
4"
5"
4"
5"
16

16. Круговые диаграммы
17

17. Круговые диаграммы
0
2
4
6
8
10
18

18. Все в чем больше 1-го измерения — сложно сравнивать
19

19. Точечные диаграммы
0 1 2 3 4 5 6 7 8
2
4
6
8
10
0 1 2 3 4 5 6 7 8
2
4
6
8
10
0 1 2 3 4 5 6 7 8
2
4
6
8
10
0 1 2 3 4 5 6 7 8
2
4
6
8
10
20

20. Другие виды диаграмм
21

21. Инструменты

22. Скетч интерфейса // Balsamiq.com
24

23. Иконки // TheNounProject.com
25

24. Качественные фотографии // Flickr.com
26

25. Редактирование фотографий // Plus.Google.com
27

26. Подбор цветов // ColorSchemeDesigner.com
28

27. Примеры

28. Примеры // alexa.com, data.worldbank.org
Сложная шкала Шкала отсутствует Чекбоксы
30

29. Примеры // ahrefs.com
Неправильный масштаб Облако тегов
КартаКруговая диаграмма
31

30. Примеры // ec.europa.eu/eurostat
Дерево«Настраиваемость»
32

31. Примеры // data.worldbank.org
Значенния по умолчанию
33

32. Примеры // wordstat.yandex.ru
Позиционирование по ОХ Абсолютные и относительные значения
34

33. Примеры // gapminder.org
6 переменных на 1 диаграмме
35

34. Примеры // google.com/publicdata
Простой интерфейс
36

35. Примеры // data.worldbank.org
Удобная навигация
37

36. Примеры // data.worldbank.org
Простота модификации Продумывание мелочей
38

37. Примеры // artlebedev.ru/studio/stat
Просто, но информативно
39

38. Примеры // asymco.com
Нестандартные типы диарамм
40

39. Библиотеки

40. D3.js Processing 2Google Charts
42
Библиотеки

41. 43

42. 44
Скачать презентацию:
slideshare.com/osips
@AS_Osipov
Anton.Osipov.ru@gmail.com