�ݺ�ߣ

Практическая визуализация
Антон Осипов
РИА Новости
Скачать презентацию:
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 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
Нижний
Киселевск
Новгород
Великий
Нижний
Киселевск
Новгород
Великий

Сходные параметры объединяют объекты
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
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"
Литва"
Эстония"
Финляндия"
Украина"
Латвия"
Стоимость,)руб.)
Страна)
Отдых)зарубежом)
Перелет" Проживание"в"отеле"
0" 5"000" 10"000" 15"000" 20"000" 25"000" 30"000" 35"000"
Литва"
Эстония"
Финляндия"
Украина"
Латвия"
Стоимость"отдыха"зарубежом"(руб.)"
Перелет" Проживание"в"отеле"

Дизайн информации
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 8
2
4
6
8
10
20

Другие виды диаграмм
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

Удобная навигация
37

Простота модификации Продумывание мелочей
38

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

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

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

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

�ݺ�ߣ

Practical visualization

Recommended

More Related Content

Similar to Practical visualization (20)

More from Anton Osipov (7)

Practical visualization