다축 생성

다축 생성 절차

첫 번째 그래프 생성(축을 지정하지 않은 그래프)
점 추가
y축 생성
y축 이름 지정
두번째 그래프 생성
점 추가
y축 생성
y축 이름 지정
세 번째 그래프 생성
y축 생성
점 추가
y축 이름 지정
x축 생성 및 이름 지정
사용자화

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


plot(time,pop,axes=F,xlim=c(7000,3400),ylim=c(0,max(pop)),
xlab="",ylab="",type="l",col="black",main="")
points(time,pop,pch=20,col="black")
axis(2, ylim=c(0,max(pop)), col= "black", lwd=2)
mtext(2, text="Population", line=2)

par(new=T)
plot(time,med,axes=F,xlim=c(7000,3400),ylim=c(0,max(med)),
xlab="",ylab="",type="l",lty=2,lwd=2, col="black",main="")
points(time,med,pch=20,col="black")
axis(2, ylim=c(0,max(med)), col= "black", lwd=2,line=3.5)
mtext(2, text="Median Group Size", line=5.5)

par(new=T)
plot(time,grp,axes=F,xlim=c(7000,3400),ylim=c(0,max(grp)),
xlab="",ylab="",type="l",lty=3,lwd=2, col="black",main="")
points(time,grp,pch=20,col="black")
axis(2, ylim=c(0,max(grp)), col= "black", lwd=2,line=7)
mtext(2, text="Number of Groups", line=9)

그 외 다양한 그래프

aplpack 패키지 : 줄기잎 그림, 체르노프 페이스, 스타차트 등 제공

줄기 잎 그림

1

stem.leaf(score)

얼굴 그림

1

faces(worldplace)

별 그림

1

stars(worldplace)

공간 분석

구글 비즈

모션 차트

구글 비즈를 사용하기 위해서는 그래프 축과 관련된 시간과 id변수를 지정한 후 plot으로 그림

1
2


m1 = gvisMotionChart(Fruits, idvar="Fruit",timevar="Years")
plot(k)

지오차트

지도와 그 위에 데이터를 표시

1

 gvisMotionChart(data, locationvar="", colorvar="",sizevar="",howervar="",options= list(), charid)

색상 구분

1
2
3
4


G1 = gvisGeoChart(exports, locationvar='Country', colorvar='Profit')
# 전 세계 지도에 수익크기를 색상으로 구별
G1 = gvisGeoChart(exports,'Country','Profit',option=list(region="150"))
# 유럽 지역으로 한정해 구분

표시 방식 및 해상도 지정

1
2


G1 = gvisGeoChart(states,"statename","illiteracy",option=list(region="US"),displayMode="regions",resolution="provinces", width=600,height=400)
# 주별 문맹률 정보가 나타나도록 option표시 방식과 해상도 수준 지정

속도 표시

1
2
3
4


G1 = gvisGeoChart(Andrew, "Latlong", colorvar='Speed_kt',option=list(region="US))
# 위치별 속도를 각각의 색상으로 표시함
G1 = gvisGeoChart(Andrew, "Latlong",sizevar= "Speed_kt', colorvar='Pressure_mb',option=list(region="US))
# 색깔이 아닌 원의 크기로 표현

깊이 표시

1
2


G1 = gvisGeoChart(quake, "Latlong","depth","mag", option=list(displayMode = "Markers", region="009",colorAxis="{color:['red','grey']}",backgroundColor="lightblue"))
# 깊이와 진도정보로 표시

모자이크 플롯

복수의 categorical variable 분포 파악이 도움이 되는 시각화

1
2


mosaic(titanic,shade=T,legend=T)
# 색상 추가

1
2
3


strucplot(titanic,pop=F)
grid.edit("rect:Class=1st,SEx=Male,Age=Adult,survived=Yes",gp = gpar(fill = "red"))
# 특정 집단의 색상 지정

샤이니 사용

R에서 인터렉티브하게 웹 앱을 만들 수 있는 패키지
동적 시각화 자료를 웹으로 쉽게 배포 가능
독립형 앱을 호스트하거나 R Markdown문서에 포함하거나 대시보드 작성
css, html, javascript 작업 가능

샤이니 기본 구성

구조

header, body, footer 구조를 지닌 html과 유사
headerPanel : 제목과 주제
sidebarPanel : mainPanel에서 다룰 수 있는 컴포넌트가 들어감
mainPanel : 실질적으로 보여지는 부분

ui.R, server R code

샤이니를 실행하기 위해 ui.R, server R code 파일이 동일 디렉토리 안에 있어야 함
ui.R : 화면 구성, component class 설정
server R code : 코드들이 들어가는 곳, id값을 설정해 ui.R에 input, output값으로 작동

hello_shiny(ui.R)

1
2
3
4
5
6
7


shinyUI(pageWithSidebar(
    headerPanel("hello shiny"),
    sidebarPanel(
        sliderInput("obs","Number of observation: ", min=1, max = 1000, value=500))
    mainPanel(plotOutput("distPloy"))
    ))
# obs를 컴포넌트로 나타내 값은 1부터 1000까지, 기본값은 500

hello_shiny(server.R)

1
2
3
4
5
6
7


shinyServer(function(input,output){
    output$distPlot = renderPlot({
        dist = rnorm(input$obs)
        hist(dist)
    })
})
# input, output만듬, distplot이라는 함수를 output으로 보내 renderplot 출력

샤이니 기본 사용법 시작과 종료

일반적인 방법으로 c:/test/shiny로 디렉터리를 만들고 각각의 ui.R, server R파일을 폴더에 넣어 관리함(동일폴더에 있어야 함)

1
2


setwd("c:/test/shiny/hello")
runApp() # 샤이니 실행

샤이니는 r server에서 브라우저로 별도로 운영되기 때문에 브라우저 종료 후 반드시 세션을 끝내줘야 함

input, output

input, output으로 id를 만들고 안에 설정된 데이터나 그래프 등을 주고받는다.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


shinyUI(pageWithSidebar(
    headerPanel("hello shiny"),
    sidebarPanel( selectInput(
        "Variable","Variable: ",
        list("Cylinders" = "cyl",
        "Transmission"="am", "Geers"="gear"))
    checkboxInput("outliers","Show outliers", FALSE))
    mainPanel(h3(textOutput("caption")),
    plotOutput("mpgPlot"))
    ))
# 세션 종료 후 재실행하면 server.r 코드가 mainpanel에 나타남

Slider

슬라이드 바는 inputID 지정 후 label, min, max, value, step, format을 지정 후 눈금 표시 여부를 ticks를 T/F값으로 지정하고 움직임에 따라 animate를 T/F로 지정

Tabsets

한 화면에 tab을 만들어 탭별로 다른 그래프나 테이블을 보여줄 수 있음

dataTable

자바스크립트 사용, 코드를 두 개로 나누지 않고 한번에 코딩 가능, 하지만 관리 등을 위해 나눠서 하는게 좋음

라이브러리 기반 시각화 구현(d3.js)

d3.js특징

자바스크립트 기반 데이터 시각화 라이브러리
SVG객체, ,canvas객체 등을 기반으로 동작
css를 통해 객체의 레이아웃과 속성을 변경해 디자인적 요소를 조작할 수 있음
firefox, chrome, safari opera 에서 모두 테스트되어 한 동일한 코드에 일관적인 결과를 얻을 수 있다.

시각화 구현 절차

데이터 획득

로컬에 저장된 파일, DB, 웹에 공개된 데이터

데이터 파싱

csv, xml, json등의 형식을 파싱할 수 있는 API 제공

데이터 필터링

필요하지 않은 데이터 제거

데이터 표현

중요한 사항은 매핑의 scale
scale이라는 객체로 데이터와 시각적 요소 간의 관계 정의
한 번의 구현으로 다양한 화면의 크기에서 동작해야하는 시각화에서 매우 유용
다양한 크기의 화면에 동일한 차트나 지도를 그릴 수 있다. 또한 동적으로 변경되어도 차트나 지도가 깨지지 않음

상호작용 추가

마우스 클릭, 키보드 입력 등을 인지, 처리할 수 있도록 함
상세하게 보여주기, 지역 포커싱 등 가능

시각화 구현을 위한 기본 개념

객체지향 언어라 객체를 생성해야함
d3.js는 데이터를 svg이미지로 시각화하는데 사용되는 함수를 모아놓은 파일과 같은 것

그림을 그리기 위한 HTML태그
각각의 모양을 일일이 함수로 정의 후 표현
해상도와 독립적, 이벤트 핸들링을 지원해 사용자와 상호작용이 필요한 시각화 구현

scale

시각화 그림들이 화면에 출력되는 과정에서 부자연스럽게 표현되는 것을 방지
크기와 컬러를 자동으로 조정해 ‘시각화의 최적화’를 도움
데이터 값을 건드리지 않고 데이터 값에 맞는 크기와 컬러 범위를 출력 장치에 맞도록 시각화
domain : scale 입력값 범위 지정
range : scale 출력값 범위 지정
.scale : domain, range로 설정된 scale을 통해 원하는 위치에 무언가를 놓는 것

막대차트로 시각화 구현

객체 생성
데이터 입력
스케일 정의
차트에 막대 추가

rect 객체 사용

레이블 추가

text 객체 사용

축 추가

파이 차트

d3.svg.arc : 파이 모양 구현

스캐터 플롯

히트맵으로 비교 시각화 구현

색상의 차이를 통해 데이터 표현
canvas 객체 필요
drawimage : canvas에 준비한 이미지를 출력

svg와 canvas 차이

	svg	canvas
용도	시각화를 구현하기 위해 사용
객체에 정보 저장	O	X
다시 그리기	유리	불리
성능	낮다	높다

svg 객체는 화면에 출력한 모든 정보를 담고 있기 때문에 event handler를 연결할 수 있다.
사용자의 행위에 따라 필요한 객체만 화면에 그릴 때 유리하지만 모든 정보를 객체로 저장하고 있어 성능 문제가 발생할 수 있음

지도로 시각화 구현

좌표 정보를 데이터로 입력하고 path객체를 할당하는 방법으로 구현할 수 있다.
path 객체를 통해 좌표 정보를 픽셀로 변환해 화면에 도형을 그릴 수 있다.

ADP 공부하기 14

다축 생성

다축 생성 절차

그 외 다양한 그래프

공간 분석

구글 비즈

샤이니 사용

샤이니 기본 구성

라이브러리 기반 시각화 구현(d3.js)

d3.js특징

시각화 구현 절차

시각화 구현을 위한 기본 개념

막대차트로 시각화 구현

파이 차트

스캐터 플롯

히트맵으로 비교 시각화 구현

지도로 시각화 구현

See Also: