Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Практическая визуализация
Антон Осипов
РИА Новости
Скачать презентацию:
slideshare.com/osips
Дизайн или код?
Дизайн — это интерфейс
0,1 Mb/s 20 000 Mb/s3
Дизайн — это интерфейс
4
Цвет кодирует логику
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 ...
Близкие объекты связаны
6
Нижний
Киселевск
Новгород
Великий
Нижний
Киселевск
Новгород
Великий
Сходные параметры объединяют объекты
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
Фо...
Сходные параметры объединяют объекты
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
0" 5000" 10000" 15000" 20000" 25000" 30000" 35000"
Литва"
Эстония"
Финляндия"
Украина"
Латвия"...
Дизайн информации
11
§ Верстка
§ Визуализация
§ Типографика
§ Иллюстация
Визуализация: все исследование в одном графике
12
Графики — динамика
2
4
6
8
10
0
2
4
6
8
10
0
5
10
15
20
13
Гистограммы — абсолютные значения
0
2
4
6
8
10
0
5
10
15
20
0
2
4
6
8
10
14
Графики vs Гистограммы
15
3,9
4,0
4,1
4,2
4,3
0
1
2
3
4
5
Не используйте объем
0"
1"
2"
3"
4"
5"
4"
5"
4"
5"
16
Круговые диаграммы
17
Круговые диаграммы
0
2
4
6
8
10
18
Все в чем больше 1-го измерения — сложно сравнивать
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 ...
Другие виды диаграмм
21
Инструменты
Скетч интерфейса // Balsamiq.com
24
Иконки // TheNounProject.com
25
Качественные фотографии // Flickr.com
26
Редактирование фотографий // Plus.Google.com
27
Подбор цветов // ColorSchemeDesigner.com
28
Примеры
Примеры // alexa.com, data.worldbank.org
Сложная шкала Шкала отсутствует Чекбоксы
30
Примеры // ahrefs.com
Неправильный масштаб Облако тегов
КартаКруговая диаграмма
31
Примеры // ec.europa.eu/eurostat
Дерево«Настраиваемость»
32
Примеры // data.worldbank.org
Значенния по умолчанию
33
Примеры // wordstat.yandex.ru
Позиционирование по ОХ Абсолютные и относительные значения
34
Примеры // gapminder.org
6 переменных на 1 диаграмме
35
Примеры // google.com/publicdata
Простой интерфейс
36
Примеры // data.worldbank.org
Удобная навигация
37
Примеры // data.worldbank.org
Простота модификации Продумывание мелочей
38
Примеры // artlebedev.ru/studio/stat
Просто, но информативно
39
Примеры // asymco.com
Нестандартные типы диарамм
40
Библиотеки
D3.js Processing 2Google Charts
42
Библиотеки
43
44
Скачать презентацию:
slideshare.com/osips
@AS_Osipov
Anton.Osipov.ru@gmail.com
Upcoming SlideShare
Loading in …5
×

Practical visualization

1,257 views

Published on

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

Published in: Design

Practical visualization

  1. 1. Практическая визуализация Антон Осипов РИА Новости Скачать презентацию: slideshare.com/osips
  2. 2. Дизайн или код?
  3. 3. Дизайн — это интерфейс 0,1 Mb/s 20 000 Mb/s3
  4. 4. Дизайн — это интерфейс 4
  5. 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. Близкие объекты связаны 6 Нижний Киселевск Новгород Великий Нижний Киселевск Новгород Великий
  7. 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. Сходные параметры объединяют объекты 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. Не плоите лишние сущности 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. 10. Дизайн информации 11 § Верстка § Визуализация § Типографика § Иллюстация
  11. 11. Визуализация: все исследование в одном графике 12
  12. 12. Графики — динамика 2 4 6 8 10 0 2 4 6 8 10 0 5 10 15 20 13
  13. 13. Гистограммы — абсолютные значения 0 2 4 6 8 10 0 5 10 15 20 0 2 4 6 8 10 14
  14. 14. Графики vs Гистограммы 15 3,9 4,0 4,1 4,2 4,3 0 1 2 3 4 5
  15. 15. Не используйте объем 0" 1" 2" 3" 4" 5" 4" 5" 4" 5" 16
  16. 16. Круговые диаграммы 17
  17. 17. Круговые диаграммы 0 2 4 6 8 10 18
  18. 18. Все в чем больше 1-го измерения — сложно сравнивать 19
  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. 20. Другие виды диаграмм 21
  21. 21. Инструменты
  22. 22. Скетч интерфейса // Balsamiq.com 24
  23. 23. Иконки // TheNounProject.com 25
  24. 24. Качественные фотографии // Flickr.com 26
  25. 25. Редактирование фотографий // Plus.Google.com 27
  26. 26. Подбор цветов // ColorSchemeDesigner.com 28
  27. 27. Примеры
  28. 28. Примеры // alexa.com, data.worldbank.org Сложная шкала Шкала отсутствует Чекбоксы 30
  29. 29. Примеры // ahrefs.com Неправильный масштаб Облако тегов КартаКруговая диаграмма 31
  30. 30. Примеры // ec.europa.eu/eurostat Дерево«Настраиваемость» 32
  31. 31. Примеры // data.worldbank.org Значенния по умолчанию 33
  32. 32. Примеры // wordstat.yandex.ru Позиционирование по ОХ Абсолютные и относительные значения 34
  33. 33. Примеры // gapminder.org 6 переменных на 1 диаграмме 35
  34. 34. Примеры // google.com/publicdata Простой интерфейс 36
  35. 35. Примеры // data.worldbank.org Удобная навигация 37
  36. 36. Примеры // data.worldbank.org Простота модификации Продумывание мелочей 38
  37. 37. Примеры // artlebedev.ru/studio/stat Просто, но информативно 39
  38. 38. Примеры // asymco.com Нестандартные типы диарамм 40
  39. 39. Библиотеки
  40. 40. D3.js Processing 2Google Charts 42 Библиотеки
  41. 41. 43
  42. 42. 44 Скачать презентацию: slideshare.com/osips @AS_Osipov Anton.Osipov.ru@gmail.com

×