Практическая визуализация

Антон ОсиповРИА Новости

Скачать презентацию: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

@AS_OsipovAnton.Osipov.ru@gmail.com