Observable JS 대시보드

소개

Quarto는 Observable JS를 기본 지원합니다. Observable JS는 Mike Bostock(D3의 저자)가 만든 순수 JavaScript 확장 집합입니다. Observable JS는 반응형 런타임을 특징으로 하며, 이는 대화형 데이터 탐색과 분석에 특히 적합합니다.

Observable JS의 제작사(Observable, Inc.)는 https://observablehq.com/에서 노트북을 만들고 배포할 수 있는 호스팅 서비스를 운영합니다. 또한 Observable JS(“OJS”)는 코어 라이브러리를 통해 독립 문서와 웹사이트에서도 사용할 수 있습니다. Quarto는 이 라이브러리와 렌더 시점에 실행되는 컴파일러를 함께 사용해 Quarto 문서에서 OJS를 사용할 수 있게 합니다.

따라 해보기

Quarto 대시보드는 대화형 OJS 시각화를 제시하기에 훌륭한 방식입니다. 아래에서 기본을 한눈에 볼 수 있는 완전한 예제를 제공합니다. 더 자세한 내용은 Quarto에서 OJS 사용하기 문서를 참고하세요.

이 예제는 OJS로 대시보드를 만들 때 사용하는 여러 기법을 다룹니다. 반응형 계산, 사이드바와 탭셋 같은 고급 레이아웃 구성까지 포함합니다. 아래는 우리가 만들 대화형 문서입니다.

아래는 이 대시보드의 소스 코드입니다. 첫 번째 셀에
//| output: false 옵션을 추가했는데, 이는 해당 셀이 중간 계산만 포함하며 대시보드 레이아웃에서 카드로 변환되지 않도록 하기 위함입니다.

오른쪽 끝의 숫자를 클릭하면 문법과 동작 방식에 대한 추가 설명을 볼 수 있습니다.

---
title: "Palmer Penguins"
author: "Cobblepot Analytics"
format: dashboard
---

```{ojs}
//| output: false

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

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

# {.sidebar}

![](images/penguins.png){width="80%"}

```{ojs}
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", "Dream"], 
    label: "Islands:"
  }
)
```

# Plot

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

# Data

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

1: output: false를 설정해 이 셀이 중간 계산만 포함하고 결과를 출력하지 않음을 나타냅니다.
2: 페이지 로드 시 원본 펭귄 데이터셋을 CSV에서 읽습니다.
3: filtered는 viewof로 선언된 변수가 변경될 때마다(여기서는 bill_length_min과 islands) 자동으로 다시 계산되는 값입니다.
4: 1단계 제목에 .sidebar 클래스를 추가하면 전역 사이드바를 만들 수 있습니다. 사이드바에는 코드 셀뿐 아니라 이미지, 설명 텍스트, 링크도 포함할 수 있습니다.
5: 여기서는 viewof를 사용해 입력을 정의하여, 값이 바뀌면 filtered 데이터셋이 자동으로 다시 계산되도록 합니다.
6: 1단계 제목(여기서는 # Plots와 # Data)은 대시보드 안에 페이지를 만듭니다.
7: filtered 데이터셋이 변경될 때마다 플롯이 자동으로 다시 그려집니다.
8: 표 데이터 표시도 filtered 데이터셋이 변경될 때마다 자동으로 갱신됩니다.

더 알아보기

Quarto에서 OJS를 사용하는 방법을 더 알아보려면 다음 문서를 참고하세요.

입력는 입력을 배치하는 다양한 방법(사이드바, 입력 패널, 입력을 카드에 직접 연결 등)을 설명합니다.

OJS 사용하기는 다른 주제에 대한 소개와 개요를 제공합니다.

OJS 라이브러리는 표준 라이브러리와 외부 JavaScript 라이브러리 사용을 다룹니다.

OJS 데이터 소스는 데이터 읽기와 전처리 방법을 정리합니다.

OJS 셀는 셀 실행, 출력, 레이아웃을 더 깊게 설명합니다.

OJS 코드 재사용는 여러 문서에서 OJS 코드를 재사용하는 방법을 다룹니다.