레벨: 초보자
Josh Markwordt, SAS의 JMP 소프트웨어 개발자
John Powell, SAS의 JMP 수석 소프트웨어 개발자
대화형 HTML은 포인트 식별, 연결, 브러싱, 그리고 JMP 14의 새로운 기능인 데이터 필터링을 포함하여 JMP의 다양한 탐색 기능을 지원합니다. 저장된 보고서는 동료와 공유하거나 웹 서버에 업로드하여 모든 최신 웹 브라우저에서 볼 수 있습니다. JMP 14의 대화형 HTML은 데이터 필터링 지원 외에도 Graph Builder의 트리맵을 지원합니다. 본 백서에서는 대화형 HTML을 사용하여 JMP 결과를 공유하고 탐색하는 방법과 시기를 설명합니다.
소개
JMP 11에서 Interactive HTML 프로젝트를 시작한 이래, 저희의 목표는 JMP를 아직 사용하지 않는 사용자도 JMP의 풍부한 그래픽과 강력한 분석 기능을 이용할 수 있도록 하는 것이었습니다. 웹은 이러한 보고서를 표시하기에 가장 적합한 플랫폼이며, 현대 사회에서 협업이 이루어지는 공간입니다. 이 강연에서는 JMP 14의 Interactive HTML 관련 새로운 기능을 간략하게 소개하고, JMP Interactive HTML 보고서를 웹에서 공유하는 방법에 대한 팁을 제공하며, JMP의 Interactive HTML을 활용하여 연구를 공유하고 협업하는 해양 생물학자의 사례를 소개합니다.
Diamond Price vs. Carat Weight, Filtered by Color다이아몬드 가격 vs. 캐럿 중량, 색상별 필터링
다이아몬드 가격 vs. 캐럿 중량, 색상별 필터링
다이아몬드 가격 vs. 캐럿 중량, 색상별 필터링
JMP 14 기능
JMP는 데이터 분석을 위한 다양한 플랫폼과 도구를 제공하며, 매 릴리스마다 웹에서 데이터를 탐색하고 공유하는 데 도움이 되는 추가 기능을 출력에 추가하기 위해 노력해 왔습니다. JMP 14에서는 Graph Builder 출력에 트리맵이 추가되었으며, 숨기기 및 선택 기능을 갖춘 데이터 필터를 사용하여 데이터를 탐색할 수 있습니다.
대화형 HTML 보고서는 JMP의 다양한 탐색 기능을 지원합니다. 데스크톱에서는 해당 지점에 마우스를 올리면 표시되는 도구 설명이나 모바일 기기에서는 해당 요소를 탭하여 개별 지점이나 그래픽 요소를 식별할 수 있습니다. JMP와 마찬가지로 그래프는 연결되어 있어 한 그래프에서 선택한 행이 모든 그래프에서 강조 표시됩니다[1, 2].
Selecting multiple objects and linking between graphical elements 여러 객체를 선택하고 그래픽 요소 간 연결하기 여러 객체를 선택하고 그래픽 요소 간 연결하기 여러 객체를 선택하고 그래픽 요소 간 연결하기 페이지 상단에 표시되는 다양한 모드를 활용하고 두 번째 토글 버튼을 클릭하거나 탭하면 사각형을 드래그하여 그래프의 행을 선택할 수 있습니다. 이를 브러싱 이라고 하며 , 다변량 데이터를 탐색하는 데 중요한 기법입니다[1].
Brushing points to explore the data 데이터를 탐색하기 위한 브러싱 포인트 데이터를 탐색하기 위한 브러싱 포인트 데이터를 탐색하기 위한 브러싱 포인트
JMP 14의 새로운 기능은 열 또는 열 조합으로 필터링하는 기능입니다. 먼저 JMP 보고서의 빨간색 삼각형 메뉴에서 '로컬 데이터 필터' 메뉴 항목을 선택하고 하나 이상의 열을 선택한 후 '추가'를 클릭합니다. 범주형 및 연속형 필터 컨트롤이 모두 지원되며, 분포도 표시됩니다. JMP 14에서는 AND 및 OR 논리의 모든 조합이 지원되어 복잡한 필터를 생성할 수 있습니다. 선택 및 숨기기 상태는 모든 곳에서 일관되게 지원되므로 JMP를 처음 사용하는 사용자도 쉽게 배울 수 있습니다.
대화형 HTML 출력을 파일로 게시할 경우 데이터 제외/포함 기능이 지원되지 않는다는 점에 유의해야 합니다. 즉, JMP에서 행을 제외하면 포함된 행의 하위 집합만 내보내지고 사용자는 웹에서 제외된 데이터를 탐색할 수 없습니다. 예를 들어, 아래 이변량 그래프는 "포함" 체크박스가 선택되어 있습니다(JMP의 왼쪽). 따라서 남성을 선택하면 남성만 표시되고, 선을 적합할 때 고려되는 유일한 값입니다. 따라서 이 그래프의 대화형 HTML 내보내기는 오른쪽의 데이터 필터에 남성만 포함합니다.
Bivariate of Big Class with only Males included before exporting to Interactive HTML 영어: Interactive HTML로 내보내기 전에 남성만 포함된 Big Class의 이변량 Interactive HTML로 내보내기 전에 남성만 포함된 Big Class의 이변량 Interactive HTML로 내보내기 전에 남성만 포함된 Big Class의 이변량 사용자가 남성과 여성의 키를 모두 살펴볼 수 있도록 하려는 의도였지만 처음에 남성에게 주의를 환기하고 싶었다면 Male을 선택하고 내보내기 전에 "포함" 체크박스의 선택을 취소하세요(왼쪽의 JMP에 표시된 대로). 여기서는 Interactive HTML에서 처음과 같은 초기 그래프가 있지만 데이터 필터에 남성과 여성이 모두 포함되어 있고 필터링을 통해 전체 데이터 세트를 조사하거나 각 성별을 개별적으로 조사할 수 있습니다.
Unchecking the Include checkbox allows you to show just the Males initially but still allow the user to explore the entire dataset. "포함" 체크박스의 선택을 해제하면 처음에는 남성만 표시하지만 사용자가 전체 데이터 세트를 탐색할 수 있습니다. " 포함" 체크박스의 선택을 해제하면 처음에는 남성만 표시하지만 사용자가 전체 데이터 세트를 탐색할 수 있습니다. " 포함" 체크박스의 선택을 해제하면 처음에는 남성만 표시하지만 사용자가 전체 데이터 세트를 탐색할 수 있습니다. 트리맵은 계층적 데이터를 분석하는 데 중요한 그래픽 도구입니다. 아래는 기본적으로 선택되어 있는 분할 알고리즘을 사용하여 샘플 데이터 라이브러리의 도시 데이터 세트를 기반으로 생성된 트리맵입니다.
Treemap of Cities data sized by lead levels리드 수준에 따라 크기가 조정된 도시 데이터 트리맵
리드 수준에 따라 크기가 조정된 도시 데이터 트리맵
리드 수준에 따라 크기가 조정된 도시 데이터 트리맵
분할 알고리즘은 셀 그룹 이름순으로 정렬된 트리맵을 생성합니다. 또는 제곱 알고리즘을 선택하여 셀 크기순으로 정렬된 트리맵을 생성할 수 있습니다. 이 경우, 도시의 납 수준을 기준으로 정렬됩니다.
Treemap of the Cities by lead levels using the squarify algorithmsquarify 알고리즘을 사용하여 납 수준에 따른 도시 트리맵
squarify 알고리즘을 사용하여 납 수준에 따른 도시 트리맵
squarify 알고리즘을 사용하여 납 수준에 따른 도시 트리맵
JMP 14에서 내보낸 HTML 트리맵은 JMP에서 내보내기 전에 설정한 모든 옵션을 지원합니다. 이를 로컬 데이터 필터와 결합하면 웹에서 트리맵 및 기타 그래프 유형을 탐색할 수 있습니다.
JMP로 공유하는 방법
이전 프레젠테이션에서는 Windows에서는 파일 -> 다른 이름으로 저장 메뉴 옵션을 사용하여, Mac에서는 내보내기를 사용하여 JMP 보고서를 대화형 HTML로 저장하는 방법과 스크립트에서 이 콘텐츠를 생성하는 대화형 HTML 저장() JSL 명령[3]을 보여드렸습니다. 대시보드 빌더를 사용하거나 온라인 예제 에서 볼 수 있듯이 Windows 결합 기능을 사용하여 강력한 대시보드를 만들 수 있습니다. 그렇다면 이러한 보고서를 공유하는 가장 좋은 방법은 무엇일까요?
이 질문에 대한 답변은 파일을 얼마나 광범위하게 공유하고 싶은지에 따라 달라집니다. 내부 네트워크 내에서는 간단한 공유 네트워크 드라이브가 가장 좋은 방법일 수 있습니다. 때로는 이메일 설정이 HTML 콘텐츠를 차단하거나 사용자가 개인용 컴퓨터나 모바일 기기에 대용량 첨부 파일을 다운로드하도록 강요합니다. 다양한 온라인 파일 공유 서비스가 있지만 지원은 다릅니다. 2017년 9월부터 Dropbox는 더 이상 HTML 콘텐츠를 렌더링하지 않습니다 . 마찬가지로 Google Drive도 2015년에 이 기능을 더 이상 지원하지 않습니다 . 현재 렌더링된 HTML 콘텐츠를 교환하는 안정적인 방법으로 파일 공유 서비스를 추천할 수 없습니다. 파일을 공유할 수는 있지만 다운로드해야 하거나 텍스트 파일로 표시될 수 있는데, 실제로는 링크를 클릭하여 보고서를 보고 싶을 뿐입니다.
완벽하게 작동하는 웹 서버를 직접 관리하는 데 어려움을 겪는 고객을 위해, 프로그래밍 지식이 거의 없어도 웹사이트를 빠르게 개발할 수 있다고 광고하는 여러 호스팅/웹 디자인 사이트가 있습니다. 인라인 프레임 또는 iframe이라는 HTML 요소를 사용하면 한 웹페이지의 콘텐츠를 다른 페이지 내에 삽입할 수 있습니다. 예를 들어 JMP 커뮤니티는 iframe을 통해 콘텐츠를 삽입할 수 있도록 허용합니다. 하지만 선택한 제공업체가 시스템 내에서 iframe을 허용하지 않을 수도 있습니다. 웹페이지가 HTTPS로 제공되는 경우 iframe에 HTTP 콘텐츠를 호스팅할 수 없습니다. 이를 " 혼합 콘텐츠 "라고 하며, 최신 브라우저의 보안 기능입니다. 사용 중인 프레임워크를 고려하면 이 방법이 효과적인 해결책이 될 수 있지만, 아래 고객 사례에서 알 수 있듯이 약간의 작업이 필요할 수 있습니다.
코럴리프 고객 사례
데이터 공유 능력은 이미 고객에게 긍정적인 영향을 미치고 있습니다. 그중 하나가 앤더슨 메이필드 박사의 산호초 진단 연구입니다[4] . 그는 수년간 전 세계 산호초에서 데이터를 수집한 후, JMP를 사용하여 데이터와 분석을 공유하는 웹사이트를 만들었습니다. 이를 통해 유사한 과학자나 통계학자들이 변화하는 지구 기후에서 산호초의 건강 상태를 예측하는 데 협력할 수 있었습니다. 그의 웹사이트는 SquareSpace에 호스팅되어 있습니다.
Dr Anderson B. Mayfield's webpage Anderson B. Mayfield 박사의 웹 페이지 Anderson B. Mayfield 박사의 웹 페이지 Anderson B. Mayfield 박사의 웹 페이지 그는 JMP Interactive HTML 보고서를 자신의 웹사이트에 임베드하는 방법에 대한 조언을 얻기 위해 JMP 커뮤니티에 문의했는데, SquareSpace에서 직접 지원하지 않는 것으로 보였습니다[5]. 커뮤니티, 특히 당사의 주요 소프트웨어 개발자 중 한 명인 Nascif Abousalh-Neto의 응답 덕분에 그는 Amazon S3에 Interactive HTML 파일을 호스팅하고 iframe을 사용하여 수집된 데이터를 설명하는 페이지 중앙에 Interactive HTML 보고서를 임베드할 수 있다는 것을 알게 되었습니다.
JMP 14.2가 출시되면서 JMP Public이 출시되어, 라이브 JMP 서버 연결을 통해 고급 기능을 제공하는 JMP Interactive HTML 보고서에서도 동일한 기능을 사용할 수 있습니다. 사용자는 JMP Public에서 보고서에 직접 연결할 수 있으며, iframe HTML 마크업을 생성하여 다른 웹페이지에 붙여넣는 등 다른 플랫폼에 보고서를 쉽게 임베드할 수 있습니다. 독립형 Interactive HTML과 달리, 데이터를 제외하거나 포함할 수 있으며, JMP 서버가 분석을 처리하고 업데이트된 결과를 익숙한 웹 인터페이스에 표시하지만, JMP Public의 새롭고 세련된 사용자 인터페이스를 제공합니다.
JMP Public에 게시된 보고서를 공유하려면 페이지 상단의 공유 아이콘을 클릭하고 아래와 같이 "삽입 코드(iframe)"를 선택하세요.
Embedding an iframe of interactive HTML reports published on JMP Public is easy. JMP Public에 게시된 대화형 HTML 보고서의 iframe을 임베드하는 것은 간단합니다. JMP Public에 게시된 대화형 HTML 보고서의 iframe을 임베드하는 것은 간단합니다. JMP Public에 게시된 대화형 HTML 보고서의 iframe을 임베드하는 것은 간단합니다. 이렇게 하면 웹페이지에 iframe 태그를 생성하는 HTML 코드가 클립보드에 저장됩니다(아래 참조).
<IFRAME class="jmp-share-iframe" frameborder="0" width="800" height="600" src="https://public.jmp.com/api/packages/Diamond-Price-vs-Carat-Weight-Filtered-b/js-p/5bb3d86e615499085427cde3/indexPage" style="margin: 0.8em 0;"></IFRAME>
이 코드를 본문 시작 부분에 표시된 이미지의 라이브 버전에 적용한 것처럼 HTML 페이지에 원하는 위치에 붙여넣기만 하면 페이지 내에서 대화형 콘텐츠가 렌더링됩니다.
결론
대화형 HTML은 JMP 버전 4개에서 사용 가능합니다. 앤더슨 메이필드 박사가 전 세계 산호초 건강 증진 방안을 공동 연구했던 것처럼, 여러분도 흥미로운 활용 방법을 찾으셨기를 바랍니다. 여러분의 성공 사례와 어려움에 대한 의견을 듣고 JMP의 대화형 HTML 보고서 및 대시보드를 활용하여 협업할 수 있도록 도와드리겠습니다. JMP Public에서 대화형 HTML 예제를 참조하거나 이 백서의 예제를 살펴보세요.
참고문헌
[1] Becker R. 및 Cleveland W. (1987). "브러싱 산점도", Technometrics , 127-142.
[2] Stuetzle W. (1987). "플롯 창", 미국 통계 협회 저널, 82 , 466-475.
[3] https://community.jmp.com/t5/Discovery-Summit-2017/Sharing-Interactive-Web-Reports-in-JMP-13/ta-p/44069
[4] http://coralreefdiagnostics.com
[5] https://community.jmp.com/t5/Discussions/posting-interactive-html-plots-on-websites/mp/60478