Upload
anton-osipov
View
885
Download
1
Tags:
Embed Size (px)
DESCRIPTION
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
Citation preview
Практическая визуализация
Антон ОсиповРИА Новости
Скачать презентацию: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 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
Сходные параметры объединяют объекты
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Расстояние Объединяющий объект
Не плоите лишние сущности
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 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
Другие виды диаграмм
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.org6 переменных на 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