인터랙티비티

개요

문서에 인터랙티비티를 추가하면 독자가 제시한 개념과 데이터를 더 깊이 탐색하는 데 큰 도움이 됩니다. Quarto 문서에 인터랙티브 구성 요소를 추가하는 방법은 세 가지가 있습니다.

1. Observable JS를 사용해 커스텀 JavaScript 시각화를 만들기.

2. Shiny R 패키지를 사용해 Knitr 엔진 문서에 인터랙티비티 추가하기.

3. 문서에 Jupyter Widgets 또는 htmlwidgets(각각 Jupyter 및 Knitr 엔진)을 포함하기.

각 방법은 표현력, 개발 난이도, 배포 요건 측면에서 고유한 장단점이 있습니다. 아래에서 간단히 살펴보고, 자세한 학습을 위한 문서 링크를 제공합니다.

Observable JS

Quarto는 Observable JS를 기본 지원합니다. 이는 Mike Bostock(D3의 저자)이 만든 표준 JavaScript 확장 집합입니다. Observable JS는 반응형 런타임을 갖고 있어 인터랙티브 데이터 탐색과 분석에 특히 적합합니다.

아래 예시는 슬라이더 입력으로 시각화 동작을 제어하는 방식입니다.

viewof talentWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: "talent weight" })
viewof looksWeight = Inputs.range([-2, 2], { value: 0.7, step: 0.01, label: "looks weight" })
viewof minimum = Inputs.range([-2, 2], { value: 1, step: 0.01, label: "minimum fame" })

{
  const w = 400
  const h = 400;
  const result = d3.create("svg").attr("width", w).attr("height", h);
  const margin = 20;
  const xScale = d3.scaleLinear().domain([-2, 2]).range([margin, w - margin]);
  const yScale = d3.scaleLinear().domain([-2, 2]).range([h - margin, margin]);
  const points = result
    .append("g")
    .selectAll("circle")
    .data(actors)
    .join(enter => {
       const sel = enter
         .append("circle")
         .attr("r", 3)
         .attr("cx", d => xScale(d.talent))
         .attr("cy", d => yScale(d.looks))
         .attr("fill", d3.lab(50, 40, 20));
       return sel.filter(d => d.fame <= minimum)
         .attr("fill", "rgb(200, 200, 200)")
         .attr("r", 2);
    });
    
  const linearRegression = regression.regressionLinear()
    .x(d => d.talent)
    .y(d => d.looks)
    .domain([-2, 2]);

  const chosenActors = actors
    .filter(d => d.fame > minimum);

  const line = result
    .append("g")
    .append("line")
    .attr("stroke", d3.lab(20, 40, 20))
    .attr("stroke-width", 1.5)
    .datum(linearRegression(chosenActors))
    .attr("x1", d => xScale(d[0][0]))
    .attr("x2", d => xScale(d[1][0]))
    .attr("y1", d => yScale(d[0][1]))
    .attr("y2", d => yScale(d[1][1]));


  const xAxis = d3.axisBottom(xScale).ticks(3);
  result.append("g")
    .attr("transform", `translate(0, ${yScale(0)})`)
    .call(xAxis);

  result.append("text")
    .attr("x", xScale(0.05))
    .attr("y", yScale(2))
    .text("Looks");

  result.append("text")
    .attr("y", yScale(0.1))
    .attr("x", xScale(-2))
    .text("Talent");

  const yAxis = d3.axisLeft(yScale).ticks(3);
  result.append("g")
    .attr("transform", `translate(${xScale(0)}, 0)`)
    .call(yAxis);
  
  return result.node();
}

actors = transpose(points).map(v => ({
  talent: v.x,
  looks: v.y,
  fame: v.x * talentWeight + v.y * looksWeight
}));

transpose = function(df)
{
  const keys = Object.keys(df);
  return df[keys[0]]
    .map((v, i) => Object.fromEntries(keys.map(key => [key, df[key][i] || undefined])))
    .filter(v => Object.values(v).every(e => e !== undefined));
}
regression = require('d3-regression@1');

Observable JS는 JavaScript를 반응형으로 만들기 위해 특수 키워드와 커스텀 런타임을 사용합니다. 예를 들어 위 예시의 “minimum fame” 슬라이더는 다음 코드로 생성되었습니다.

viewof minimum = Inputs.range([-2, 2], { 
  value: 1, step: 0.01, 
  label: "minimum fame"
})

그리고 플롯을 생성하는 코드에서 일반 JavaScript 변수처럼 참조합니다.

sel.filter(d => d.fame <= minimum)

사용자가 슬라이더를 조작하면 minimum 값이 업데이트되고, 이를 참조하는 모든 코드는 자동으로 다시 실행됩니다.

인터랙티브 문서에서 JavaScript를 사용하는 장점 중 하나는 모든 로직과 계산이 클라이언트에서 수행된다는 점입니다(따라서 배포에 서버가 필요하지 않습니다).

자세한 내용은 Observable JS 문서를 참고하세요.

Shiny

Shiny 패키지는 R로 인터랙티브 웹 애플리케이션을 만들기 위한 유연하고 사용하기 쉬운 프레임워크를 제공합니다. Quarto는 Knitr 엔진으로 만든 문서에 Shiny 구성 요소와 애플릿을 임베드할 수 있도록 지원합니다.

다음은 Shiny 인터랙티브 구성 요소의 라이브 예시와 이를 만들기 위한 코드의 간단한 설명입니다.

Shiny에는 다양한 내장 입력 위젯이 있습니다. 최소한의 구문으로도 왼쪽에 보이는 위젯 같은 것들을 앱에 포함할 수 있습니다.

# Select type of trend to plot
selectInput(inputId = "type", 
            label = strong("Trend index"),
            choices = unique(trend_data$type),
            selected = "Travel")

출력 표시도 마찬가지로 간단합니다.

mainPanel(
  plotOutput(outputId = "lineplot", 
             height = "300px"),
)

R에서 하던 방식대로 플롯이나 테이블을 만들고, 적절한 렌더 함수 호출로 반응형으로 만들면 됩니다.

output$lineplot <- renderPlot({
  plot(x = selected_trends()$date, 
       y = selected_trends()$close, 
       type = "l",
       xlab = "Date", 
       ylab = "Trend index")
})

Shiny를 사용하면 R만으로 인터랙티브 문서를 매우 쉽게 만들 수 있습니다. 다만 JavaScript와 달리 Shiny를 사용하는 문서는 배포를 위해 서버가 필요합니다.

자세한 내용은 Quarto에서 Shiny 사용하기 문서를 참고하세요.

위젯

JavaScript를 몰라도 되고 Python이나 R만 사용하고 싶다면 Jupyter Widgets와 htmlwidgets가 문서에 인터랙티비티를 넣는 좋은 방법입니다. 이들도 완전히 클라이언트 측에서 실행되므로 일반적인 정적 HTML 문서로 배포할 수 있습니다.

예를 들어, 다음 Python 코드만으로 Jupyter 엔진 문서에 Leaflet 지도를 임베드할 수 있습니다.

```{python}
from ipyleaflet import Map, Marker, basemaps, basemap_to_tiles
m = Map(
  basemap=basemap_to_tiles(
    basemaps.NASAGIBS.ModisTerraTrueColorCR, "2017-04-08"
  ),
  center=(52.204793, 360.121558),
  zoom=4
)
m.add_layer(Marker(location=(52.204793, 360.121558)))
m
```

위젯을 사용하는 방법에 대해서는 다음 문서를 참고하세요.

• Jupyter Widgets (Jupyter 엔진)

• htmlwidgets (Knitr 엔진)

레이아웃

다양한 인터랙티브 구성 요소 사용에 익숙해졌다면 구성 요소 레이아웃 문서를 참고하여 다음 내용을 살펴보세요.

• 입력 패널에 입력을 묶기

• 탭셋 패널에 여러 출력을 표시하기

• 기본 아티클 레이아웃 대신 전체 페이지 레이아웃 사용하기

• 전체 페이지 레이아웃에서 입력용 사이드바 패널 추가하기

• 출력을 행과 열로 배치하는 사용자 정의 패널 레이아웃 만들기

RStudio IDE에서의 Observable JS

Observable JS는 NPM 라이브러리에 대한 완전한 접근을 제공하며, 이는 RStudio IDE의 Electron 버전 일일 빌드에서 필요한 JS 기능을 사용할 수 있습니다. RStudio IDE에서 Observable JS를 사용할 계획이라면 Electron 일일 빌드를 권장합니다.