D3.js

D3.js
D3.js
Logo D3.svg
개발자Mike Bostock, Jason Davies, Jeffrey Heer, Vadim Ogievetsky 및 커뮤니티
초기 릴리즈2011년 2월 18일, 11년 전(2011-02-18)
안정된 릴리스
7.6.1 / 2022년 7월 3일; 31일 전(2022-07-03)[1]
저장소
기입처자바스크립트
유형데이터 시각화, JavaScript 라이브러리
면허증.BSD
웹 사이트d3js.org

D3.js(Data-Driven Documents의 줄임말)는 웹 브라우저에서 동적 대화형 데이터 시각화를 생성하기 위한 JavaScript 라이브러리입니다.Scalable Vector Graphics(SVG), HTML5, Cascading Style Sheet(CSS) 표준을 사용합니다.그것은 초기 Protovis [2]프레임워크의 후속이다.버전 2.0.0은 2011년 [3][4]8월에 출시되었기 때문에 개발은 2011년에 이루어졌습니다.2016년 6월 버전 4.0.0이 출시되면서 D3는 단일 라이브러리에서 독립적으로 [5]사용할 수 있는 작은 모듈러 라이브러리 모음으로 변경되었습니다.

맥락

이전에도 웹 브라우저에 데이터 시각화를 도입하려는 다양한 시도가 있었습니다.가장 주목할 만한 예로는 D3.js의 직접 이전 버전으로 간주할 수 있는 Prefuse, Flare 및 Protovis 툴킷이 있습니다.

Prefuse는 Java를 사용해야 하는 시각화 툴킷으로, Java 플러그인이 있는 브라우저 내에서 시각화가 렌더링되었습니다.Flare는 ActionScript를 사용한 2007년의 툴킷과 유사하며 렌더링에는 플래시 플러그인이 필요했습니다.

2009년 스탠퍼드대 스탠포드 시각화 그룹의 Jeffrey Heer, Mike Bostock 및 Vadim Ogievetsky는 Prefuse와 Flare의 개발 및 활용 경험을 바탕으로 데이터에서 SVG 그래픽을 생성하는 JavaScript 라이브러리인 Protovis를 만들었습니다.이 라이브러리는 데이터 시각화 전문가와 [6]학자들에게 알려져 있었습니다.

2011년, 프로토비스 개발은 새로운 프로젝트인 D3.js에 초점을 맞추기 위해 중단되었다.프로토비스 경험을 바탕으로 Bostock은 Heer 및 Ogievetsky와 함께 D3.js를 개발하여 웹 표준에 중점을 두고 성능을 [7]향상시킵니다.

기술 원칙

D3.js 라이브러리는 사전 빌드 기능을 사용하여 요소를 선택하거나 SVG 객체를 작성하거나 스타일을 지정하거나 전환, 동적 효과 또는 툴팁을 추가합니다.이러한 오브젝트는 CSS를 사용하여 스타일링할 수도 있습니다.D3.js 함수를 사용하여 큰 데이터 세트를 SVG 객체에 바인딩하여 텍스트/그래픽 차트 및 다이어그램을 생성할 수 있습니다.데이터는 JSON, CSV(쉼표로 구분된 값) 또는 geoJ 등 다양한 형식일 수 있습니다.SON. 단, 필요에 따라 JavaScript 함수를 작성하여 다른 데이터 형식을 읽을 수 있습니다.

선택 사항

D3.js 설계의 중심 원칙은 프로그래머가 먼저 CSS 스타일의 셀렉터를 사용하여 특정 문서 객체 모델(DOM)[8] 노드 세트를 선택한 후 연산자를 사용하여 jQuery와 유사한 방식으로 이들을 조작할 수 있도록 하는 것입니다.예를 들어, 모든 HTML 단락 요소(로 표시됨)를 선택할 수 있습니다.<p>...</p>텍스트 색상을 라벤더로 변경합니다.

 d3.모두 선택("p")                 // 모든 <p> 요소 선택    .스타일.("컬러", "실패")     // 스타일 "color"를 값 "color"로 설정합니다.    .특성("클래스", "실패")       // 속성 "class"를 값 "class"로 설정합니다.    .특성("x", 50);                 // 속성 "x"(수평 위치)를 값 50px로 설정합니다.

HTML 태그, 클래스, 식별자, 속성 또는 계층 내 위치에 따라 선택할 수 있습니다.요소를 선택하면 해당 요소에 연산을 적용할 수 있습니다.여기에는 속성, 표시 문자 및 스타일(위의 예와 같이)을 가져오고 설정하는 작업이 포함됩니다.요소를 추가하거나 제거할 수도 있습니다.HTML 요소를 수정, 생성 및 삭제하는 이 프로세스는 D3.js의 기본 개념인 데이터에 의존할 수 있습니다.

이행

전환을 선언함으로써 속성 및 스타일의 값을 일정 시간 동안 원활하게 보간할 수 있습니다.다음 코드는 모든 HTML을 만듭니다.<p>...</p>페이지의 요소는 텍스트 색상을 점차 분홍색으로 변경합니다.

 d3.모두 선택("p")             // 모든 <p> 요소 선택    .전이("trans_1")      // 이름이 "trans_1"인 전환      .지연시키다(0)                 // 트리거 후 0ms 후 전환 시작      .지속(500)            // 500밀리초 동안 전환      .완화하다(d3.리니어)           // 진행을 완화하는 전환은 선형입니다...    .스타일.("컬러", '핑크');    // ...색상:

데이터 바인딩

보다 고도의 사용을 위해 로드된 데이터는 요소의 생성을 촉진합니다.D3.js는 주어진 데이터 세트를 로드한 다음 각 요소에 대해 관련 속성(모양, 색상, 값) 및 동작(전환, 이벤트)[9][10][11]을 가진 SVG 개체를 생성합니다. 

// 데이터   변화하다 국가 데이터 = [      { 이름.:'아일랜드',  소득.:53000, 인생: 78, 팝:6378, 색.: "검은색"},      { 이름.:"노르웨이",   소득.:73000, 인생: 87, 팝:5084, 색.: '파랑' },      { 이름.:탄자니아, 소득.:27000, 인생: 50, 팝:3407, 색.: '회색' }   ]; // SVG 컨테이너 생성   변화하다 서비스 = d3.선택한다.("#훅").추가하다("오브젝트래픽처)         .특성('폭', 120)         .특성("높이', 120)         .스타일.("배경색", "#D0D0D0"); // 데이터에서 SVG 요소 생성     서비스.모두 선택("실패")                  // 가상 원 템플릿 생성       .데이터.(국가 데이터)                   // 데이터 바인딩        .합류하다("실패")                                 // 데이터를 선택 항목에 결합하고 각 개별 데이터에 대한 원 요소를 만듭니다.         .특성("id", 기능.(d) { 돌아가다 d.이름. })            // 국가 이름에 따라 원의 ID를 설정합니다.         .특성("cx", 기능.(d) { 돌아가다 d.소득. / 1000  })  // 소득에 따라 원의 수평 위치를 설정합니다.         .특성("cy", 기능.(d) { 돌아가다 d.인생 })            // 기대수명에 따라 원의 수직위치 설정         .특성("r",  기능.(d) { 돌아가다 d.팝 / 1000 *2 })   // 국가 인구에 따라 원의 반지름을 설정합니다.         .특성("채우다", 기능.(d) { 돌아가다 d.색. });        // 국가별 색상에 따라 원의 색상을 설정합니다.

생성된 SVG 그래픽스는 제공된 데이터에 따라 설계됩니다.

데이터를 사용하여 노드 추가

일단 데이터 세트가 문서에 바인딩되면, D3.js의 사용은 일반적으로 명시적인 패턴을 따릅니다..enter()함수와 암묵적인 "업데이트" 및 명시적.exit()바인딩된 데이터 세트의 각 항목에 대해 함수가 호출됩니다.다음에 체인으로 연결된 모든 메서드.enter()선택 항목의 DOM 노드에 의해 아직 표시되지 않은 데이터 세트의 각 항목에 대해 명령이 호출됩니다(이전).selectAll()마찬가지로 암묵적 업데이트 함수는 데이터셋에 대응하는 항목이 있는 기존의 모든 선택된 노드에서 호출됩니다..exit()데이터 세트에 바인딩할 항목이 없는 선택한 모든 노드에서 호출됩니다.D3.js 문서에는 이 기능의 [12]몇 가지 예가 나와 있습니다.

API 구조

D3.js에 의해 지원되는 광범위한 시각화 및 유틸리티를 고려할 때 라이브러리는 여러 GitHub 저장소로 분할되며 각각 특정 [13]영역과 관련된 많은 기능을 포함합니다.이러한 영역은 다음과 같습니다.

수학

어레이

D3.js 어레이 조작은 JavaScript의 기존 어레이 지원을 보완하기 위해 구축되었습니다(변환기 방식: 정렬, 역방향, 스플라이스, 시프트 및 언시프트, 액세스기 방식: concat, join, 슬라이스, indexOf 및 lastIndexOf, 반복 방식: 필터, every, 맵, 일부 및 reduate, right).D3.js는 이 기능을 다음과 같이 확장합니다.

  • 배열의 최소값, 최대값, 범위, 합, 평균, 중위수 및 분위수를 찾는 함수입니다.
  • 배열 정렬, 셔플링, 허용, 병합 및 이등분하기 위한 함수입니다.
  • 네스트 배열을 위한 함수입니다.
  • 연관 배열을 조작하는 함수입니다.
  • 지도 및 세트 컬렉션 지원.

기하학.

  • 점 집합의 볼록 선체를 계산합니다.
  • 포인트 세트의 Voronoi 테셀레이션을 계산합니다.
  • 포인트 쿼드트리 데이터 구조를 지원합니다.
  • 폴리곤에 대한 기본 작업을 지원합니다.

색.

레퍼런스

  1. ^ "Releases · d3/d3". github.com. Retrieved August 3, 2022.
  2. ^ "For Protovis Users", Mbostock.github.com, archived from the original on August 6, 2012, retrieved August 18, 2012
  3. ^ Myatt, Glenn J.; Johnson, Wayne P. (September 2011), "5.10 Further reading", Making Sense of Data III: A Practical Guide to Designing Interactive Data Visualizations, Hoboken, New Jersey: John Wiley & Sons, p. A–2, ISBN 978-0-470-53649-0, retrieved January 23, 2013
  4. ^ "Release Notes", D3.js, retrieved August 22, 2012
  5. ^ "Release v4.0.0 · d3/d3". GitHub. Retrieved December 27, 2021.
  6. ^ 학술적인 예:
  7. ^ Bostock, Ogievetsky & Heer 2011
  8. ^ Bostock, Ogievetsky & Heer 2011, 챕.3
  9. ^ Bostock, Mike (February 5, 2012), Thinking with Joins
  10. ^ "A Pen by Lopez Hugo". Codepen.io. Archived from the original on March 22, 2016. Retrieved August 1, 2016.
  11. ^ "Edit fiddle". JSFiddle.net. Retrieved August 1, 2016.
  12. ^ "Three Little Circles". Mbostock.github.io. Retrieved August 1, 2016.
  13. ^ D3: Data-Driven Documents, D3, December 27, 2021, retrieved December 27, 2021

추가 정보

D3.js 자체의 배경
D3.js 사용 - 초급 수준
D3.js 사용 - 중급 수준
다른이들
비디오

관련 프로젝트

「 」를 참조해 주세요.

외부 링크

Wikimedia Commons에는 D3.js 관련 미디어가 있습니다.