March 14, 2017

Перед тим, як візуалізувати

Що потрібно створення інфографіки?

Чотири основні етапи:

  • Ідея
  • Дані (пошук і підготовка)
  • Інструменти
  • Техніка

Ідеї і звідки їх брати?

  • повістка дня
  • дані
  • вигадка

Обробка даних

long & wide формат таблиці даних Drawing

Формати даних даних

  • csv
  • json
  • shp, geojson (для мап)

Базові інструменти для інфографіки

  • R (ggplot2)
  • Excel
  • Adobe Ilustrator

Інструменти для інтерактивної графіки

  • D3.js
  • R (ggiraph,rchart,highcharter,Shiny)
  • Plotly

Інструменти для створення карти

  • QGIS
  • Carto
  • Mapbox
  • R (maptools, ggplot2)

Carto - просте створення карт

Drawing

Як обрати тип візуалізації?

Потрібно зрозуміти, що ми показуємо через дані. Варіанти наступні:

  • рейтинг
  • кореляція
  • розподіл
  • зміни у часі
  • відхилення
  • розподіл на частини
  • коливання
  • потік
  • розподіл у просторі

Гайд по типах візуалізації

ft.com/vocabulary Drawing

Де підбирати кольори

Філософія хорошої візуалізації

  • підвищена увага до деталей (осей, розміру ліній, кольорів, підписів, прозорості)
  • переосмислення стандартних елементів візуалізації

Техніка візуалізації

Візуалізація в ggplot2

Базові ідеї: mapping і шари

Mapping - узгодження різних розмірностей даних та їх адаптація під площу графіка

str(mtcars)
## 'data.frame':    32 obs. of  11 variables:
##  $ mpg : num  21 21 22.8 21.4 18.7 18.1 14.3 24.4 22.8 19.2 ...
##  $ cyl : num  6 6 4 6 8 6 8 4 4 6 ...
##  $ disp: num  160 160 108 258 360 ...
##  $ hp  : num  110 110 93 110 175 105 245 62 95 123 ...
##  $ drat: num  3.9 3.9 3.85 3.08 3.15 2.76 3.21 3.69 3.92 3.92 ...
##  $ wt  : num  2.62 2.88 2.32 3.21 3.44 ...
##  $ qsec: num  16.5 17 18.6 19.4 17 ...
##  $ vs  : num  0 0 1 1 0 1 0 1 1 1 ...
##  $ am  : num  1 1 1 0 0 0 0 0 0 0 ...
##  $ gear: num  4 4 4 3 3 3 3 4 4 4 ...
##  $ carb: num  4 4 1 1 2 1 4 2 2 4 ...

Структура коду графіка і принцип побудови

library(ggplot2) #
library(scales) #

ggplot(  # Функція, яка розпочинає код візуалізації
  mtcars, # Таблиця з даними
       aes(# Ця команда означає, що всі змінні у ній припасовуються
         mpg,# Вісь ікс
           drat,# Вісь ігрек
             size=disp,# Робимо розмір видповидним до змінної disp
               color=hp,# Робимо колі відповідним до змінної hp
                   alpha=qsec)) +# Робимо прозорість відповідною до змінної qsec
  geom_point() + #Додаємо кружечки
  geom_line() #Додаємо лінії

Що з цього вийшло?

Маппінг для окремого елементу

ggplot(mtcars, aes(mpg,drat)) +
  geom_point(aes(size=disp,color=hp,alpha=qsec)) + geom_line() 

Додаємо тему і шкали

library(scales) #Підвантажує оформлення шкал

ggplot(mtcars, aes(mpg,drat)) +
  geom_point(aes(size=disp,color=hp,alpha=qsec)) +
  geom_line() +
  scale_x_continuous(labels = comma) + #
  scale_y_continuous(labels = comma) + #
  labs(x = "Змінна",  y="Тож змінна") + #Назви осей
  theme_void() + #Ставимо тему, яка вбиває все, крім самого графіка
  theme( #Коригуємо елементи теми
    axis.title =element_text(size=10), #Задаємо розмір назв шкал
    axis.ticks = element_line(), #Додаємо риски навпроти цифр на шкалах
    axis.line.x = element_line(), #Шкалу ікс робимо лінією
    axis.text= element_text(size=5), #Налаштовуємо розмір тексту на шкалах
    legend.position="none" #Прибираємо легенду
  ) 

Дивимось тепер

Підписи

ggplot(mtcars, aes(mpg,drat)) +
  geom_point(aes(size=disp,color=hp,alpha=qsec)) +
  geom_line() +
  geom_text(aes(20,4.7),label="Тут якась дічь!",size=3,family="Arial") +
  geom_curve(aes(20,4.8,xend=30,yend=5), curvature = -0.2,size=0.1,
             arrow = grid::arrow(length = grid::unit(0.03, "npc"))) +
  scale_x_continuous(labels = comma) +
  scale_y_continuous(labels = comma) +
  labs(title = "Графік, який щось демонструє",
       subtitle = "І це щось схоже на залежність",
       caption = "Джерело: надійне", x = "Змінна",  y="Тож змінна") +
  theme_void() + theme(
    axis.title =element_text(size=10),
    axis.ticks = element_line(),
    axis.line.x = element_line(),
    axis.text= element_text(size=5),
    legend.position="none"
  ) 

Результат

Візуалізація в ggiraph

Код візуалізації

p <- ggplot(zastava,aes(збиток, застава, name = фігурант,size=`збиток більший`,
                              tooltip=labs)) +
  scale_x_continuous(labels = comma) +
  scale_y_continuous(labels = comma) +
  labs(x = "Розмір збитку",  y="Розмір призначеної застави") +
  geom_point_interactive(color="#9ecae1") + theme_void() + theme(
    axis.title =element_text(size=10),
    axis.ticks = element_line(),
    axis.line.x = element_line(),
    axis.text= element_text(size=5),
    legend.position="none"
  ) 
tooltip_css <- "background-color:white;font-family:Helvetica;font-size:
  10pt;padding:10px;border-radius:10px 20px 10px 20px;"
ggiraph(code = print(p), tooltip_extra_css = tooltip_css, tooltip_opacity = .75,width = 1,height_svg = 3)

Технічний гайд

Бібліотека

Що подивитись?

Що почитати?

Що почитати про технічні основи

Почитати основи основ

Що почитати українською?

На кого рівнятись

Де подивитись мої візуалізації?

Де подивитись мої візуалізації?

Мої контакти