Denning & Phillips The Llewellyn Practical Guide to Creative Visualization
Practical visualization
-
Upload
anton-osipov -
Category
Design
-
view
886 -
download
1
description
Transcript of Practical visualization
![Page 1: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/1.jpg)
Практическая визуализация
Антон ОсиповРИА Новости
Скачать презентацию:slideshare.com/osips
![Page 2: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/2.jpg)
Дизайн или код?
![Page 3: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/3.jpg)
Дизайн — это интерфейс
0,1 Mb/s 20 000 Mb/s3
![Page 4: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/4.jpg)
Дизайн — это интерфейс
4
![Page 5: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/5.jpg)
Цвет кодирует логику
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
![Page 6: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/6.jpg)
Близкие объекты связаны
6
НижнийКиселевск
НовгородВеликий
Нижний
Киселевск
Новгород
Великий
![Page 7: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/7.jpg)
Сходные параметры объединяют объекты
7
1 2 3 4 5 6 7 82
4
6
8
10
1 2 3 4 5 6 7 82
4
6
8
10
1 2 3 4 5 6 7 82
4
6
8
10Форма Размер
Цвет
1 2 3 4 5 6 7 82
4
6
8
10
![Page 8: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/8.jpg)
Сходные параметры объединяют объекты
8
1 2 3 4 5 6 7 82
4
6
8
10
1 2 3 4 5 6 7 82
4
6
8
10Расстояние Объединяющий объект
![Page 9: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/9.jpg)
Не плоите лишние сущности
9
0" 5000" 10000" 15000" 20000" 25000" 30000" 35000"
Литва"Эстония"
Финляндия"Украина"Латвия"
Стоимость,)руб.)
Стра
на)
Отдых)зарубежом)
Перелет" Проживание"в"отеле"
0" 5"000" 10"000" 15"000" 20"000" 25"000" 30"000" 35"000"
Литва"
Эстония"
Финляндия"
Украина"
Латвия"
Стоимость"отдыха"зарубежом"(руб.)"
Перелет" Проживание"в"отеле"
![Page 10: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/10.jpg)
Дизайн информации
11
§ Верстка
§ Визуализация
§ Типографика
§ Иллюстация
![Page 11: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/11.jpg)
Визуализация: все исследование в одном графике
12
![Page 12: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/12.jpg)
Графики — динамика
2
4
6
8
10
0
2
4
6
8
10
0
5
10
15
20
13
![Page 13: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/13.jpg)
Гистограммы — абсолютные значения
0
2
4
6
8
10
0
5
10
15
20
0
2
4
6
8
10
14
![Page 14: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/14.jpg)
Графики vs Гистограммы
15
3,9
4,0
4,1
4,2
4,3
0
1
2
3
4
5
![Page 15: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/15.jpg)
Не используйте объем
0"
1"
2"
3"
4"
5"
4"5"
4"
5"
16
![Page 16: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/16.jpg)
Круговые диаграммы
17
![Page 17: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/17.jpg)
Круговые диаграммы
0
2
4
6
8
10
18
![Page 18: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/18.jpg)
Все в чем больше 1-го измерения — сложно сравнивать
19
![Page 19: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/19.jpg)
Точечные диаграммы
0 1 2 3 4 5 6 7 82
4
6
8
10
0 1 2 3 4 5 6 7 82
4
6
8
10
0 1 2 3 4 5 6 7 82
4
6
8
10
0 1 2 3 4 5 6 7 82
4
6
8
10
20
![Page 20: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/20.jpg)
Другие виды диаграмм
21
![Page 21: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/21.jpg)
Инструменты
![Page 22: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/22.jpg)
Скетч интерфейса // Balsamiq.com
24
![Page 23: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/23.jpg)
Иконки // TheNounProject.com
25
![Page 24: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/24.jpg)
Качественные фотографии // Flickr.com
26
![Page 25: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/25.jpg)
Редактирование фотографий // Plus.Google.com
27
![Page 26: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/26.jpg)
Подбор цветов // ColorSchemeDesigner.com
28
![Page 27: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/27.jpg)
Примеры
![Page 28: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/28.jpg)
Примеры // alexa.com, data.worldbank.org
Сложная шкала Шкала отсутствует Чекбоксы
30
![Page 29: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/29.jpg)
Примеры // ahrefs.comНеправильный масштаб Облако тегов
КартаКруговая диаграмма
31
![Page 30: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/30.jpg)
Примеры // ec.europa.eu/eurostat
Дерево«Настраиваемость»
32
![Page 31: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/31.jpg)
Примеры // data.worldbank.org
Значенния по умолчанию
33
![Page 32: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/32.jpg)
Примеры // wordstat.yandex.ru
Позиционирование по ОХ Абсолютные и относительные значения
34
![Page 33: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/33.jpg)
Примеры // gapminder.org6 переменных на 1 диаграмме
35
![Page 34: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/34.jpg)
Примеры // google.com/publicdata
Простой интерфейс
36
![Page 35: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/35.jpg)
Примеры // data.worldbank.org
Удобная навигация
37
![Page 36: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/36.jpg)
Примеры // data.worldbank.org
Простота модификации Продумывание мелочей
38
![Page 37: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/37.jpg)
Примеры // artlebedev.ru/studio/statПросто, но информативно
39
![Page 38: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/38.jpg)
Примеры // asymco.comНестандартные типы диарамм
40
![Page 39: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/39.jpg)
Библиотеки
![Page 40: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/40.jpg)
D3.js Processing 2Google Charts
42
Библиотеки
![Page 41: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/41.jpg)
43
![Page 42: Practical visualization](https://reader033.fdocuments.net/reader033/viewer/2022052507/558d172ed8b42a02418b4651/html5/thumbnails/42.jpg)
44
Скачать презентацию:
slideshare.com/osips