JMP®에서 대화형 웹 보고서 공유Heman Robinson, JMP 수석 소프트웨어 개발자, 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와 함께 사용됩니다( http://www.w3.org/Style/CSS/ ) (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에서 대화형 HTML로 전환했습니다. JMP Interactive HTML 보고서는 다음에서 공유할 수 있는 단일 HTML 파일입니다.
- 인터넷에 올리고,
- 공유 폴더에 저장하거나
- 동료에게 이메일로 보냅니다.
그림 2. JMP 대화형 HTML 보고서
사용 시기
대화형 HTML에는 포함된 데이터가 필요합니다. 그래프를 만드는 데 사용되는 데이터가 무엇이든 해당 데이터는 웹 페이지에 포함됩니다. 데이터는 난독화되지만 동기가 있는 해커가 읽을 수 있습니다.
데이터를 암호화하면 이 보안 위험을 완화할 수 있는 것처럼 보일 수 있습니다. 할 수 없습니다. 데이터는 웹 브라우저에서 읽을 수 있어야 합니다. 따라서 암호화된 데이터에는 웹 브라우저와 모든 사람이 읽을 수 있는 암호 해독 키가 필요합니다. 데이터를 암호화하는 것은 집에 고가의 도난 경보기를 구입한 다음 열쇠를 매트 아래에 두는 것과 같습니다.
다음과 같은 방법으로 위험을 제거할 수 있습니다. 익명화 예를 들어 이름 또는 ID 열 없이 데이터의 하위 집합을 생성하여 데이터. 이 하위 집합을 직접 만드는 것이 가장 안전합니다. 그러나 JMP 보고서에서 사용되지 않는 열은 Interactive HTML 파일에 포함되지 않습니다. 따라서 레이블이나 다른 목적으로 식별 열을 사용하지 않는 한 데이터는 효과적으로 익명화됩니다.
민감한 데이터를 분석하는 경우 항상 데이터를 포함하지 않는 정적 HTML 형식(HTML 버전 4)을 사용할 수 있습니다. "파일: 다른 이름으로 저장" 대화 상자에서 HTML4는 단순히 "HTML 파일"로 레이블이 지정됩니다. HTML5는 상호작용과 보안을 모두 강조하기 위해 "데이터가 포함된 대화형 HTML"로 레이블이 지정됩니다.
그림 3. 정적 HTML(HTML4) 및 대화형 HTML(HTML5)에 대한 "파일: 다른 이름으로 저장" 대화 상자
포함된 데이터 외에도 대화형 HTML에는 최신 웹 브라우저가 필요합니다. Windows에서 Internet Explorer 버전 8은 HTML 버전 5를 지원하지 않으며 IE 버전 9 및 10은 일부만 지원합니다. 기본 Android 브라우저는 오래되고 느리며 Chrome 및 기타 브라우저는 쉽게 다운로드할 수 있습니다.
2015년부터 JMP는 다음 브라우저 및 장치에서 대화형 HTML을 권장합니다.
- Windows의 IE 11 및 Edge
- Windows 및 Mac의 Firefox
- Windows 및 Mac의 오페라
- Windows, Mac 및 Android 태블릿의 Chrome
- Mac 및 iPad의 Safari
- 빛나다 불에 실크
전화기에서는 대화형 HTML을 테스트하지 않습니다. 그러나 최신 iPhone 및 Android 휴대폰에서는 종종 잘 작동합니다. 성능과 기능은 전화기에 따라 크게 다릅니다.
사용 방법
보고서 저장
보고서를 HTML5 형식으로 저장하려면 Windows에서 "파일: 다른 이름으로 저장:" 또는 Mac에서 "파일: 내보내기"를 선택하고 "데이터가 있는 대화형 HTML" 형식을 지정합니다.
그림 4. 대화형 HTML(HTML5)에 대한 "파일: 다른 이름으로 저장" 대화 상자
대화형 HTML은 JMP에서 가장 자주 사용되는 기능을 지원합니다. 보고서에 지원되지 않는 기능이 포함되어 있으면 그림 5와 같이 대화 상자에 경고가 표시됩니다. 이 경우 보고서의 일부가 정적 HTML4에서와 같이 정적 이미지로 내보내집니다.
그림 5. 지원되지 않는 기능에 대한 경고
요점
대화형 HTML 보고서를 만들 때 페이지가 만들어질 때 닫혀 있던 그래프와 테이블은 사용자가 열 때까지 웹 페이지에서 닫혀 있습니다. 보고서에서 개요 버튼을 클릭하거나 탭하여 보고서 섹션을 열거나 닫습니다.
아래 그림은 "적합 부족" 테이블을 여는 방법을 보여줍니다. "Analysis of Variance" 및 "Parameter Estimates" 테이블이 이미 열려 있습니다.
그림 6: 개요 버튼 사용
JMP Interactive HTML은 "모바일 우선" 사용자 인터페이스 디자인 전략을 사용합니다(Wroblewski, 2011).대화형 HTML 보고서를 만들 때 어떤 장치에서 읽을지 항상 알 수 있는 것은 아닙니다. 이러한 이유로 버튼과 같은 컨트롤은 데스크탑이나 모바일 장치에서 크고 사용하기 쉽습니다.
메뉴
메뉴를 사용하여 보고서 내용의 상태 또는 모양을 변경합니다. 메뉴 내용은 연결된 아웃라인의 내용에 따라 다릅니다. 예를 들어 프로파일러에는 상태를 재설정하는 단일 메뉴가 있습니다.
그림 7: 프로파일러 메뉴 사용
거품 도표에는 모양과 동작을 변경할 수 있는 광범위한 메뉴 시스템이 있습니다.
그림 8: 버블 도표 메뉴 사용
모드
에 관하여 모드 사용자 인터페이스에서 전통적인 디자인 조언은 "가능하면 피하십시오"(Nielsen, 1993)입니다.그러나 JMP와 같이 풍부한 대화형 제품을 지원하려면 몇 가지 모드가 필요합니다.
친숙한 예는 선택 모드입니다. 단일 개체 또는 여러 개체를 선택할 수 있습니다. 단일 선택과 다중 선택은 서로 다른 두 가지 모드입니다.
데스크톱 제품에서는 Shift 및 Ctrl 키를 사용하여 선택 모드를 전환합니다. 그러나 모바일 장치에는 이러한 키가 존재하지 않습니다.
이러한 이유로 선택 모드는 페이지 상단에 한 쌍의 토글 버튼으로 표시됩니다. 기본적으로 이 쌍의 첫 번째 버튼이 눌러집니다. 이렇게 하면 한 번에 하나의 개체를 선택하고 다른 개체는 모두 선택 취소할 수 있습니다.
그림 9: 단일 개체 선택
여러 객체를 선택하려면 두 번째 토글 버튼을 클릭하거나 탭합니다. 이렇게 하면 여러 개체를 선택하거나 선택 취소할 수 있습니다.
아래 그림에서는 세 개의 히스토그램 막대가 선택되었습니다. JMP에서와 마찬가지로 모든 그래프는 다음과 같습니다. 연결된 따라서 하나의 그래프에서 선택된 행은 모든 그래프에서 강조 표시됩니다(Becker and Cleveland, 1987)(Stuetzle, 1987).
그림 10: 여러 개체 선택
Shift 및 Ctrl 키와 토글 버튼의 동작 사이에는 유용한 차이점이 있습니다. 키는 사용자 오류를 줄이는 경향이 있는 임시 모드 전환을 활성화합니다(Raskin 2000). 토글 버튼을 사용하면 모바일 장치에서 더 간단하고 쉽게 배울 수 있는 영구 모드 전환이 가능합니다. 데스크톱에서 대화형 HTML 보고서를 보는 경우 두 동작이 모두 지원됩니다.
두 번째 토글 버튼 쌍은 전체 보고서에서 데이터로 포커스를 전환합니다. 기본적으로 이 쌍의 첫 번째 버튼이 눌러집니다. 모바일 장치에서 이 첫 번째 토글 버튼을 사용하면 보고서를 스크롤하고 확대/축소할 수 있습니다. 모든 장치에서 보고서의 개체를 식별할 수 있습니다. 대화형 HTML 보고서의 거의 모든 개체는 일부 식별 정보를 표시할 수 있습니다.
그림 11: 개체 식별
아래 그래프는 세 가지 다른 붓꽃 종에 대한 Fisher의 측정값이 포함된 JMP 샘플 데이터 테이블인 Iris.jmp를 사용한 이변량 적합을 보여줍니다. 하나의 데이터 포인트가 X 및 Y 좌표와 행 번호로 식별되었습니다. 아래 표는 피 -value 관련 설명 포함.
그림 12: 데이터 값 식별
그림 13: 설명 피 -값
항상 개체를 식별하거나 보고서를 조작하고 싶지는 않습니다. 종종 목표는 데이터를 탐색하는 것입니다. 두 번째 전환 버튼을 클릭하거나 탭하면 사각형을 드래그하여 그래프의 행을 선택할 수 있습니다. 이것은 ... 불리운다 브러싱 , 다변량 데이터 탐색을 위한 중요한 기술(Becker and Cleveland, 1987). 사각형의 중심을 끌어 이동하거나 모서리를 끌어 크기를 조정합니다.
그림 14: 데이터 브러싱
추가 전력을 위해 모드를 결합할 수 있습니다. 다중 선택이 있는 브러시를 사용하는 경우 브러시가 선택을 확장하여 아래 그림과 같이 데이터를 "페인팅"합니다.
이 두 쌍의 모드는 데이터 탐색을 위한 가장 일반적이고 유용한 대화형 기능을 지원합니다. JMP는 다양한 추가 모드를 제공하며 그 중 많은 모드가 도구 팔레트에 표시됩니다(Cooper and Reimann, 2003). 도구 팔레트 메타포는 커서 지원이 좋지 않기 때문에 웹 응용 프로그램에서 덜 유용하지만 이러한 모드 중 일부는 향후 릴리스에서 지원될 수 있습니다.
그림 15: 다중 선택으로 브러싱
자동화하는 방법
JSL(JMP 스크립팅 언어)(SAS, 2014)을 사용하여 대화형 HTML 보고서를 자동화할 수 있습니다. 새 명령인 "대화형 HTML 저장"을 사용하면 이 기능을 사용할 수 있습니다.
// 이변량 피팅을 내보냅니다.
dt = Open( "$SAMPLE_DATA/Big Class.jmp" );
obj = Bivariate( Y( :체중 ), X( :높이 ), 적합선 );
obj << 대화형 HTML 저장( "C:\Bivariate.html" );
Open( "C:\Bivariate.html" );
위의 스크립트에서 "대화형 HTML 저장" 명령 다음에 "열기" 명령이 옵니다. 이렇게 하면 기본 웹 브라우저에 보고서가 자동으로 표시됩니다.
정리 방법
대화형 HTML 보고서를 많이 만드는 경우 JMP 자동 게시 추가 기능(Valente, Brady 및 Kennedy, 2014)의 이점을 활용할 수 있습니다. 이렇게 하면 개별 보고서에 연결된 표지와 축소판 스케치를 사용하여 보고서를 구성하는 자동화된 방법을 제공합니다. 다음 JMP 사용자 커뮤니티에서 JMP 자동 게시 추가 기능을 다운로드하십시오. https://community.jmp.com/docs/DOC-6689 .
JMP 자동 게시 추가 기능은 아래의 표지를 생성했습니다. http://www.jmp.com/jmphtml5/ .
그림 16.JMP 자동 게시 추가 기능으로 구성된 보고서
미래의 일
이 프로젝트의 개발은 고객의 요구에 따라 이루어집니다. 가장 자주 사용되는 표와 그래프는 JMP 11에서 지원됩니다. 버블 도표와 프로파일러가 JMP 12에 추가되었습니다.
향후 릴리스의 경우 GraphBuilder에 대한 상당한 수요가 있습니다. 또한 JMP 자동 게시 추가 기능을 주요 제품에 통합하기를 희망하며 고객 요청에 가장 관심이 많습니다.
참조
베커 R. 및 클리블랜드 W. (1987). "브러싱 산점도", 테크노메트릭스 , 127-142.
버너스-리 T. (1989). "정보 관리: 제안", CERN .
Cooper A. 및 Reimann R(2003). Face 2.0 정보: 인터랙션 디자인의 필수 요소 . 와일리, 322-323.
크록포드 D. (2008). 자바스크립트&콜론; 좋은 부품. 오라일리.
메이어 E. (2004). CSS(Cascading Style Sheets): 최종 가이드. 오라일리.
닐슨 J. (1993). 사용성 공학. 학술 출판부, 146-148.
래스킨 J. (2000). 휴메인 인터페이스: 인터랙티브 시스템 설계를 위한 새로운 방향 . ACM 보도, 55-59.
SAS(2014). JMP 11 스크립팅 가이드, 제2판 . SAS 연구소 Inc.
W. 스튜에츨 (1987). "플롯 창", 미국 통계 협회 저널, 82 , 466-475.
발렌테 D. 브래디 B., 케네디, A. (2014). "대화형 HTML 보고서 자동 게시를 위한 JMP 추가 기능", JMP 디스커버리 서밋 2014 .
로블레프스키 L. (2011). 모바일 퍼스트 . 책 따로.
데이터 탐색데이터 시각화
