파머 펭귄 (영어)

데이터

데이터는 외부에서 .csv 파일등을 가져오는 방식이 대표적이다. 또다른 방식은 데이터 패키지 (bitData)에 내장된 데이터를 바로 가져오는 방식이다.

palmer-penguins.csv 로컬 디스크에 저장된 데이터를 가져와서 인터랙티브 시각화에 사용하는 경우 다음과 같이 FileAttachment() 함수를 사용한다.

data = FileAttachment("../data/palmer-penguins.csv").csv({ typed: true })

data = Array(344) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

UI에서 입력값을 선택하면서 시각화하는 데이터가 달라지기 때문에 이를 반영하여 인터랙티브 대상 시각화 데이터를 제작한다.

filtered = data.filter(function(penguin) {
  return bill_length_min < penguin.bill_length_mm &&
         islands.includes(penguin.island);
})

filtered = Array(210) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

UI

인터랙티브 데이터 시각화를 위해서 UI 입력부분을 정의한다. 먼저 슬라이더 입력값(Input.range()) 과 체크박스 입력값(Inputs.checkbox())을 넣어둔다.

viewof bill_length_min = Inputs.range(
  [32, 50], 
  {value: 35, step: 1, label: "Bill length (min):"}
)
viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen", "Biscoe"], 
    label: "Islands:"
  }
)

bill_length_min = 35

islands = Array(2) ["Torgersen", "Biscoe"]

인터랙티브 그래프

인터랙티브 데이터를 선택한 결과를 실시간 데이터와 그래프로 시각화하여 문서에 담아낸다.

시각화
표

Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass_g", fill: "species", thresholds: 20}
  ))
  .plot({
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)

Inputs.table(filtered)

rowid	species	island	bill_length_mm	bill_depth_mm	flipper_length_mm	body_mass_g	sex	year
1	Adelie	Torgersen	39.1	18.7	181	3,750	male	2,007
2	Adelie	Torgersen	39.5	17.4	186	3,800	female	2,007
3	Adelie	Torgersen	40.3	18	195	3,250	female	2,007
5	Adelie	Torgersen	36.7	19.3	193	3,450	female	2,007
6	Adelie	Torgersen	39.3	20.6	190	3,650	male	2,007
7	Adelie	Torgersen	38.9	17.8	181	3,625	female	2,007
8	Adelie	Torgersen	39.2	19.6	195	4,675	male	2,007
10	Adelie	Torgersen	42	20.2	190	4,250	NA	2,007
11	Adelie	Torgersen	37.8	17.1	186	3,300	NA	2,007
12	Adelie	Torgersen	37.8	17.3	180	3,700	NA	2,007
13	Adelie	Torgersen	41.1	17.6	182	3,200	female	2,007
14	Adelie	Torgersen	38.6	21.2	191	3,800	male	2,007
16	Adelie	Torgersen	36.6	17.8	185	3,700	female	2,007
17	Adelie	Torgersen	38.7	19	195	3,450	female	2,007
18	Adelie	Torgersen	42.5	20.7	197	4,500	male	2,007
20	Adelie	Torgersen	46	21.5	194	4,200	male	2,007
21	Adelie	Biscoe	37.8	18.3	174	3,400	female	2,007
22	Adelie	Biscoe	37.7	18.7	180	3,600	male	2,007
23	Adelie	Biscoe	35.9	19.2	189	3,800	female	2,007
24	Adelie	Biscoe	38.2	18.1	185	3,950	male	2,007
25	Adelie	Biscoe	38.8	17.2	180	3,800	male	2,007
26	Adelie	Biscoe	35.3	18.9	187	3,800	female	2,007
27	Adelie	Biscoe	40.6	18.6	183	3,550	male	2,007

참고자료

Quarto 인터랙티브 문서 제작 사례로 Penguins 웹사이트에서 자세한 사항 확인할 수 있습니다.