Dimple과 D3을 사용하여 JavaScript에서 데이터 시각화를 만듭니다

월드 와이드 웹은 손가락 끝에 풍부한 데이터를 배치합니다. 이 데이터의 엄청난 양으로 인해 눈에 띄는 방식으로 표시되거나 메시지를 전달하는 방식으로 제시하는 것은 종종 까다로울 수 있습니다. 이것은 데이터 시각화가 등장하는 곳입니다 이 기사에서는 DIMPLE.JS JavaScript 라이브러리를 사용하여 2015 년 1 월의 미국 차량 리콜 작성을 통해 D3.JS. 키 테이크 아웃

데이터 시각화는 D3.JS를 구축 한 JavaScript와 Dimple.js 라이브러리를 사용하여 생성 할 수 있습니다. 프로세스에는 목표 설정, 데이터 작업 및 D3 객체에 데이터를 바인딩하는 것이 포함됩니다. 이 경우 2015 년 1 월 제조업체의 총 차량 리콜 수를 묘사 한 막대 차트가 만들어졌습니다.

데이터 정리 및 준비는 성공적인 데이터 시각화에 중요합니다. 여기에는 관련 데이터 추출, 사용 가능한 것의 하위 집합으로 열을 줄이며 특정 기준에 따라 데이터를 수동으로 그룹화하는 것이 포함됩니다. D3.JS 라이브러리는 CSV, TSV 또는 JSON과 같은 다양한 데이터 파일 형식에 대한 기본 지원을 제공하며 처리를위한 JavaScript 배열로 변환 할 수 있습니다. 툴팁, 미적 전환 및 레이블 조작과 같은 추가 기능을 추가하여 데이터 시각화 및 사용자 상호 작용을 향상시킬 수 있습니다.

목표 설정 NHTSA 는 1967 년 이후 모든 NHTSA 안전 관련 결함 및 규정 준수 캠페인을 포함하는 리콜 파일 (웹 사이트를 통해 액세스 할 수 있음)을 제공합니다. 우리의 목표는 주어진 달의 데이터를 추출하는 것입니다 ( 2015 년 1 월), 그리고 그로부터 막대 차트를 만들기 위해, 제조업체의 차량 리콜 수를 묘사합니다. D3.JS로 데이터 시각화를 시청하십시오 JavaScript로 데이터를 설명하십시오

이 과정을보십시오 이 과정을보십시오 이 데이터 시각화는 설명이 아니며 (우리는 원시 데이터를 보여줄 것입니다), 탐색 적은 거의 없습니다 (시청자가 해당 데이터에서 구축 할 수있는 이야기는 많지 않습니다). 그러나 사용자가 막대 중 하나를 가리킬 때 차트 옆에 추가 정보를 표시하려고합니다. 이것은 우리가 끝날 것입니다 :

기사 끝에서 (작은) 라이브 데모를 볼 수 있거나 코드펜에서 원본을 볼 수 있습니다. 데이터 작업 우리가 필요한 데이터 만 유지합니다 이 섹션에서 언급 된 모든 파일은 Github Repo에서 찾을 수 있습니다. 원본 파일 flat_rcl.txt (link)는 데이터의 (109,682 레코드가 정확한 탭 분리 된 값 파일입니다. 이 데이터와 관련된 열을 자세히 설명하는 파일 rcl.txt (link)가 함께 제공됩니다. 2015 년 1 월의 데이터에만 관심이 있으므로 기록 생성 날짜가 2015 년 1 월 인 레코드에만 관심이 있으므로 나머지 레코드를 제거 할 수 있습니다. 이를 위해 OpenOffice Calc 스프레드 시트 프로그램을 사용하고 있습니다 (다른 스프레드 시트 소프트웨어로는 충분하지만). 결과 파일 RCL_JANUARE_2015.CSV (LINK)는 201 레코드 만 계산합니다. 이제 우리는 열을 사용 가능한 것의 하위 집합으로 줄여야합니다. 기록 생성 날짜, 제조업체, 모델, 모델 연도, 제조 시작 날짜, 제조 종료 날짜, 영향을받는 단위 수, 결함 요약, 결과 요약 및 시정 요약. 그런 다음 결과 CSV 파일의 첫 번째 줄에 열 이름을 추가 할 수 있습니다. 이것은 우리에게 시각화에 필요한 원시 데이터를 제공합니다. 데이터 구조를 만듭니다 이제 우리는 동일한 결함이있는 레코드를 결합하여 메이커가 리콜을 수동으로 그룹화해야합니다. 결합 된 레코드가 날짜별로 정렬되고 모델별로 정렬되고 영향을받는 누적 전위 총 단위 수가 있는지 확인해야합니다. 우리는이 그룹화에 JSON 데이터 구조를 사용할 것입니다.

이를 설명하기 위해 rcl_january_2015_clean.csv 파일의 첫 세 항목을 처리합시다. 이들은 동일한 연도의 제조를 가진 2013 년, 2014 년 및 2015 년의 MCI의 J4500이 동일한 결함을 제시한다는 점에서 한 줄로 분류 할 수 있습니다. 영향을받는 잠재적 인 단위는 이미 데이터 세트 에서이 세 가지 모델을 함께 그룹화합니다.

여기에 우리가 사용할 JSON 데이터 구조는 다음과 같습니다.

이 ​​프로세스를 반복하고 (그리고 이중 인용문을 피한 후) 이제 CSV 파일
rcl_january_2015_json.csv

(링크)가 있습니다. 간결함을 위해, 우리의 작업 예제는 원본 파일의 처음 세 제조업체 만 보여줄 것입니다 (46 개 중 3 개). d3 객체 에 데이터를 바인딩합니다 d3은 CSV, TSV 또는 JSON과 같은 데이터 파일 형식에 대한 기본 지원을 제공합니다. 파일을 가져 오기 위해 Ajax 호출이 수행 된 다음 구문 분석되어 JavaScript 배열로 변환됩니다. 우리가 만든 CSV 파일은 다음 코드로 가져올 수 있습니다.

우리는 코드에서 JavaScript 배열을 직접 정의 할 수 있습니다. 코드에서 코드 데모의 목적으로 여기서 할 것입니다. 데이터 구조는 CSV 파일에서 생성했을 배열 D3에 최대한 가깝게 유지되었습니다.

그리고 지금, 다이빙을합시다!

html은 간단합니다 : 두 개의 div, 하나는 차트 (Recepschart), 다른 하나는 막대 중 하나 (RecallDetails)를 통해 추가 세부 사항을 표시 할 수 있습니다.

<span>{
</span>  <span>"items": [
</span>    <span>{
</span>      <span>"item": {
</span>        <span>"date": "",
</span>        <span>"models": [
</span>          <span>"" 
</span>        <span>],
</span>        <span>"units": "",
</span>        <span>"defect": "",
</span>        <span>"consequence": "",
</span>        <span>"corrective": ""
</span>      <span>}
</span>    <span>}
</span>  <span>]
</span><span>}</span>

먼저 DIV 요소에 SVG 객체를 추가하여 ID로 참조합니다. 그런 다음 데이터를 새 차트에 연결하여 SVG에서 렌더링됩니다. 마지막으로, 우리는 수동으로 차트 경계를 부모 div. 내에 올바르게 배치하도록 설정합니다. 우리는 차트의 x 축을 데이터의 메이커 필드로 설정합니다. 제작자가 범주 데이터를 구성하므로 AddCategoryAxis 메소드를 사용합니다. 제작자 이름이 자명하기 때문에 AddOrderRule 메소드를 사용하여 알파벳 순서로 제조업체를 주문하고 X 축 타이틀 (제조업체 였을 것)을 숨 깁니다.

d3<span>.csv("RCL.csv", function (data) {
</span>  <span>// process the data
</span><span>});</span>

.

우리는 차트의 y 축을 데이터의 영향을받는 단위 수의 잠재적 수로 설정했습니다. 우리는 여기에서 addmeasureAxis 메소드를 사용하여 주어진 값의 선형 축을 정의 할 수 있었지만, 제조업체의 승리가 MCI 또는 Thor보다 영향을받는 잠재적 인 단위의 20 배 이상을 가지므로 결과 열은 다른 두 사람을 왜소화했을 것입니다. . 이 경우 로그 척도는 더 작은 값을위한 더 많은 공간을 제공하므로 addlogaxis 방법을 사용하여 기본값이 10에 기본적으로 사용됩니다.

이제 우리는 축을 정의 했으므로 그래픽을 렌더링하기 위해 함께 묶을 수 있습니다. 이를 위해 Dimple.plot.bar를 통해 막대 차트를 선택하고 메이커 데이터 필드에 연결합니다. 두 번째 배열 요소 인 JSON Data는 데이터의 JSON 부분을 각 막대에 묶고 마우스로 막대 위로 마우스를 가져갈 때 올바른 데이터에 액세스 할 수 있습니다.

data <span>= [
</span>  <span>{
</span>    <span>'Record creation date':'20150105',
</span>    <span>'Maker':'MCI',
</span>    <span>'Potential number of units affected':'109',
</span>    <span>'JSON data': '{
</span>      <span>"items":[
</span>        <span>{
</span>          <span>"item": {
</span>            <span>"date":"January, 5 2015",
</span>            <span>"models":[
</span>              <span>"J4500 (years 2013, 2014, 2015) ..."
</span>            <span>],
</span>            <span>"units":"109",
</span>            <span>"defect":"...",
</span>            <span>"consequence":"...",
</span>            <span>"corrective":"..."
</span>          <span>}
</span>        <span>}
</span>      <span>]
</span>    <span>}'
</span>  <span>},
</span>  <span>...
</span><span>];</span>

기본적으로 플롯 장치 (여기서 막대) 위의 마우스와 함께 호버링 할 때 툴팁이 표시되고 축 및 시리즈 데이터를 표시합니다. 우리의 경우 : 메이커 (x 축 값), 잠재적 인 단위 수 (y 축 값) 및 JSON 데이터의 일반 텍스트 값. getToolTipText 함수는 JSON 데이터를 처리하고 다른 div에 측면에 표시하기 위해 여기에 과부하됩니다. 툴팁으로 표시하려는 데이터 배열, 즉 제조업체 이름 (데이터 라인의 첫 번째 집계 필드) 및 영향을받는 장치 수 (Y 축에서 얻은 유닛 수 및 로컬로 지정합니다. 내장 Tolocalestring JavaScript 메소드를 통한 일반 영어 번호 형식). 그러나 JSON 데이터 구문 분석으로 돌아가 봅시다 우리가 액세스하는 두 개의 집계 필드 (Aggfield [0] 및 Aggfield [1])는 이전에 시리즈 ([ "maker", "json data"]로 설정 한 데이터 필드 배열과 일치하고 Aggfield 자체는 속성입니다. 기본 요소 객체의

우리는 jQuery의 parsejson 함수로 JSON 문자열을 구문 분석하고 JSON 객체의 키와 일치하는 전체 길이 제목을 설정 한 다음 JSON 객체를 반복하여 HTML 문자열을 구축하여 ID로 div에 추가합니다. RecallDetails.

<span><span><span><div</span> id<span>="RecallsChart"</span>></span><span><span></div</span>></span>
</span><span><span><span><div</span> id<span>="RecallDetails"</span>></span><span><span></div</span>></span></span>

우리는 마침내 1 초 지연으로 탄성 용이성을 사용하여 미적 전환으로 차트를 그립니다.

드디어 말 했나요? 글쎄, 여기서 우리는 x 축 라벨에 또 다른 미학적 트릭을 추가합니다.

기본적으로 X 축 레이블은 수평으로 작성됩니다. 그러나 그들은 쉽게 겹칠 수 있으므로 대신 수직으로 쓸 것입니다. 이것은 Dimple의 기본 D3 물체에 대한 노출이 편리한 곳입니다. 차트가 그려진 후에 만 ​​변경할 수 있으므로 mychart.draw () 호출 후. 이렇게하려면 먼저 각 레이블 텍스트 또는 각 레이블의 x 축에 연결된 일치하는 SVG 모양을 선택합니다. getBbox () 메소드는 인터페이스 Vglocatable에 속하며 경계 상자를 정의하여 좌표, 높이 및 너비를 노출시키는 svgrect 객체를 반환합니다. 그런 다음 SVG 상자의 회전과 약간의 수직 번역을 수행하여 X 축 선에 더 가깝게합니다. 그리고 여기에 최종 결과가 있습니다 : Codepen의 Sitepoint (@SitePoint)가 2015 년 1 월 펜 차량 리콜을 참조하십시오. 이 펜의 너비는 기사에 맞출 수 있도록 감소되었습니다. 여기에서 원래 코드펜을 볼 수 있습니다

결론 이 기사에서는 데이터 시각화를위한 데이터를 정리하고 준비하는 방법을 보았습니다. 특히 우리가 생각한 최종 결과와 일치하도록 데이터 구조를 정의하는 방법을 보았습니다. 우리는 dimple.js와 d3.js 라이브러리를 모두 사용했으며 jQuery에 대한 제한된 호출 (주로 JSON 프로세싱과 관련). 우리는 Dimple의 툴팁 기능을 과부하시켜 약간의 탐색 적 상호 작용으로 데이터에서 막대 차트를 그렸습니다. 또한 X 축 라벨을 조작하기 위해 기본 D3 객체에 액세스했습니다. 참고로, SVG는 이제 널리 지원되지만 (예 : ModernIZR과 함께) 미리 확인하고 필요한 경우 PNG 이미지와 같은 폴백을 제공하는 것이 좋습니다. 물론 d3.js 및 dimple.js의 조건부 로딩도 고려해야합니다.

데이터 시각화에 더 깊이 빠져들려면 Udacity는 시각화 개념, d3.js 및 dimple.js, 내러티브 구조 및 애니메이션 사용을 다루는 자체 진행중인 MOOC를 제공합니다. 또한 Mike Bostock의 사이트 (D3.JS 제작자)는이 라이브러리의 개념을 이해하려면 완벽한 소스이며 Dimple과 D3는 모두 배울 예제 목록을 제공합니다. JavaScript, DIMPLE 및 D3 자주 묻는 질문 (FAQ) Dimple과 D3를 사용하여 멀티 린도 차트를 만드는 방법? Dimple과 D3을 사용하여 멀티 라인 차트 생성에는 여러 단계가 포함됩니다. 먼저 HTML 파일을 설정하고 D3 및 딤플 라이브러리를 포함해야합니다. 그런 다음 CSV, JSON 또는 TSV와 같은 다양한 형식으로 데이터를로드해야합니다. 데이터가로드되면 새 SVG 객체를 생성하고 치수를 설정할 수 있습니다. 그런 다음 새 딤플 차트를 만들고 축을 지정하고 각 데이터 시리즈의 라인을 추가 할 수 있습니다. 마지막으로, 필요에 따라 차트의 모양을 사용자 정의하고 상호 작용을 추가 할 수 있습니다.

라인 차트의 D3과 딤플 코드의 차이점은 무엇입니까?

D3과 Dimple은 데이터를 작성하는 데 사용되는 JavaScript 라이브러리입니다. 시각화이지만 몇 가지 차이가 ​​있습니다. D3은 많은 유연성과 제어를 제공하는 저수준 라이브러리이지만 복잡하고 장황 할 수 있습니다. 반면, Dimple은 D3 위에 구축되었으며 라인 차트를 포함한 일반적인 유형의 차트를 만드는 프로세스를 단순화하는 더 높은 수준의 API를 제공합니다. 그러나보다 복잡하거나 사용자 정의 시각화를 위해 D3만큼 유연성을 제공하지 않을 수 있습니다.

딤플 차트에 상호 작용을 추가 할 수 있습니까?

딤플 차트에 상호 작용을 추가하면 사용자를 향상시킬 수 있습니다. 추가 통찰력을 경험하고 제공합니다. 사용자가 데이터 포인트를 가리킬 때 더 많은 정보를 표시하는 툴팁을 추가 할 수 있습니다. 클릭 또는 마우스 움직임과 같은 사용자 작업에 응답하는 이벤트 리스너를 추가 할 수도 있습니다. 예를 들어, 사용자가 클릭 할 때 라인을 강조 표시하거나 데이터에 대한 자세한보기를 표시 할 수 있습니다.

딤플 차트의 모양을 사용자 정의하는 방법 Dimple은 몇 가지 옵션을 제공합니다. 차트의 모양을 사용자 정의합니다. 요소의 색상, 글꼴 및 크기를 변경할 수 있습니다. 또한 데이터를 더 잘 표현하기 위해 스케일과 축을 조정할 수 있습니다. 예를 들어, 여러 차례에 걸친 데이터에 대체로 스케일을 사용할 수 있거나 X 축의 레이블을 더 나은 가독성을 위해 회전시킬 수 있습니다.

딤플의 누락 또는 일관성이없는 데이터를 어떻게 처리 할 수 ​​있습니까?

누락 또는 일관성이없는 데이터 처리는 데이터 시각화의 중요한 부분입니다. Dimple은 이러한 데이터를 다루는 몇 가지 방법을 제공합니다. Dimple.filterData () 메소드를 사용하여 원치 않는 값을 필터링하거나 Dimple.AddMeAsureAxis () 메소드를 사용하여 데이터를 집계하고 결 측값을 채울 수 있습니다. D3의 데이터 조작 기능을 사용하여 데이터를 시각화하기 전에 데이터를 정리하고 전처리 할 수 ​​있습니다. Dimple과 D3을 사용하여 막대 차트를 작성하려면 어떻게해야합니까?

Dimple 및 D3으로 막대 차트를 작성하려면 라인 차트를 만드는 것과 비슷한 단계가 필요합니다. 데이터를로드하고 SVG 객체를 만들고 새 딤플 차트를 만들어야합니다. 그러나 선을 추가하는 대신 Dimple.addseries () 메소드를 사용하여 막대를 추가합니다. 또한 막대 모양을 사용자 정의하고 필요에 따라 상호 작용을 추가 할 수 있습니다.

딤플 차트를 이미지 또는 pdf로 내보내는 방법은 무엇입니까?

이미지 또는 pdf 캔으로 딤플 차트를 내보낼 수 있습니다. 데이터 시각화를 공유하거나 제시하는 데 유용합니다. D3의 Node () 메소드를 사용하여 차트의 SVG 요소를 가져온 다음 CANVG 또는 JSPDF와 같은 라이브러리를 사용하여 SVG를 이미지 또는 PDF로 변환 할 수 있습니다. 추가 설정 및 종속성이 필요할 수 있습니다.

딤플 차트를 애니메이션 할 수있는 방법은 무엇입니까?

딤플 차트를 애니메이션하면 데이터 시각화가보다 매력적이고 역동적 일 수 있습니다. D3의 전환 방법을 사용하여 데이터의 변화 또는 차트의 모양을 애니메이션 할 수 있습니다. 예를 들어, 데이터가 변경 될 때 한 상태에서 다른 상태로 부드럽게 전환하기 위해 라인 차트의 라인을 애니메이션 할 수 있습니다.

DIMPLE 및 D3을 사용하여 산점도를 생성 할 수 있습니까?

생성 Dimple과 D3이있는 산포도에는 라인 또는 막대 차트를 작성하는 것과 유사한 단계가 포함됩니다. 데이터를로드하고 SVG 객체를 만들고 새 딤플 차트를 만들어야합니다. 그러나 선이나 막대를 추가하는 대신 Dimple.addseries () 메소드를 사용하여 점을 추가합니다. 또한 점의 모양을 사용자 정의하고 필요에 따라 상호 작용을 추가 할 수 있습니다.

Dimple 및 D3을 사용하여 원형 차트를 만들 수 있습니까?

DIMPLE과 D3을 사용하여 파이 차트를 작성하면 유사한 단계가 포함됩니다. 다른 유형의 차트 생성에. 데이터를로드하고 SVG 객체를 만들고 새 딤플 차트를 만들어야합니다. 그러나 선, 막대 또는 점을 추가하는 대신 Dimple.addseries () 메소드를 사용하여 파이를 추가합니다. 또한 파이의 모양을 사용자 정의하고 필요에 따라 상호 작용을 추가 할 수 있습니다.

위 내용은 Dimple과 D3을 사용하여 JavaScript에서 데이터 시각화를 만듭니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!