예제별로 d3.js 데이터 시각화를 만드는 법을 배웁니다

d3.js : javaScript

로 동적 데이터 시각화를 그립니다 이 기사에서는 동적 및 대화식 데이터 시각화를 생성하기위한 강력한 JavaScript 라이브러리 인 D3.JS에 대해 설명합니다. HTML, SVG 및 CSS를 사용하여 웹 브라우저에서 데이터를 렌더링합니다.

코어 포인트 :

D3.JS는 개발자가 HTML, SVG 및 CSS를 사용하여 웹 브라우저에서 동적 인 대화식 데이터 시각화를 생성 할 수있는 다재다능한 JavaScript 라이브러리입니다.

도서관은 데이터 처리를위한 풍부한 도구를 제공하고 원시 데이터를 의미있는 시각적 표현으로 변환하며 독특한 창의적인 아이디어에 맞게 광범위하게 사용자 정의 할 수 있습니다. d3.js는 스케일 바를 사용하여 데이터 값을 크기 또는 색상과 같은 시각적 디스플레이 속성에 매핑하고 차트 생성 및 데이터를 정확하게 반영하는 기타 시각적 요소를 작성합니다. 이 기사는 막대 차트, 라인 차트 및 애니메이션 시각화의 실제 예를 제공하여 D3.JS를 사용하여 간단하고 복잡한 데이터 그래프를 렌더링하는 방법을 보여줍니다.

d3.js는 전환 및 애니메이션과 같은 고급 기능을 지원하므로 개발자는 사용자 경험과 데이터 상호 작용을 향상시키는 시각적으로 매력적이고 동적으로 업데이트 된 시각화를 만들 수 있습니다.

• d3.js는 데이터 기반 문서 작동 JavaScript 라이브러리입니다. HTML, SVG 및 CSS를 사용하여 데이터에 생명을 불어 넣는 데 도움이됩니다. 모든 웹 개발자가 배워야하는 3 개의 JavaScript 라이브러리는 jQuery, 밑줄 및 D3입니다. 이러한 라이브러리는 새로운 방식으로 코드에 대해 생각할 수 있습니다. 데이터 처리 및 그래픽 프로그래밍. D3에 익숙하지 않은 경우 잠시 시간을내어 인상적인 예제 라이브러리를 찾아서 무엇을 할 수 있는지 알아보십시오. 이것은 아버지의 시대의 차트 라이브러리가 아닙니다. William Playfair는 1786 년에 라인 차트 및
지역 차트를 발명하고 1801 년에
• 파이 차트를 발명했습니다. 이것들은 여전히 ​​대부분의 데이터 세트가 오늘날 제시되는 주요 방법입니다. 이 차트는 우수하지만 D3은 고유 한 웹 데이터 시각화를 만들 수있는 도구와 유연성을 제공하며 창의성은 유일한 제한 요소입니다. D3은 데이터를 HTML 및 SVG 문서에 매핑하기위한 jQuery-like API가있는 매우 유연한 저수준 시각화 라이브러리입니다. 대부분의 기능은 SVG의 기하학적 그림과 경로를 조작하는 데 비롯되지만 데이터 변환 및 물리적 계산에 대한 유용한 수학적 기능이 많이 포함되어 있습니다. 이 기사는 D3 기능에 대한 높은 수준의 개요를 제공하는 것을 목표로하며, 각 예제에서 입력 데이터, 및 출력 를 볼 수 있습니다. 서류. 각 기능이 무엇을하는지 설명하지 않고 대신 코드를 보여 주면 어떻게 작동하는지에 대한 대략적인 아이디어를 얻을 수 있어야합니다. 나는 가장 중요한 개념으로 만 들어갑니다 :
• scale
및
• 를 선택하십시오.

막대 차트

HTML을 사용하여 간단한 막대 차트를 작성하는 것은 D3이 데이터를 문서로 변환하는 방법을 이해하는 가장 쉬운 방법 중 하나입니다. 코드는 다음과 같습니다.

이 코드는 입력 데이터를 출력 HTML에 매핑합니다.

github 기부 차트

몇 줄의 추가 코드만으로 위 막대 차트는 GitHub와 유사한 기여도로 변환 될 수 있습니다.

d3.select('#chart')
  .selectAll("div")
  .data([4, 8, 15, 16, 23, 42])
  .enter()
  .append("div")
  .style("height", (d)=> d + "px")

[4, 8, 15, 16, 23, 42] 우리는 더 이상 데이터의 수치 값에 따라 높이를 설정하지 않고 배경색을 설정합니다.

SVG의 초보자 대부분의 D3 기능은 SVG에서 작동한다는 사실에서 비롯됩니다. 여기에는 원, 다각형, 경로 및 텍스트와 같은 2D 그래픽을 그리는 레이블이 포함되어 있습니다.
원형

d3은보다 복잡한 데이터 유형을 처리 할 수 ​​있습니다.

라인 차트

SVG에서 라인 차트를 그리는 것은 매우 간단합니다.

스케일 스케일은 입력 도메인을 출력 범위에 매핑하는 기능입니다.

애니메이션 비행 시각화



이것은 멜버른과 시드니 사이의 항공편을 보여주는 애니메이션 시각화의 예입니다.

결론 이 기사는 D3.JS 라이브러리의 작은 부분만을 다룹니다. 이 고급 개요와 몇 가지 실제 예가 선택, 스케일 및 변환을 사용하는 방법에 대한 아이디어를 제공하기를 바랍니다. 데이터를 나타내고 고유 한 데이터 시각화를 즐기는 가장 좋은 방법을 생각해보십시오.

(이미지 위치는 변경되지 않음)

위 내용은 예제별로 d3.js 데이터 시각화를 만드는 법을 배웁니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!