파머 펭귄

.csv 파일 (영어)

파머 펭귄 (영어)

데이터

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

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

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

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

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

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:"
  }
)

인터랙티브 그래프

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

시각화
표

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)

참고자료

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

---
title: "파머 펭귄"
subtitle: ".csv 파일 (영어)"
format: 
  html:
    toc: true
    echo: true
    keep-hidden: true
    code-tools: true
editor_options: 
  chunk_output_type: console
---


![](fig/interactive-workflow.png)

# 파머 펭귄 (영어)

## 데이터

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

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

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

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

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


## UI

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

```{ojs}
//| panel: input
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:"
  }
)
```

## 인터랙티브 그래프

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

::: {.panel-tabset}

### 시각화

```{ojs}
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(),
    ]
  }
)
```

### 표

```{ojs}
Inputs.table(filtered)
```

:::

# 참고자료

Quarto 인터랙티브 문서 제작 사례로  [Penguins](https://quarto.org/docs/interactive/ojs/examples/penguins.html) 웹사이트에서 자세한 사항 확인할 수 있습니다.