D3 심층 분석

 (d3indepth.com)
4P by GN⁺ | ★ favorite | 댓글 1개
  • D3 in Depth는 D3 6·7을 기준으로, D3.js로 맞춤형 데이터 시각화를 만드는 과정을 다루는 학습 자료임
  • 단순 차트 사용법보다 맞춤형 시각화 제작에 초점을 두며, 웹 시각화의 구성 요소까지 함께 익히게 함
  • HTML, SVG, CSS, JavaScript 기본기가 D3 작업과 연결돼 있어 웹 기반 데이터 표현을 이해하는 데 도움됨
  • React, Chart.js, Leaflet을 활용한 대시보드·데이터 스토리 자료와도 이어져 JavaScript 시각화 학습 흐름을 만들 수 있음
  • D3를 깊게 배우려는 독자에게는 개념 이해와 실습을 함께 가져가는 입문·심화 자료로 활용 가능함

D3 in Depth가 다루는 범위

  • D3 in Depth는 D3 버전 6과 7을 대상으로 함
  • D3.js를 사용해 맞춤형 데이터 시각화를 만드는 방법을 학습할 수 있음
  • 웹 기반 시각화 제작에 필요한 기본 요소로 HTML, SVG, CSS, JavaScript를 함께 다룸

함께 볼 수 있는 JavaScript 시각화 자료

  • Data Dashboards with JavaScript는 React, Chart.js, Leaflet을 사용해 데이터 대시보드를 만드는 방법을 다룸
  • Visualising Data with JavaScript는 Chart.js, Leaflet, D3, React를 사용해 차트와 데이터 스토리를 만드는 방법을 다룸
  • 한 독자 평가는 이 자료를 D3 책 중 높게 평가하며, 내용이 명확하고 따라가기 쉽고 개념이 탄탄하다고 봄

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들
  • D3로 데이터 시각화를 하는 발상은 좋지만 조금 더 상위 수준 도구를 원한다면, D3 팀이 만든 Observable Plot[1]을 볼 만함
    D3 위에 그래프·차트·플롯을 만들기 위한 관례와 편의 기능을 많이 얹은 라이브러리임
    그보다 더 나아가 Observable Framework[2]도 있는데, Plot, D3, 여러 다른 라이브러리를 지원하는 시각화 대시보드용 정적 사이트 생성기임
    1: https://observablehq.com/plot/
    2: https://observablehq.com/framework/
    • 요즘은 오히려 반대가 끌림. 대부분은 결과물이 정확히 어떻게 보여야 하는지 이미 알고 있는데, 프레임워크는 본질적으로 많은 미리 정해진 설정을 제공하고, 그 설정에서 조금만 벗어나려 하면 고통스러워짐
      여러 종류의 플롯은 그냥 SVG 데이터를 직접 조작하는 편이 실제로 더 쉬울 때가 많고, 그렇게 어렵지도 않음
      SVG나 캔버스 출력을 더 쉽게 조작하게 해주는 라이브러리나 프레임워크가 있었으면 함. 작은 수정은 아주 쉬워야 하는데, 프레임워크가 상위 수준으로 갈수록 정해진 길에서 벗어나기 어려워짐
    • Observable Plot은 훌륭함. 매우 유연하고 직관적으로 쓸 수 있어서, 예전에 쓰던 Plotly.js보다 지금은 더 선호함
      문서도 꽤 괜찮지만, 쓸 만한 API 레퍼런스 섹션이 빠져 있어서 기능을 찾아내기는 좋지 않음
    • 웹 시각화에 Matlab 같은 드래그 앤드 드롭 인터페이스가 있는지 궁금함
      HTML5 캔버스로 그래프를 만드는 건 최대한 피하려고 해서, 새롭게 설계하는 방식이 있으면 좋겠음
    • Plot과 Framework는 Observable 생태계에 묶여 있고, 그 자체의 학습 곡선이 있음. D3를 배우는 편이 유연성과 제어권 면에서는 가장 좋음
    • 이 웹사이트가 다른 사람들에게도 버벅이게 느껴지는지 궁금함. 콘텐츠가 많은 웹페이지는 자주 끊김이 느껴졌음
      수정: 하드웨어 가속을 켜니 더 부드러워졌지만, Ryzen 9에서도 기대보다 여전히 버벅임
  • D3를 좋아하고 많이 만들어봤지만, 몇 년 안 쓰다가 다시 돌아올 때마다 기억나는 게 거의 없고, 문서는 더 헷갈리게 만들며, 다시 원점으로 돌아간 느낌이 듦
    10년 동안 안 본 편미분방정식을 풀라고 하면 오히려 더 빨리 감이 돌아올 것 같음
    D3 레퍼런스 문서도 정말 끔찍하다고 봄
    • D3를 버전 2부터 7까지 많이 썼는데, 그동안의 리팩터링 때문에 온라인 예제들이 원래도 이해하기 어려웠고 업데이트하기는 더 어려워졌음
      그래도 지금은 더 안정된 것 같음. D3만 쓰기보다 Svelte+D3로 더 명령형 스타일로 작성하기 시작하면서 감이 잡힘
      생성된 요소를 개발자 도구로 나중에 들여다보는 방식보다, 생성 요소를 더 쉽게 이해할 수 있었음
      D3와 Svelte를 함께 쓰는 데는 이 사이트가 도움이 됨: https://svelte.recipes/
    • 다른 플로팅 라이브러리보다는 그런 문제가 훨씬 덜하다고 느낌
      내가 하는 일의 80%는 애플리케이션, 10%는 시스템, 10%는 데이터 분석에 가깝고, 종종 2주 동안 Jupyter 노트북을 만들고 두 달 동안 안 보기도 함
      대부분의 플로팅 라이브러리는 외워야 할 임의 규칙이 많고, 대개 작은 도메인 특화 언어가 여러 개 있음. 단순한 문자열이 atoi보다 훨씬 복잡하게 해석되는 식임
      게다가 축 범위 결정, 아주 많은 점 처리 등 여러 영역에서 내 관점으로는 뭔가 잘못된 부분이 있음
      D3는 많은 걸 직접 하게 만들지만, 그걸 위한 인터페이스는 개념적으로 직관적임. 병 속에서 배를 조립하는 느낌의 API로 남의 비대하고 버그 많은 범용 코드를 쓰기보다, D3.js로 제대로 만드는 편이 낫다고 봄
    • D3를 많이 써서 AngularJS와 Angular용 통합까지 만든 적이 있음. 강력하긴 하지만 항상 매우 직관적이지 않다고 느꼈음
      잘못 쓰기 쉽고, 디버깅하기 어렵고, 이해하기도 어려움
      이 문제가 쉽게 풀린다는 뜻은 아님. 아주 구체적인 데이터 기반 그래픽을 만들어야 한다면 그래도 여전히 D3를 선택할 가능성이 큼
    • 미적분을 위한 인간 계산 인터페이스는 여러 세대에 걸쳐 정성스럽게 다듬어져 왔음. Newton의 원문을 조금만 읽어봐도 예전부터 항상 그랬던 건 아니라는 걸 바로 알 수 있음
      API를 그런 기준에 맞춰 비교하는 건 사실 공정하지 않아 보임
    • 같은 경험을 했음. 요즘 기술 리드로서는 높은 수준의 도메인 지식을 요구하는 라이브러리는 쓰지 말라고 강하게 요구함
      작성자조차 이해하기 어려운 코드는 최대한 피해야 하고, D3가 그런 라이브러리의 대표적인 예임
  • D3를 실무에서 쓰지 않게 되더라도 배울 가치는 있다고 봄. 이 라이브러리의 핵심은 데이터의 투영 대상과 데이터 자체의 차원이 항상 다르다는 점임
    예를 들어 0~100점 범위의 데이터를 1920x1080인 1080p 화면에 그린다면, 어느 시점엔가 데이터를 화면 투영에 맞게 어떻게 스케일링할지 결정해야 함
    직접 수학을 계산할 수도 있고, D3 같은 라이브러리에 계산을 맡길 수도 있음
    웹에서 데이터를 그리지 않더라도 언젠가는 어딘가에 데이터를 그릴 일이 생길 것이고, 그 생태계에서 같은 역할의 도구를 찾게 되어 유용할 것임
    • 처음으로 직접 만든 PHP 프로그램 중 하나가 이항분포 그래프 PNG 생성기였음
      만들던 PNG 크기에 맞춰 그래프에 그릴 사각형들을 스케일링해야 했던 것으로 기억함
      물론 매우 사소했고 D3가 할 수 있는 놀라운 것들과는 전혀 달랐지만, 컴퓨터에서 이미지를 만들어내는 것을 처음으로 직접 만든 멋진 경험이었음
    • 핵심 개념을 잡는 좋은 설명임
      D3는 개인적으로 직관적이었던 적이 없음. 너무 많은 추상화 수준에서 너무 많은 일을 하려는 게 문제일 수도 있음
      단순히 데이터를 투영하는 얘기라면 이해하기 쉬운데, 투영이 축이나 다른 요소들과도 밀접하게 묶여 있어서 그런 듯함
  • D3의 진짜 문제는 라이브러리로서 실제로 시각화를 해주지는 않는다는 점임. 직접 시각화를 조합할 함수와 예제를 제공할 뿐이고, 그 핵심 요구사항은 JavaScript, 특히 클로저와 함수형 프로그래밍에 대한 전문가 수준의 이해임
    mbostock이 D3의 핵심 추상화라고 말하는 select와 select 차이 계산은, 재진입 가능한 paint()를 작성하기 위한 편의 장치에 가깝다고 봄
    단지 paint 문장이 빌더 문장으로 표현되고, 그 자체가 select 범위 안에 묶이며, 여러 효과를 위해 쪼갤 수 있다는 장식이 붙어 있을 뿐임
    특히 애니메이션 예제에서 D3가 해주는 일은 놀랄 만큼 적고, 바깥 루프를 쓰고 시간에 따른 상태를 추적하는 일은 직접 해야 함
    D3는 시각화를 함수든 다른 형태든 캡슐화하는 추상화도 제공하지 않고, 이 부분은 독자의 숙제로 남겨짐
    새 D3 사용자에게는 이 모든 것이 큰 놀라움이나 충격으로 다가옴. 새 데이터베이스를 도입했더니 파일 입출력, B-트리 인덱스, 쿼리 최적화기 라이브러리만 있고 전부 직접 연결해야 하는 상황과 비슷함
    • visx를 봐볼 만함. 사실 D4, 즉 선언적 데이터 기반 문서(Declarative Data Driven Documents)라고 불려야 할 듯함
      D3의 DOM 조작 모듈인 d3-select를 React로 바꾼 형태임. 이게 가능하고 잘 작동한다는 점이 D3 설계가 훌륭하다는 증거임
    • D3는 matplotlib이나 ggplot 같은 차트 도구 모음이 아니라, 데이터 시각화를 처음부터 만들기 위한 저수준 라이브러리임
      목표에 따라 필요한 도구일 수도 있고 아닐 수도 있음
  • D3.js를 좋아했고, 상업용과 개인용을 포함해 수십 개 데이터 시각화 프로젝트의 핵심 기술로 써왔음. 다만 이제 렌더링 문법은 jQuery 시대를 떠올리게 할 만큼 낡아 보임
    여전히 easing이나 스케일링 같은 여러 보조 함수는 쓰지만, 실제 컴포넌트는 요즘 프레임워크로 만들고 있음. 내 경우에는 Vue 3와 TypeScript임
    그래도 D3.js가 준 아름다운 시절과 데이터 시각화의 여러 좋은 실천 방식을 가르쳐준 데 감사함
    Mike Bostock의 기본값과 데모는 영감이자 좋은 기준의 예였고, Tufte의 미니멀리즘과도 잘 맞았음
    • Vue 3와 TypeScript에 D3 보조 함수를 함께 쓰는 예제가 있다면 보고 싶음
  • D3를 배운 다음, 차트 비슷한 걸 만든다는 전제에서는 VisX나 React가 아닌 동등한 도구로 옮기고 뒤돌아보지 않는 게 좋다고 봄
    D3와 jQuery는 어느 정도 비슷하고 둘 다 스파게티 코드가 되기 쉬움. VisX 같은 도구는 사용하는 D3 위에 구조를 많이 더해 sane하게 유지해 줌
    • D3를 꽤 오래 간헐적으로 써왔고, 이제 막 React와 visx를 시작하는 중인데 둘 사이 간극을 잘 메워줘서 유망해 보임
      다만 순수 D3를 쓸 때보다 더 커스텀한 걸 만들려면 도구와 싸워야 하는 식으로 제한적이라고 느끼는지 궁금함
  • D3는 Wilkinson의 그래픽 문법에서 영감을 받았음
    GG에서 영감을 받은 또 다른 도구가 이름도 적절한 ggplot2이고, R 언어용임
    훨씬 간결하고 함수형에 가까운 인터페이스를 제공하며, CSV를 파이프로 넘겨 빠르게 그래픽을 만들 수 있는 Rush라는 흔치 않은 도구, 즉 셸용 R 원라이너와도 잘 맞음
  • 완전히 웹 기반이 아닌 다이어그램·차트 솔루션을 계속 찾고 있음. CLI나 라이브러리로 구동하고 SVG나 PNG를 출력할 수 있어야 함
    이런 도구들은 보통 브라우저 기능에 의존하거나, 서버 쪽 생성을 위해 헤드리스 브라우저를 쓰는 엉성한 서버 사이드 렌더링 솔루션을 사용함
    특히 프로그래밍 방식으로 벤 다이어그램을 생성할 수 있으면 좋겠음. 이상하게도 이 영역에는 거의 아무것도 없음
    몇몇 JavaScript 차트 라이브러리가 지원하긴 하지만, 전반적으로 지원이 거의 없어 보임
    gnuplot은 좋아 보이지만 벤 다이어그램 지원이 없음
  • 이 자료만이 D3를 이해하게 해줬음. 작성자도 반응이 빠르고 도움을 잘 줌
  • Vega[1]에 대해 좋은 평가를 많이 들었고, D3 위에 올라가는 도구임
    OpenSearch Dashboards의 의존성이기도 해서, 사용자가 로그와 관측 가능성 데이터 위에 커스텀 대시보드를 만들 수 있게 해줌[2]
    Vega 라이브러리가 다른 사람들이 말하는 D3의 학습 난이도 문제를 어느 정도 덜어줄 수 있을 듯함
    [1] https://vega.github.io/vega/docs/
    [2] https://opensearch.org/docs/latest/dashboards/visualize/vega...
답변달기