최신 JavaScript 및 D3을 통한 대화식 데이터 시각화

이 기사에서는 최근에 제작 한 예제 프로젝트를 통해 D3 라이브러리를 사용하여 완전히 독창적으로 시각화 유형의 시각화 유형을 살펴보고 싶습니다.이 구성 요소는 D3를 만드는 방법을 보여줍니다. 배울 수있는 훌륭한 도서관.

D3는 데이터 중심 문서를 나타냅니다. 모든 종류의 훌륭한 데이터 시각화 및 차트를 만드는 데 사용할 수있는 JavaScript 라이브러리입니다. 뉴욕 타임즈 (New York Times)의 멋진 대화식 이야기를 본 적이 있다면 이미 D3가 실제로 작동하는 것을 보게 될 것입니다. 여기 D3로 구축 된 훌륭한 프로젝트의 멋진 예를 볼 수 있습니다. 학습 곡선은 라이브러리를 시작하기에 매우 가파르고 있습니다. D3에는 이전에는 보지 못했던 특별한 몇 가지 특별한 특징이 있기 때문입니다. 그러나 D3를 충분히 배울 수있는 첫 번째 단계를 지나서 위험 할 수 있다면 곧 스스로 멋진 물건을 만들 수 있습니다. .

다른 라이브러리에서 D3가 눈에 띄게 만드는 세 가지 주요 요소가 있습니다.

1. 유연성. D3을 사용하면 모든 종류의 데이터를 가져 와서 브라우저 창의 모양과 직접 연결할 수 있습니다. 이 데이터는 절대적으로 가 될 수 있으며, 완전히 독창적 인 시각화를 만들기 위해 다양한 흥미로운 사용 사례가 가능합니다. 우아함. 업데이트간에 부드러운 전환
가있는 대화식 요소를 쉽게 추가 할 수 있습니다. 도서관은
2. 가 아름답게 작성되었으며, 구문의 중단을 얻으면 코드를 깨끗하고 깔끔하게 유지하기가 쉽습니다. . 커뮤니티. D3을 이미 사용하는 환상적인 개발자의 광대 한 생태계가 있으며, 그는 온라인으로 코드를 쉽게 공유합니다. bl.ocks.org 및 blockbuilder.org와 같은 사이트를 사용하여 다른 사람들의 사전 작성된 코드를 신속하게 찾아이 스 니펫을 자신의 프로젝트에 직접 복사 할 수 있습니다. . 키 테이크 아웃
데이터 중심 문서에 상관없는 d3은 New York Times와 같은 플랫폼에서 광범위한 사용에 의해 입증 된 바와 같이, 다양한 대화식 데이터 시각화를 만들기위한 강력한 JavaScript 라이브러리입니다. 도서관은 비교할 수없는 유연성을 제공하여 개발자가 브라우저에서 직접 그래픽 표현에 모든 유형의 데이터를 바인딩하여 시각화 설계에서 창의성을 조성 할 수 있습니다. d3은 부드러운 전환으로 대화식 및 동적 요소를 추가하여 우아한 프로그래밍 및 구문을 통해 시각적 경험과 사용자 참여를 향상시키는 데 탁월합니다. 강력한 개발자 커뮤니티는 D3을 지원하며, 학습 및 프로젝트 개발을 위해 활용할 수있는 bl.ocks.org와 같은 플랫폼에 대한 풍부한 공유 코드 및 예제를 제공합니다. 튜토리얼은 D3의 기능을 활용하여 데이터를 동적으로 조작하고 제시하여 실제 데이터 값을 기반으로 파이 차트 반경과 같은 시각적 요소를 조정하기 위해 소득 분포의 혁신적인 시각화를 제작하는 것을 자세히 설명합니다.
3. . 프로젝트는 기존 코드를 차용하고 적응함으로써 반복적으로 개발되어 D3의 적응력과 코딩에서 커뮤니티의 중요성을 보여주기 전에 동적 및 대화식 향상으로 이동했습니다. 최종 대화식 시각화에는 재생/일시 정지 버튼 및 연도를위한 슬라이더와 같은 기능이 포함되어 D3가 데이터 시각화를 사용하여 유익 할뿐만 아니라 매력적인 방법을 설명합니다.

프로젝트 대학의 경제학 전공 인 저는 항상 소득 불평등에 관심이있었습니다. 나는 그 주제에 대해 몇 개의 수업을 들었고, 그것은 그것이 있어야하는 정도까지 완전히 이해되지 않은 것으로 나를 때렸다.

. 나는 Google의 공개 데이터 탐색기를 사용하여 소득 불평등을 탐색하기 시작했습니다.…

인플레이션을 조정할 때, 가계 소득은 사회의 최하위 40%에 대해

가 거의 일정하게 유지되었지만, 직원 당 생산성은 급등했습니다. 실제로 는 더 많은 혜택을 거두었습니다 (그리고 그 괄호 안에서 상위 5%를 보면 차이가 훨씬 더 충격적입니다). . 여기에 설득력있는 방식으로 가고 싶다는 메시지가 있었는데, 이는 D3.JS를 사용할 수있는 완벽한 기회를 제공했기 때문에 몇 가지 아이디어를 스케치하기 시작했습니다. . 스케치 우리는 D3과 함께 일하고 있기 때문에 절대적으로 를 스케치하기 시작할 수 있습니다. 간단한 라인 그래프, 막대 차트 또는 버블 차트를 만드는 것이 쉬웠지만 다른 것을 만들고 싶었습니다.

나는 사람들이 불평등에 대한 우려에 대한 반론으로 사용하는 경향이있는 가장 일반적인 비유는“파이가 커지면 돌아 다닐 것이 더 많다”는 것입니다. 직관은 GDP의 총 점유율이 크게 증가한다면 일부 사람들이 파이의

얇은 슬라이스

를 얻는 경우에도 여전히

더 나은

. 그러나 우리가 볼 수 있듯이, 파이가 더 커지는 것은

및 가 사람들이 전반적으로 덜 얻는 것이 가능합니다. . 이 데이터를 시각화하기위한 첫 번째 아이디어는 다음과 같습니다.

아이디어는 우리 가이 맥동 파이 차트를 가지고 있다는 것입니다. 각 슬라이스는 미국 소득 분배의 5 분의 1을 나타냅니다. 각 파이 슬라이스의 면적은 인구의 세그먼트가 취하는 소득의 양과 관련이 있으며, 차트의 총 면적은 총 GDP를 나타냅니다. 그러나 나는 곧 약간의 문제를 발견했다. 인간의 뇌는 다른 영역의 크기를 구별 할 때 예외적으로 가난하다는 것이 밝혀졌습니다. 내가 이것을 더 구체적으로 매핑했을 때, 메시지는 그랬던 것만 큼 분명하지 않았다 : . 여기에서, 그것은 실제로 가장 가난한 미국인들이 시간이 지남에 따라 더 부유 한 를 받고있는 것처럼 보이며, 이는 직관적으로 진실한 것으로 보인다. 나는이 문제에 대해 좀 더 생각했고, 내 솔루션은 각 아크의 각도를 일정하게 유지하고 각 아크의 반경이 동적으로 바뀌면서 포함되었습니다.

실제로 이것이 실제로 어떻게 끝났는지
나는이 이미지가 여전히 여기에 그 효과를 과소 평가하는 경향이 있음을 지적하고 싶습니다. 간단한 막대 차트를 사용하면 효과가 더 분명했을 것입니다 :



그러나 그러나, 나는 독특한 시각화를하기 위해 최선을 다하고 있었고, pie

가 더 큰 를 얻을 수 있다는이 메시지를 집에 망치고 싶었습니다. 그것의 더 작은 가 발생할 수 있습니다. 이제 내 생각을 가지고 있었으므로 이제 D3로 구축 할 시간이었습니다. 차용 코드 <that> 그래서, 이제 내가 무엇을 만들겠습니까? 이제이 프로젝트의 실제 고기에 들어가서 <em>를 작성해야합니다. <that> 당신은 처음 몇 줄의 코드를 처음부터 작성하는 것으로 시작한다고 생각할 수도 있지만 잘못 될 것입니다. 이것은 D3이며 D3과 함께 일하기 때문에 항상 커뮤니티에서 사전 작성된 코드를 찾을 수 있습니다. <completely> 우리는 완전히 새로운 것을 만들고 있지만 일반 파이 차트와 공통점이 많기 때문에 bl.ocks.org를 간단히 살펴 보았고 Mike Bostock 의이 클래식 구현으로 가기로 결정했습니다. D3의 제작자 중 하나. 이 파일은 이미 수천 번 복사되었을 것입니다. 글을 쓴 사람은 JavaScript를 가진 실제 마법사이므로 이미 멋진 코드 블록으로 시작하고 있는지 확인할 수 있습니다. </completely></that></em>. 이 파일은 D3 V3로 작성되었으며, 버전 5가 지난 달에 마침내 출시되었으므로 현재 두 가지 버전입니다. D3 v4의 큰 변화는 라이브러리가 평평한 네임 스페이스를 사용하여 전환하여 d3.scale.ordinal ()과 같은 스케일 기능이 대신 d3.scaleordinal ()처럼 쓰여진다는 것입니다. 버전 5에서 가장 큰 변화는 데이터 로딩 기능이 이제 약속으로 구성되어 여러 데이터 세트를 한 번에 쉽게 처리 할 수 ​​있다는 것입니다. 혼란을 피하기 위해 이미 BlockBuilder.org에서 저장 한이 코드의 업데이트 된 v5 버전을 만드는 데 어려움을 겪었습니다. 또한 ES5 익명 함수를 화살표 함수로 전환하는 것과 같은 ES6 컨벤션에 맞게 구문을 변환했습니다. <we> 우리가 이미 시작한 내용은 다음과 같습니다 <em> </em> 그런 다음이 파일을 작업 디렉토리에 복사하여 내 컴퓨터의 모든 것을 복제 할 수 있는지 확인했습니다. 이 튜토리얼을 직접 따르고 싶다면 Github Repo 에서이 프로젝트를 복제 할 수 있습니다. 파일 Starter.html에서 코드로 시작할 수 있습니다. 이 코드를 실행하려면 서버 (예 :이 코드와 같은)가 필요합니다. 후드 아래에서 데이터를 검색하기 위해 Fetch API에 의존하는 것처럼. <you>이 코드가 어떻게 작동하는지에 대한 간단한 요약을 알려 드리겠습니다. </you></we></that>

우리 코드를 걷는다 <we> 먼저 파일 상단에 몇 가지 상수를 선언하고 있으며, 이는 파이 차트의 크기를 정의하는 데 사용할 것입니다. <h2> <code> 이것은 코드를 더 크거나 작게 만들고 싶다면 여기에서 이러한 값을 바로 변경하는 것에 대해 걱정하면됩니다. .다음으로 SVG 캔버스를 화면에 추가하고 있습니다. SVG에 대해 잘 모른다면 캔버스를 페이지의 공간으로 생각할 수 있습니다. 이 영역 밖에서 SVG를 그려 보려고한다면 화면에 단순히 나타나지 않습니다.

우리는 d3.select ()를 호출하여 차트 영역의 ID와 함께 빈 DIV를 잡고 있습니다. 또한 d3.append () 메소드와 함께 SVG 캔버스를 첨부하고 있으며 d3.attr () 메소드를 사용하여 너비와 높이에 대한 몇 차원을 설정하고 있습니다. 우리는 또한 SVG 그룹 요소를이 캔버스에 첨부하고 있습니다.이 캔버스는 요소를 함께 구조화하는 데 사용할 수있는 특수 유형의 요소입니다. 이를 통해 그룹 요소의 변환 속성을 사용하여 전체 시각화를 화면 중앙으로 전환 할 수 있습니다. 그 후, 우리는 파이의 모든 조각에 새로운 색상을 할당하는 데 사용할 기본 스케일을 설정하고 있습니다.

다음으로, 우리는 d3의 파이 레이아웃을 설정하는 몇 줄이 있습니다 :

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

D3에서 레이아웃은 데이터 세트를 호출 할 수있는 특수 함수입니다. 레이아웃 함수는 특정 형식의 데이터 배열을 가져오고 자동으로 생성 된 값으로 변환 된 배열

를 뱉어 내면. 그런 다음 아크를 그리는 데 사용할 수있는 경로 생성기를 정의해야합니다. Path Generator를 사용하면 웹 브라우저에서 Path SVG를 그릴 수 있습니다. D3이 실제로하는 모든 일은 화면의 모양과 데이터를 연결하는 것이지만이 경우 단순한 원이나 사각형보다 더 복잡한 모양을 정의하려고합니다. Path SVGS는 선을 그려야 할 경로를 정의하여 작동하며, D 속성으로 정의 할 수 있습니다. 다음은 다음과 같습니다

D 속성에는 브라우저가 원하는 경로를 그릴 수있는 특수 인코딩이 포함되어 있습니다. 이 문자열의 의미를 정말로 알고 싶다면 MDN의 SVG 문서에서 찾을 수 있습니다. D3의 프로그래밍을 위해, 우리는이 특수 인코딩에 대해 아무것도 알 필요가 없습니다. 우리는 우리를 위해 우리의 d 속성을 뱉어내는 생성기가 있기 때문에 간단한 매개 변수로 초기화해야합니다.

. 아크의 경우, 우리는 경로 생성기를 픽셀로 내부 라디 우스와 외부 값을 제공해야하며, 생성기는 우리를위한 각 각도를 계산하는 복잡한 수학을 분류 할 것입니다 :

.

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

차트의 경우, 우리는 표준 파이 차트를 제공하는 Innerradius에 0의 값을 사용하고 있습니다. 그러나 대신 도넛 차트를 그리려면 Outerradius 값보다 작은 값을 연결하는 것입니다. 몇 가지 함수 선언 후 D3.json () 함수를 사용하여 데이터에로드하고 있습니다.

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

D3 버전 5.x에서 D3.json ()에 대한 호출은 약속을 반환합니다. 즉, D3은 우리가 제공하는 상대적인 경로에서 찾은 JSON 파일의 내용을 가져오고 그 기능을 실행합니다. 우리는 당시 () 메소드가로드 된 후에 호출합니다. 그런 다음 콜백의 데이터 인수에서보고있는 객체에 액세스 할 수 있습니다.

. 우리는 또한 기능 참조를 여기에 전달하고 있습니다 - 유형 -로드하는 모든 값을 숫자로 변환 할 것입니다. 나중에 작업 할 수 있습니다.

Console.log (data)를 추가하는 경우; D3.JSON 콜백 맨 위에 진술하면 현재 작업중인 데이터를 살펴볼 수 있습니다.

우리의 데이터는 각각 사과와 오렌지에 대한 데이터를 나타내는 두 개의 다른 배열로 나뉩니다. 이 줄을 사용하면 라디오 버튼 중 하나가 클릭 될 때마다보고있는 데이터를 전환 할 것입니다.

우리는 또한 시각화의 첫 번째 실행에서 Update () 함수를 호출하여 초기 값 (“사과”배열 포함)을 전달해야합니다.

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

update () 함수가 수행하는 작업을 살펴 ​​보겠습니다. D3을 처음 접한다면 D3의 가장 어려운 부분 중 하나이기 때문에 혼란을 유발할 수 있습니다.…

첫째, 우리는 값에 대한 기본 함수 매개 변수를 사용하고 있습니다. 우리가 update () 함수에 인수를 전달하는 경우 (처음으로 실행할 때) 해당 문자열을 사용할 것입니다. 그렇지 않으면 클릭 이벤트에서 원하는 값을 얻을 수 있습니다. 우리의 무선 입력. 그런 다음 아크의 동작을 처리하기 위해 D3에서

일반 업데이트 패턴을 사용합니다. 일반적으로 데이터 결합을 수행하고, 오래된 요소를 종료하고, 화면의 기존 요소를 업데이트하고, 데이터에 추가 된 새로운 요소를 추가하는 것이 포함됩니다. 이 예에서는 항상 화면에 같은 수의 파이 조각을 가지고 있기 때문에 요소 종료에 대해 걱정할 필요가 없습니다.

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

. 먼저, 데이터 조인이 있습니다 :

시각화가 업데이트 될 때마다 화면의 SVGS와 새로운 데이터 배열을 연관시킵니다. 우리는 데이터 ( "사과"또는 "오렌지"의 배열)를 Pie () 레이아웃 함수로 전달하여 일부 시작 및 엔드 각도를 계산하는데, 이는 아크를 그리는 데 사용할 수 있습니다. 이 경로 변수는 이제 화면에있는 모든 아크의 특수

가상 선택

를 포함합니다. 다음으로, 우리는 데이터 배열에 여전히 존재하는 화면의 모든 SVG를 업데이트하고 있습니다. 우리는 여기에 D3 라이브러리의 환상적인 기능인 전환을 추가하고 있습니다.

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

우리는 d3.transition () 호출에서 attrtween () 메소드를 사용하여 D3가 각 아크의 위치를 ​​업데이트하는 데 사용해야하는 사용자 정의 전환을 정의합니다 (D 속성으로 전환). 대부분의 속성에 전환을 추가하려는 경우이 작업을 수행 할 필요는 없지만 다른 경로 사이의 전환을 위해이를 수행해야합니다. D3은 사용자 정의 경로 사이를 전환하는 방법을 실제로 알 수 없으므로 Arctween () 함수를 사용하여 D3가 매 순간마다 각 경로를 어떻게 그려야하는지 알 수 있습니다.

. 이 함수는 다음과 같습니다

우리는 여기에서 d3.interpolate ()를 사용하여 인터 폴자라고하는 것을 만듭니다. 0과 1 사이의 값으로 i 변수에 저장하는 함수를 호출하면 this._current 사이의 값과 a. 이 경우 this._current는 우리가보고있는 파이 슬라이스의 시작 및 엔드 각도를 포함하는 객체이며 A는 업데이트하는 새로운 데이터 포인트를 나타냅니다. 우리가 보간기를 설정 한 후에는 우리는 끝에 가질 값 (i (a))를 포함하도록 this._current 값을 업데이트하고 계산할 함수를 반환하고 있습니다. 이 t 값에 따라 우리의 아크가 포함 해야하는 경로. 우리의 전환은 시계의 모든 진드기 에서이 기능을 실행할 것이며 (0과 1 사이의 인수를 전달 함),이 코드는 우리의 전환이 어느 시점에서 어느 시점에서 우리의 아크를 그려야하는지 알게 될 것임을 의미합니다.

. 마지막으로, update () 함수는 이전 데이터 배열에 있지 않은 새로운 요소를 추가해야합니다.

이 코드 블록은이 업데이트 기능이 처음 실행되는 각 아크의 초기 위치를 설정합니다. Enter () 메소드는 화면에 추가 해야하는 데이터의 모든 요소를 ​​제공 한 다음 각 요소를 Att () 메소드로 고리하여 각 각각의 충전 및 위치를 설정할 수 있습니다. 아크. 우리는 또한 각 아크에 흰색 테두리를주고 있으며, 이는 차트가 약간 깔끔해 보입니다. 마지막으로, 우리는이 각 호의 데이터를 데이터의 항목의 초기 값으로 설정하는데, 이는 Arctween () 함수에서 사용하는 데이터의 초기 값으로 설정하고 있습니다. <you> D3에서 상당히 발전된 주제이므로 이것이 어떻게 작동하는지 정확히 따를 수 없다고 걱정하지 마십시오. 이 도서관의 가장 큰 장점은 강력한 내용을 만들기 위해 모든 내부 작업을 알 필요가 없다는 것입니다. 변경해야 할 비트를 이해할 수있는 한 완전히 필수적이지 않은 세부 사항을 추상화하는 것은 좋습니다. <us> 그 과정의 다음 단계로 우리를 데려옵니다… <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;const svg = d3.select(&quot;#chart-area&quot;) &lt;/span&gt; &lt;span&gt;.append(&quot;svg&quot;) &lt;/span&gt; &lt;span&gt;.attr(&quot;width&quot;, width) &lt;/span&gt; &lt;span&gt;.attr(&quot;height&quot;, height) &lt;/span&gt; &lt;span&gt;.append(&quot;g&quot;) &lt;/span&gt; &lt;span&gt;.attr(&quot;transform&quot;, &lt;span&gt;`translate(&lt;span&gt;${width / 2}&lt;/span&gt;, &lt;span&gt;${height / 2}&lt;/span&gt;)`&lt;/span&gt;); &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <code code> 코드 적응 <have> 이제 우리는 지역 환경에 코드가 있었고 그것이 무엇을하고 있는지 이해하기 때문에 우리가보고있는 데이터를 전환하여 관심있는 데이터와 함께 작동하도록합니다. . <data> 프로젝트의 데이터/ 폴더에서 작업 할 데이터를 포함 시켰습니다. 이 새로운 incomes.csv 파일은 이번에는 CSV 형식이므로 (Microsoft Excel을 사용하여 열 수있는 파일의 종류) D3.JSON 대신 D3.CSV () 함수를 사용하겠습니다. ) 함수 : <p> </p> 이 기능은 기본적으로 d3.json ()과 동일합니다. 데이터를 사용할 수있는 형식으로 변환합니다. 또한 유형 () 이니셜 라이저 기능을 두 번째 인수로 제거하고 있습니다. 왜냐하면 그것은 우리의 기존 데이터에만 해당 되었기 때문입니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;const width = 540; &lt;/span&gt;&lt;span&gt;const height = 540; &lt;/span&gt;&lt;span&gt;const radius = Math.min(width, height) / 2; &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div>. <a> d3.csv 콜백의 상단에 console.log (data) 명령문을 추가하면 다음과 같이 작업중인 데이터의 모양을 볼 수 있습니다. <p> <arr> 우리는 50 개의 항목 배열이 있으며, 각 항목은 데이터에서 1 년을 나타냅니다. 매년, 우리는 5 개의 소득 그룹 각각에 대한 데이터와 다른 몇 가지 분야의 데이터와 함께 객체를 가지고 있습니다. 이 몇 년 동안 파이 차트를 만들 수 있지만 먼저 데이터 주위를 약간 섞어 올바른 형식이되도록해야합니다. D3와 함께 데이터 조인을 작성하려면 각 항목이 SVG에 연결되는 배열로 전달해야합니다. <in> 마지막 예에서는 화면에 표시하고 싶은 모든 파이 슬라이스에 대한 항목이있는 배열이 있음을 기억하십시오. 이것을 현재 우리가 가지고있는 것과 비교하십시오. 이것은 우리가 그릴 각 파이 슬라이스를 나타내는 1 ~ 5의 키를 가진 객체입니다. </in></arr></p>. 이 문제를 해결하려면 이전에 가지고 있던 type () 함수를 대체하기 위해 readata ()라는 새 함수를 추가하여 데이터의 모든 항목을로드 할 때 반복 할 것입니다. <p> 매년이 함수는 값 배열이있는 객체를 반환하고 데이터 조인에 전달됩니다. 우리는 이러한 각 값을 이름 필드로 라벨링하고 있으며 이미 가지고있는 소득 가치에 따라 수치 가치를 제공하고 있습니다. 우리는 또한 비교를 위해 매년 평균 소득을 추적하고 있습니다. </p> 이 시점에서 우리는 다음과 같이 작업 할 수있는 형식의 데이터를 가지고 있습니다. <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;const svg = d3.select(&quot;#chart-area&quot;) &lt;/span&gt; &lt;span&gt;.append(&quot;svg&quot;) &lt;/span&gt; &lt;span&gt;.attr(&quot;width&quot;, width) &lt;/span&gt; &lt;span&gt;.attr(&quot;height&quot;, height) &lt;/span&gt; &lt;span&gt;.append(&quot;g&quot;) &lt;/span&gt; &lt;span&gt;.attr(&quot;transform&quot;, &lt;span&gt;`translate(&lt;span&gt;${width / 2}&lt;/span&gt;, &lt;span&gt;${height / 2}&lt;/span&gt;)`&lt;/span&gt;); &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <off> 데이터에서 첫 해에 차트를 생성하여 시작하겠습니다. 그런 다음 나머지 몇 년 동안 업데이트 할까 걱정됩니다. <p>. 현재, 우리의 데이터는 2015 년에 시작하여 1967 년에 종료되므로 다른 일을하기 전에이 배열을 반전시켜야합니다. </p> <normal> 일반 파이 차트와 달리 그래프의 경우 각 아크 각도를 고정하고 시각화 업데이트로 반경을 변경하려고합니다. 이렇게하려면 파이 레이아웃에서 값 () 메소드를 변경하여 각 파이 슬라이스가 항상 동일한 각도를 얻도록합니다.<div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;span&gt;const width = 540; &lt;/span&gt;&lt;span&gt;const height = 540; &lt;/span&gt;&lt;span&gt;const radius = Math.min(width, height) / 2; &lt;/span&gt;</pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div> <ll> 다음은 시각화가 업데이트 될 때마다 반경을 업데이트해야합니다. 이를 위해서는 사용할 수있는 규모를 제시해야합니다. 스케일은 D3의 함수로서 두 값 사이에서 를 가져 오는 기능입니다. 범위로. 우리가 사용할 규모는 다음과 같습니다 <em> <this> 우리는 데이터에 액세스 하자마자이 척도를 추가하고 있으며, 우리의 입력은 지난해 가장 부유 한 그룹의 수입 인 데이터 세트에서 0에서 가장 큰 데이터 세트 사이에 있어야한다고 말하고 있습니다. 우리의 데이터에서 (데이터 [49] .Values ​​[4] .Value). 도메인의 경우 출력 값이. <an> 이것은 0의 입력이 우리에게 픽셀 값을 제공해야하며, 데이터에서 가장 큰 값의 입력은 우리에게 너비 또는 높이의 절반의 값을 제공해야한다는 것을 의미합니다. > 우리는 여기에서 </an></this></em> 제곱 루트 스케일 <em>를 사용하고 있음을 알 수 있습니다. 우리 가이 작업을 수행하는 이유는 파이 슬라이스의 영역이 반경이 아닌 각 그룹의 소득에 비례하기를 원하기 때문입니다. area = πr </em> 2 이므로이를 설명하기 위해 제곱근 스케일을 사용해야합니다. <use> 그런 다음이 척도를 사용하여 update () 함수 내에서 아크 생성기의 외부 값을 업데이트 할 수 있습니다. </use></ll></normal></off></a></data></have>

데이터가 변경 될 때마다 각 호에 사용하려는 반경 값을 편집합니다. 우리는 또한 처음에 아크 생성기를 설정할 때 Outerradius에 대한 호출을 제거해야합니다.

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

마지막으로, 우리는이 update () 함수를 몇 가지 편집하여 새로운 데이터와 일치하도록해야합니다.

우리는 더 이상 라디오 버튼을 사용하지 않을 것이기 때문에, 나는 다음을 통과하여 다음과 같이 사용하고자합니다.

마지막으로, 양식 입력을 위해 설정 한 이벤트 리스너를 제거하겠습니다. 모든 것이 계획을 세웠다면, 우리는 데이터의 첫 해에 아름다운 차트를 가져야합니다.

역동적 인 다음 단계는 다른 해에 시각화주기를 가져 와서 시간이 지남에 따라 소득이 어떻게 변했는지를 보여주는 것입니다. JavaScript의 setInterval () 함수에 호출을 추가하여이를 수행합니다.이 코드는 반복적으로 일부 코드를 실행하는 데 사용할 수 있습니다.

우리는이 시간에 타이머를 설정하고 200ms 마다이 코드는 step () 함수를 실행하여 내년 데이터로 차트를 업데이트하고 타이머를 1 씩 증가시킬 것입니다. 타이머 인 경우 타이머를 증가시킵니다. 49의 값 (데이터에서 작년)이되면 자체적으로 재설정됩니다. 이것은 이제 우리에게 지속적으로 실행되는 멋진 루프를 제공합니다 :

물건을 좀 더 유용하게 만듭니다. 또한 원시 인물을 제공하는 몇 가지 레이블을 추가하겠습니다. 파일 본문의 모든 HTML 코드를 다음과 같이 바꾸겠습니다.

우리는 Bootstrap의 그리드 시스템을 사용하여 페이지를 구성하고 있습니다.이 시스템은 페이지 요소를 상자로 깔끔하게 포맷 할 수 있습니다. 그런 다음 데이터가 변경 될 때마다 jQuery 로이 모든 것을 업데이트합니다.

또한 파일 상단의 CSS를 몇 번 편집 할 것입니다. 이는 각각의 호에 대한 전설을 제공하고 제목을 중심으로 할 것입니다.

우리가 끝내는 것은 다소 제시 할 수있는 것입니다 :

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

여기에서 시간이 지남에 따라 이러한 아크가 어떻게 바뀌 었는지 알기가 매우 어렵 기 때문에 데이터의 첫 해에 소득 분포가 어떻게 보이는지 보여주기 위해 일부 그리드 라인을 추가하고 싶습니다.

는 D3의 일반적인

일반 업데이트 패턴

로 다시 (join/exit/update/enter)와 함께 갈 수 있었지만 array.foreach () 메소드를 사용하고 있습니다. 또한 미국의 평균 소득을 보여주기 위해 라인을 추가하고 싶습니다. 매년 업데이트 할 것입니다. 먼저 평균 선을 처음으로 추가하겠습니다.

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

그런 다음 연도가 변경 될 때마다 업데이트 () 함수가 끝날 때이 작업을 업데이트하겠습니다.

나는 우리가 이후 에이 각 원을 추가하는 것이 중요하다는 점에 주목해야합니다. 우리의 아크 경로 (SVG 층은 z-index가 아닌 화면에 추가 된 순서에 의해 결정됩니다). 이 시점에서 우리는 좀 더 명확하게 작업하는 데이터를 전달하는 것이 있습니다.

<span>const color = d3.scaleOrdinal(["#66c2a5", "#fc8d62", "#8da0cb","#e78ac3", "#a6d854", "#ffd92f"]);
</span>

대화식 마지막 단계로서, 우리는 사용자가 특정 연도를 파헤칠 수 있도록 일부 컨트롤을 추가하기를 원합니다. play/pause 버튼을 추가하고 1 년 슬라이더를 추가하여 사용자가 특정 날짜를 선택할 수 있도록합니다.

. 여기 화면 에이 요소를 추가하는 데 사용할 HTML이 있습니다.

우리는 우리가 찾고있는 동작을 엔지니어링하기 위해이 두 요소에 이벤트 청취자를 추가해야합니다. 먼저, play/pause 버튼의 동작을 정의하고 싶습니다. 버튼으로 타이머를 중지하고 시작할 수 있도록 이전 간격에 대해 쓴 코드를 교체해야합니다. 시각화가 "일시 중지 된"상태에서 시작 하고이 버튼을 눌러 물건을 시작해야한다고 가정합니다.

.

<span>const width = 540;
</span><span>const height = 540;
</span><span>const radius = Math.min(width, height) / 2;
</span>

버튼을 클릭 할 때마다 버튼이 "재생"버튼인지 또는 "일시 정지"버튼인지에 따라 다른 동작을 정의 할 것입니다. 클릭하는 버튼에 "Play"라고 표시되면 버튼을 "일시 정지"버튼으로 변경하고 간격 루프를 시작합니다. 또는 버튼이 "일시 정지"버튼 인 경우 텍스트를 "재생"하도록 변경하고 ClearInterval () 함수를 사용하여 루프가 실행되는 것을 중지합니다. 슬라이더의 경우 jQuery UI 라이브러리와 함께 제공되는 슬라이더를 사용하고 싶습니다. 나는 이것을 HTML에 포함시키고 있으며 화면에 이것을 추가하기 위해 몇 줄을 쓸 것입니다.

여기에서는 슬라이드 옵션을 사용하여 이벤트 리스너를 슬라이더에 첨부합니다. 슬라이더가 다른 값으로 이동할 때마다 타이머를이 새로운 값으로 업데이트하고 있으며 그 해에 데이터에서 update () 기능을 실행하고 있습니다. 우리는 업데이트 () 함수의 끝 에서이 줄을 추가하여 슬라이더가 루프가 실행될 때 올해 연도로 이동할 수 있습니다 :

또한 데이터의 현재 연도를 기준으로 레이블의 값을 조정할 수있는 updatehtml () 함수 (시각화가 변경 될 때마다 실행됨)에 라인을 추가합니다.

나는 CSS에 몇 줄을 더 던져서 모든 것이 조금 깔끔하게 보이게 할 것입니다 :

<span>const svg = d3.select("#chart-area")
</span>  <span>.append("svg")
</span>    <span>.attr("width", width)
</span>    <span>.attr("height", height)
</span>  <span>.append("g")
</span>    <span>.attr("transform", <span>`translate(<span>${width / 2}</span>, <span>${height / 2}</span>)`</span>);
</span>

그리고 거기에 우리는 완제품 - 완제품 - 완전히 작동하는 대화식 데이터 시각화를 가지고 있으며 모든 것이 예상대로 작동합니다.

희망적으로,이 튜토리얼은 D3의 실제 힘을 보여 주었고, 상상할 수있는 모든 것을 만들 수 있습니다. D3를 처음부터 시작하는 것은 항상 어려운 과정이지만 보상은 그만한 가치가 있습니다. 자신의 사용자 정의 시각화를 만드는 방법을 배우려면 다음은 도움이 될 수있는 몇 가지 온라인 리소스가 있습니다.

itepoint의 d3.js 컨텐츠에 대한 개요 D3 홈페이지의 도서관 소개. 이것은 가장 기본적인 명령 중 일부를 통해 실행되며 D3에서 처음 몇 단계를 만드는 방법을 보여줍니다. D3의 제작자 인 Mike Bostock의 "막대 차트를 만들어 보자"는 초보자가 라이브러리에서 가장 간단한 그래프 중 하나를 만드는 방법을 보여주는 초보자. Elijah Meeks ($ 35)의 d3.js는 많은 세부 사항으로 들어가는 견고한 입문 교과서입니다. D3의 슬랙 채널은 신규 이민자들에게 D3에 매우 환영합니다. 또한 훌륭한 자원 모음이있는 "학습 자료"섹션도 있습니다.
• 이 온라인 Udemy 코스 ($ 20). 일련의 비디오 강의에서 도서관의 모든 것을 다루는 것. 이것은 JavaScript 개발자를 대상으로하며 4 개의 멋진 프로젝트를 포함합니다.
Bl.ocks.org 및 blockbuilder.org에서 제공되는 다수의 예제 시각화. D3 API 참조는 D3가 제공하는 모든 것에 대한 철저한 기술적 설명을 제공합니다.
• 그리고 잊지 마십시오. 기사에서 사용중인 완성 된 코드 버전을보고 싶다면 Github Repo에서 찾을 수 있습니다. JavaScript 및 d3 를 사용한 대화식 데이터 시각화에 대한 자주 묻는 질문 (FAQ) 대화식 데이터 시각화에서 D3의 중요성은 무엇입니까?
D3는 데이터 시각화를 위해 다른 JavaScript 라이브러리와 어떻게 다릅니 까? 다른 라이브러리에서는 불가능한 데이터 시각화를 생성 할 수있는 유연성을 제공하기 때문에 고유합니다. DOM을 직접 조작 할 수 있으므로 시각화의 최종 모양을 완전히 제어 할 수 있습니다. D3은 또한 선언적 접근법을 사용합니다. 즉, 최종 결과를 원하는 것을 정의하고 D3은 도착하는 방법을 알아냅니다.
• 큰 데이터 세트에 d3을 사용할 수 있습니까?
. 예, D3은 크고 복잡한 데이터 세트를 처리 할 수 ​​있습니다. 모든 형식의 데이터로 작업 할 수있는 강력한 데이터 조작 기능이 있습니다. D3은 또한 다른 소스에서 데이터를로드하기위한 내장 기능이있어 기존 데이터 인프라와 쉽게 통합 할 수 있습니다. D3 시각화를 대화식으로 만드는 방법은 무엇입니까?

d3는 시각화에 상호 작용을 추가하는 몇 가지 방법을 제공합니다. 이벤트 리스너를 사용하여 클릭 또는 마우스 움직임과 같은 사용자 작업에 응답 할 수 있으며 데이터의 변화에 ​​전환을 사용할 수 있습니다. D3은 또한 축소 및 패닝을 지원합니다. 이는 대형 데이터 세트를 탐색하는 데 유용 할 수 있습니다.

D3의 일반적인 사용 사례는 무엇입니까?

D3은 저널리즘에서부터 광범위한 필드에서 사용됩니다. 비즈니스에 대한 과학. 일부 일반적인 사용 사례에는 대화식 맵 작성, 동적 차트 및 그래프 구축, 복잡한 네트워크 시각화 및 사용자 정의 데이터 중심 애니메이션 작성이 포함됩니다.

D3를 사용하려면 JavaScript를 알아야합니까? D3를 효과적으로 사용하려면 JavaScript에 대한 기본적인 이해가 필요합니다. D3은 JavaScript 라이브러리이므로 시각화를 만들려면 JavaScript 코드를 작성해야합니다. 그러나 D3의 API는 직관적이고 배우기 쉽도록 설계되었으므로 JavaScript 전문가가 아니더라도 D3로 강력한 시각화를 만들 수 있습니다.

다른 JavaScript 라이브러리 또는 프레임 워크와 함께 D3을 사용할 수 있습니까? ?

예, D3은 다른 JavaScript 라이브러리 또는 프레임 워크와 함께 사용할 수 있습니다. 예를 들어, D3을 사용하여 React 또는 Angular와 같은 프레임 워크로 구축 된 더 큰 응용 프로그램의 시각화 구성 요소를 만들 수 있습니다.
D3는 실시간 데이터 시각화에 적합합니까?
예, D3 실시간 데이터 시각화에 적합합니다. 새로운 데이터가 들어 오면 시각화를 쉽게 업데이트 할 수있는 유연한 데이터 업데이트 메커니즘이 있습니다. 이렇게하면 D3이 대시 보드 또는 라이브 데이터 피드와 같은 응용 프로그램에 훌륭한 선택이됩니다.
D3를 배울 수 있습니까?
D3 학습에 사용할 수있는 많은 리소스가 있습니다. 공식 D3 웹 사이트에는 풍부한 문서와 예제가 있으며 D3가 깊이있는 온라인 자습서와 과정이 있습니다. 연습도 핵심 - D3을 더 많이 사용할수록 개념과 API로 더 편안하게 될 것입니다.

D3의 한계는 무엇입니까?

D3은 강력한 도구이지만, D3의 한계는 무엇입니까? 몇 가지 제한 사항이 있습니다. 초보자에게는 장벽이 될 수있는 JavaScript 및 웹 표준을 잘 이해해야합니다. D3은 또한 많은 결정을 개발자에게 남겨두고 어디서부터 시작 해야할지 확실하지 않으면 압도적 일 수 있습니다. 마지막으로 D3은 대규모 데이터 세트를 처리 할 수 ​​있지만 성능은 매우 크거나 복잡한 시각화로 문제가 될 수 있습니다.

위 내용은 최신 JavaScript 및 D3을 통한 대화식 데이터 시각화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!