우리 모두는 Shiny가 대화 형 데이터 시각화에 적합하다는 것을 알고 있습니다. 그러나 때로는 하나의 반짝이는 페이지에 모든 그래프를 맞추기위한 최선의 시도조차도 충분하지 않습니다. 우리의 경험으로 볼 때, KPI가 증가하는 거의 모든 프로젝트는 지저분하고 읽을 수없는 최종 보고서의 문제로 어려움을 겪습니다. 여기 대시 보드가 편리한 것처럼 보입니다. 대시 보드를 사용하면 보고서를 섹션, 패널 및 탭으로 구분하여 보고서를 직관적으로 구성 할 수 있습니다. 덕분에 최종 사용자가 작업을 훨씬 쉽게 탐색 할 수 있습니다.

shinydashboard괜찮은 일을 여기서 해. 그러나 앱을 사용하여 여러 개의 앱을 만들면 모두 똑같아 보이고 지루하다는 것을 빨리 알 수 있습니다. 이 자습서에서는 semantic.dashboard 패키지를 활용하는 방법을 보여 드리겠습니다 . 이것은 Semantic UI를shinydashboard 사용 하는 대안 입니다. 덕분에 앱에 아름다운 시맨틱 구성 요소를 도입하고 다양한 테마 중에서 선택할 수 있습니다.
시작하기 전에 : semantic.dashboard아직 설치 하지 않은 경우 자세한 지침을 보려면 이 GitHub 페이지 를 방문하십시오.

시작하는 방법?

빈 대시 보드 만들기부터 시작하겠습니다.

 

비교를 위해 당신은 당신이 변경되면 어떻게되는지 확인할 수 library(semantic.dashboard)library(shinydashboard).당신이보아야 할 것은 이런 것입니다 :

거의 아무런 노력없이 첫 번째 semantic.dashboard앱을 위한 골격을 만들었습니다 .

이제 대시 보드의 기본 구성 요소에 대해 논의 할 시간입니다. 각각 dashboardPage은 세 가지 요소로 구성됩니다.

  • 머리글,
  • 사이드 바,
  • 신체.

현재 우리의 헤딩은 아주 지루하므로 제목을 추가하고 색상을 변경해 보겠습니다.

우리는 사이드 바가 너무 넓어서 더 기능적으로 만들 필요가 없으며 두 개의 메뉴 요소를 추가합니다.

다음과 같은 결과가 예상됩니다.

나쁘지 않다! 우리는 우리 아이콘에 몇 가지 아이콘을 추가하여 더 잘할 수 있습니다 menuItem. 너 혼자 할 수있어?

내용 추가

이 섹션에서는 앱에 콘텐츠를 채우기 시작합니다. 우리는 대중 교통 데이터 세트 “mtcars” 를 사용합니다.이 데이터 세트 는 1974 Motor Trend US 잡지에서 추출되었습니다.이 잡지는 32 개의 구식 자동차의 일부 매개 변수로 구성됩니다. 그 전에 탭을 사용하여 신체의 내용을 변경하는 방법을 알고 있는지 확인합시다. 다음 코드를 살펴보십시오.

 

우리는 tabItems와 tabName똑같은 두 개의 s를 만들었습니다 menuItemselected의 매개 변수를 tabItems우리에게tabItem응용 프로그램을 실행 한 후 선택하여 표시되어야합니다.

그 지식을 갖추고, 우리는 마침내 정말로 기능적인 것을 구현할 수 있습니다. 우리는 자동차의 기어 박스 유형과 갤런 당 매개 변수 간의 관계를 설명하는 간단한 플롯을 작성하는 것으로 시작합니다. 에서 shinyServer함수를 우리는 전화 :

 

우리가 사용 ggplot2하고 있기 때문에 스크립트의 시작 부분에이 패키지를 첨부하는 것을 잊지 마십시오.

이 데이터 세트에서 다른 플롯을 만들려고합니다. 따라서 메인 페이지를 두 섹션으로 나누어 봅시다. 우리는 fluidRow우리의 첫 번째 기능의 내용을 교환 할 수 있습니다 tabItem:

앱이 실행 중인지 확인하는 것이 좋습니다. 대답이 ‘예’인 경우 다음 절로 진행하십시오. 그렇지 않은 경우 이전 단계를 모두 수행했는지 확인하십시오.

대화 형 항목

대화 형 플롯을 대시 보드에 추가하는 것에 대해 어떻게 이야기합니까? 자동차의 무게와 갤런 당 마일 사이의 관계를 나타 내기위해 “음모” 를 사용합시다 . 나는 그곳에 몇 가지 추가 정보를 포함시킬 수 있기 때문에 여기에 포인트 플롯을 결정했다. 색깔로, 나는 실린더의 수를 표시하고 점의 크기는 0.25 마일 시간을 나타낸다. 그것은 그것을 달성하는 코드입니다 :

semantic_palette앱의 SemnaticUI 레이아웃과 일관성을 유지하기 위해 그래프 색상에 사용 했습니다.

대시 보드에 삽입하려면 두 번째 상자에 유추하여 추가합니다.

그것이 우리의 메인 페이지가 지금 보이는 방식입니다.

나는 그것이 여기에 충분하다고 말할 것이다. 다른 탭으로 전환합시다.

아마도, 일부 호기심 많은 사용자는 “추가 정보”탭에서 자동차 속성의 전체 목록을보고 싶어합니다. 그에게 기회를 줘 보자. 이를 위해 DT패키지를 사용 하여 서버 측에서 테이블을 렌더링합니다.

두 번째 탭에 표시합니다.

나는 우리가 지금까지 성취 한 것에 대해 매우 만족합니다 …

하지만 그거 알아? 나는이 시점에서 내 생각을 바꾸고이 대시 보드의 주제를 수정하기로 결정했다. 시맨틱 포레스트 (Semantic Forest) 웹 사이트 에서 내 옵션을 검토 하고 결정했습니다 cerulean. 현재 테마를 변경하는 것은 매우 쉽습니다dashboardPage. 기능 에서 하나의 매개 변수 만 변경해야하기 때문 입니다.

이 앱의 작동 원리를 살펴 보겠습니다.

전체 코드

좋아, 그게 다야! 이 시점에 이르면 semantic.dashboard 패키지로 첫 번째 대시 보드를 만들었다는 의미입니다 . 교육을 위해 새로운 멋진 그림이있는 탭을 추가하여 맞춤 설정하는 것이 좋습니다. 어떤 단계를 빠뜨린 경우 여기에서 대시 보드의 전체 코드를 확인할 수 있습니다.

자원:

출처: Create outstanding dashboards with the new semantic.dashboard package – Appsilon Data Science | End­ to­ End Data Science Solutions