JMP®에서 대화형 웹 보고서 공유Heman Robinson, JMP Principal Software Developer, SAS
지난 20년 동안 대화형 웹 페이지를 지원하는 경쟁 기술이 퍼레이드처럼 등장했습니다. 마침내 업계는 하나의 기술로 표준화되었고, JMP®는 HTML 버전 5 또는 대화형 HTML로 보고서를 제공하기 시작했습니다.
대화형 HTML은 포인트 식별, 연결 및 브러싱을 포함한 JMP의 많은 탐색 기능을 지원합니다. 저장된 보고서는 웹에서 공유하거나 동료에게 이메일로 보낼 수 있습니다. 이 논문에서는 대화형 HTML을 사용하여 JMP 결과를 공유하는 시기와 방법을 설명합니다.
배경
HTML 또는 HyperText Markup Language는 모든 웹 페이지의 구조를 정의하는 기술입니다( http://www.w3.org/html/ )(Berners-Lee, 1989). HTML은 스타일링을 위해 Cascading Style Sheets( 스타일 CSS3 )(Meyer, 2004) 및 프로그래밍을 위해 JavaScript( http://www.ecmascript.org/ )(Crockford, 2008)와 함께 사용됩니다.
버전 4를 통해 HTML은 그래픽과 상호 작용에 대한 지원이 제한되었습니다. 이 격차를 메우기 위해 개발된 기술은 대부분 브라우저 확장 프로그램 또는 "플러그인"이었습니다. 여기에는 Java 애플릿, ActiveX 컨트롤, Flash 및 Silverlight가 포함되었습니다.
2011년경부터 웹 브라우저는 그래픽을 위한 새로운 HTML 캔버스 요소와 상호작용을 위한 슬라이더와 같은 새로운 컨트롤을 지원하기 시작했습니다. 이 무렵 경쟁 기술은 쇠퇴하기 시작했고, HTML5를 사용하여 대화형 웹 페이지를 지원하기 시작했습니다. 아래 그림은 채용 사이트 Indeed.com( http://www.indeed.com/ )의 광고에서 키워드 빈도 측면에서 이러한 추세를 보여줍니다.
그림 1. 대화형 웹 기술에 대한 구인 공고
이러한 추세에 대응하여 JMP는 다른 소프트웨어 제품과 마찬가지로 웹 개발을 Flash에서 Interactive HTML로 전환했습니다. JMP Interactive HTML 보고서는 다음에서 공유할 수 있는 단일 HTML 파일입니다.
- 인터넷에 게시하다,
- 공유 폴더에 저장하거나
- 동료에게 이메일로 보냅니다.
그림 2. JMP 대화형 HTML 보고서
언제 사용해야 하나요?
대화형 HTML에는 내장된 데이터가 필요합니다. 그래프를 만드는 데 사용된 데이터는 무엇이든 웹 페이지에 내장됩니다. 데이터는 난독화되어 있지만 동기를 부여받은 해커는 읽을 수 있습니다.
데이터를 암호화하면 이 보안 위험을 완화할 수 있을 것 같습니다. 그럴 수 없습니다. 데이터는 웹 브라우저에서 읽을 수 있어야 합니다. 따라서 암호화된 데이터에는 웹 브라우저와 다른 모든 사람이 읽을 수 있는 복호화 키가 필요합니다. 데이터를 암호화하는 것은 집에 비싼 도난 경보기를 사서 열쇠를 매트 아래에 두는 것과 같습니다.
예를 들어 이름이나 ID 열이 없는 데이터 하위 집합을 만드는 등 데이터를 익명화 하여 일부 위험을 제거할 수 있습니다. 이 하위 집합을 직접 만드는 것이 가장 안전합니다. 그러나 JMP 보고서에 사용되지 않는 열은 대화형 HTML 파일에 포함되지 않습니다. 따라서 레이블이나 다른 목적으로 식별 열을 사용하지 않는 한 데이터는 효과적으로 익명화됩니다.
민감한 데이터를 분석하는 경우, 데이터를 임베드하지 않는 정적 HTML 형식(HTML 버전 4)을 항상 사용할 수 있습니다. "파일: 다른 이름으로 저장" 대화 상자에서 HTML4는 간단히 "HTML 파일"로 표시됩니다. HTML5는 상호 작용성과 보안을 모두 강조하기 위해 "데이터가 있는 대화형 HTML"로 표시됩니다.
그림 3. 정적 HTML(HTML4) 및 대화형 HTML(HTML5)에 대한 "파일: 다른 이름으로 저장" 대화 상자
내장된 데이터 외에도 Interactive HTML에는 최신 웹 브라우저도 필요합니다. Windows에서 Internet Explorer 버전 8은 HTML 버전 5를 지원하지 않으며 IE 버전 9와 10은 일부만 지원합니다. 기본 Android 브라우저는 오래되어 느리고 Chrome과 다른 브라우저는 다운로드하기 쉽습니다.
2015년 현재 JMP는 다음 브라우저와 기기에서 대화형 HTML을 권장합니다.
- Windows의 IE 11 및 Edge
- Windows 및 Mac의 Firefox
- Windows 및 Mac에서 Opera 사용
- Windows, Mac 및 Android 태블릿의 Chrome
- Mac 및 iPad의 Safari
- Kindle Fire의 실크
우리는 휴대폰에서 Interactive HTML을 테스트하지 않습니다. 그러나 최신 iPhone 및 Android 휴대폰에서는 종종 잘 작동합니다. 성능과 기능은 휴대폰에 따라 크게 다릅니다.
사용 방법
보고서 저장
HTML5 형식으로 보고서를 저장하려면 Windows에서는 "파일: 다른 이름으로 저장:"을 선택하고, Mac에서는 "파일: 내보내기"를 선택한 다음 "데이터가 포함된 대화형 HTML" 형식을 지정합니다.
그림 4. 대화형 HTML(HTML5)에 대한 "파일: 다른 이름으로 저장" 대화 상자
대화형 HTML은 JMP에서 가장 자주 사용되는 기능을 지원합니다. 보고서에 지원되지 않는 기능이 포함된 경우 그림 5와 같이 대화 상자에 경고가 표시됩니다. 이런 경우 보고서의 일부가 정적 HTML4와 마찬가지로 정적 이미지로 내보내집니다.
그림 5. 지원되지 않는 기능에 대한 경고
요점
대화형 HTML 보고서를 만들면 페이지가 생성될 때 닫혀 있던 그래프와 표는 열 때까지 웹 페이지에서 닫힌 상태로 유지됩니다. 보고서의 개요 버튼을 클릭하거나 탭하여 보고서 섹션을 열거나 닫습니다.
아래 그림은 "Lack of Fit" 표를 여는 방법을 보여줍니다. "Analysis of Variance"와 "Parameter Estimates" 표는 이미 열려 있습니다.
그림 6: 개요 버튼 사용
JMP Interactive HTML은 "모바일 퍼스트" 사용자 인터페이스 디자인 전략을 사용합니다(Wroblewski, 2011). Interactive HTML 보고서를 만들 때 어떤 기기에서 읽힐지 항상 알 수는 없습니다. 이러한 이유로 버튼과 같은 컨트롤은 크고 데스크톱이나 모바일 기기에서 사용하기 쉽습니다.
메뉴
메뉴를 사용하여 보고서 내용의 상태 또는 모양을 변경합니다. 메뉴 내용은 연관된 개요의 내용에 따라 달라집니다. 예를 들어, Profiler에는 상태를 재설정하는 단일 메뉴가 있습니다.
그림 7: 프로파일러 메뉴 사용
버블 플롯에는 모양과 동작을 변경할 수 있는 광범위한 메뉴 시스템이 있습니다.
그림 8: 버블 플롯 메뉴 사용
모드
사용자 인터페이스의 모드 와 관련하여 전통적인 디자인 조언은 "가능하면 피하라"는 것입니다(Nielsen, 1993). 그러나 JMP처럼 풍부한 상호 작용이 있는 제품을 지원하려면 몇 가지 모드가 필요합니다.
익숙한 예로 선택 모드가 있습니다. 단일 객체 또는 여러 객체를 선택할 수 있습니다. 단일 선택과 다중 선택은 두 가지 다른 모드입니다.
데스크톱 제품에서는 Shift 및 Ctrl 키를 사용하여 선택 모드를 전환합니다. 그러나 모바일 기기에서는 이러한 키가 없습니다.
이러한 이유로 선택 모드는 페이지 상단에 토글 버튼 쌍으로 표시됩니다. 기본적으로 이 쌍의 첫 번째 버튼이 눌러집니다. 이를 통해 한 번에 하나의 객체를 선택하고 다른 모든 객체의 선택을 해제할 수 있습니다.
그림 9: 단일 객체 선택
여러 객체를 선택하려면 두 번째 토글 버튼을 클릭하거나 탭합니다. 이렇게 하면 여러 객체를 선택하거나 선택 해제할 수 있습니다.
아래 그림에서 세 개의 히스토그램 막대가 선택되었습니다. JMP에서와 같이 모든 그래프가 연결되어 있으므로 한 그래프에서 선택된 행은 모든 그래프에서 강조 표시됩니다(Becker 및 Cleveland, 1987)(Stuetzle, 1987).
그림 10: 여러 객체 선택
Shift 및 Ctrl 키와 토글 버튼의 동작 사이에는 유용한 구분이 있습니다. 이 키는 임시 모드 전환을 가능하게 하며, 이는 사용자 오류를 줄이는 경향이 있습니다(Raskin 2000). 토글 버튼은 지속적인 모드 전환을 가능하게 하며, 이는 모바일 기기에서 더 간단하고 쉽게 배울 수 있습니다. 데스크톱에서 대화형 HTML 보고서를 보는 경우 두 동작이 모두 지원됩니다.
두 번째 토글 버튼 쌍은 보고서 전체에서 데이터로 초점을 전환합니다. 기본적으로 이 쌍의 첫 번째 버튼이 눌러져 있습니다. 모바일 기기에서 이 첫 번째 토글 버튼을 사용하면 보고서를 스크롤하고 확대/축소할 수 있습니다. 모든 기기에서 보고서의 객체를 식별할 수 있습니다. 대화형 HTML 보고서의 거의 모든 객체는 일부 식별 정보를 표시할 수 있습니다.
그림 11: 객체 식별
아래 그래프는 세 가지 다른 홍채 종에 대한 Fisher의 측정값을 포함하는 JMP 샘플 데이터 테이블인 Iris.jmp를 사용한 이변량 적합을 보여줍니다. 한 데이터 포인트는 X 및 Y 좌표와 행 번호로 식별되었습니다. 아래 표는 p 값과 관련 설명을 보여줍니다.
그림 12: 데이터 값 식별
그림 13: p 값 설명
항상 객체를 식별하거나 보고서를 조작하고 싶지는 않습니다. 종종 목표는 데이터를 탐색하는 것입니다. 두 번째 토글 버튼을 클릭하거나 탭하면 사각형을 끌어 그래프에서 행을 선택할 수 있습니다. 이를 브러싱 이라고 하며, 다변량 데이터를 탐색하는 데 중요한 기술입니다(Becker 및 Cleveland, 1987). 사각형의 중앙을 끌어서 이동하거나 모서리를 끌어서 크기를 조정합니다.
그림 14: 데이터 브러싱
추가 전력을 위해 모드를 결합할 수 있습니다. 다중 선택이 있는 브러시를 사용하는 경우 브러시가 선택 영역을 확장하여 아래 그림과 같이 데이터를 "페인팅"합니다.
이 두 쌍의 모드는 데이터 탐색을 위한 가장 일반적이고 유용한 대화형 기능을 지원합니다. JMP는 풍부한 추가 모드를 제공하며, 그 중 다수는 도구 팔레트에 표면화되어 있습니다(Cooper and Reimann, 2003). 도구 팔레트 메타포는 커서 지원이 부족하기 때문에 웹 애플리케이션에서는 덜 유용하지만, 이러한 모드 중 일부는 향후 릴리스에서 지원될 수 있습니다.
그림 15: 다중 선택을 통한 브러싱
자동화하는 방법
대화형 HTML 보고서는 JMP 스크립팅 언어(JSL)(SAS, 2014)를 사용하여 자동화할 수 있습니다. 새로운 명령인 "대화형 HTML 저장"을 사용하면 이 기능을 사용할 수 있습니다.
// 이변량 적합을 내보냅니다.
dt = Open("$SAMPLE_DATA/Big Class.jmp" );
obj = 이변량( Y( :체중 ), X( :키 ), 적합선 );
obj << 대화형 HTML 저장( "C:\Bivariate.html" );
열기( "C:\Bivariate.html" );
위의 스크립트에서 "대화형 HTML 저장" 명령 다음에 "열기" 명령이 이어집니다. 이렇게 하면 보고서가 기본 웹 브라우저에 자동으로 표시됩니다.
그것을 구성하는 방법
대화형 HTML 보고서를 많이 만드는 경우 JMP 자동 게시 추가 기능(Valente, Brady, Kennedy, 2014)을 사용하면 도움이 됩니다. 이 추가 기능은 표지 페이지와 개별 보고서에 연결된 썸네일 스케치를 사용하여 보고서를 구성하는 자동화된 방법을 제공합니다. https://community.jmp.com/docs/DOC-6689 의 JMP 사용자 커뮤니티에서 JMP 자동 게시 추가 기능을 다운로드하세요.
JMP 자동 게시 추가 기능은 http://www.jmp.com/jmphtml5/ 의 예제에 대해 아래 표지 페이지를 생성했습니다.
그림 16. JMP 자동 게시 추가 기능으로 구성된 보고서
미래의 작업
이 프로젝트의 개발은 고객 수요에 따라 이루어집니다. 가장 자주 사용되는 표와 그래프는 JMP 11에서 지원되었습니다. Bubble Plots와 Profilers는 JMP 12에서 추가되었습니다.
향후 릴리스에서는 GraphBuilder에 대한 수요가 상당합니다. 또한 JMP Auto-Publishing Add-In을 주요 제품에 통합하고자 하며, 고객 요청에 가장 관심이 많습니다.
참고문헌
Becker R. 및 Cleveland W. (1987). "Brushing Scatterplots", 기술측정학 , 127-142.
Berners-Lee T. (1989). "정보 관리: 제안", 세른(CERN) .
쿠퍼 A.와 라이만 R(2003). Face 2.0에 대하여: 상호작용 디자인의 필수 요소 . 와일리, 322-323.
크록포드 D. (2008). 자바스크립트: 좋은 부분들. 오라일리.
Meyer E. (2004). Cascading Style Sheets: The Definitive Guide. O'Reilly.
Nielsen J. (1993). 사용성 엔지니어링. 학술 출판사, 146-148.
Raskin J. (2000). 인간적 인터페이스: 상호작용 시스템 설계를 위한 새로운 방향 . ACM Press, 55-59.
SAS(2014). JMP 11 스크립팅 가이드, 2판 . SAS Institute Inc.
Stuetzle W. (1987). "플롯 창", 미국 통계 협회 저널, 82 , 466-475.
Valente D., Brady B., 및 Kennedy, A. (2014). "대화형 HTML 보고서 자동 게시를 위한 JMP 추가 기능", JMP 디스커버리 서밋 2014 .
Wroblewski L. (2011). 모바일 퍼스트 . 책 따로.
