▲

GN⁺: D3 심층 분석

 (d3indepth.com)
4P by neo 6달전 | favorite | 댓글 1개

D3 in Depth

D3 in Depth는 D3 버전 6과 7을 다룸

  • 홈페이지: D3 in Depth는 D3.js의 최신 버전인 6과 7을 다루는 사이트임.
  • 소개: 이 사이트는 D3.js를 이용한 데이터 시각화에 대한 깊이 있는 내용을 제공함.
  • 뉴스레터: 뉴스레터를 통해 책 할인 정보와 D3.js 관련 뉴스 및 팁을 받을 수 있음.

책 및 강좌

  • Visualising Data with JavaScript: Chart.js, Leaflet, D3, React를 사용하여 차트, 대시보드 및 데이터 스토리를 만드는 방법을 가르침.
    • "내가 읽은 최고의 D3 책 중 하나. 내용이 매우 명확하고 따라하기 쉬우며 개념이 매우 탄탄함." - Javier García Fernández
  • 커스텀 데이터 시각화: D3.js를 사용하여 커스텀 데이터 시각화를 만드는 방법을 배울 수 있음.
  • 기초 학습: 웹에서 데이터 시각화를 구축하기 위한 HTML, SVG, CSS 및 JavaScript의 기본을 배울 수 있음.

목차

  • D3 소개
  • 시작하기
  • 선택(Selections)
  • 데이터 조인(Data joins)
  • Enter, exit & update
  • 스케일 함수(Scale functions)
  • 도형(Shapes)
  • 축(Axes)
  • 계층(Hierarchies)
  • 코드 다이어그램(Chord Diagrams)
  • 포스 레이아웃(Force layout)
  • 지도(Maps)
  • 데이터 요청(Data Requests)
  • 전환(Transitions)
  • 선택, 드래그 및 브러싱(Picking, Dragging and Brushing)
  • 줌 & 팬(Zoom & pan)

뉴스레터

  • 구독: 책 할인 정보와 D3.js 관련 뉴스 및 팁을 받을 수 있음.

저작권

  • © Peter Cook 2023

GN⁺의 의견

  • D3.js의 중요성: D3.js는 데이터 시각화 라이브러리로, 복잡한 데이터를 시각적으로 표현하는 데 매우 유용함. 특히 대규모 데이터 세트를 다룰 때 강력한 도구임.
  • 학습 곡선: D3.js는 강력하지만 학습 곡선이 가파를 수 있음. 이 사이트는 초보자부터 고급 사용자까지 모두에게 유용한 자료를 제공함.
  • 다양한 도구와의 통합: Chart.js, Leaflet, React 등 다른 도구와의 통합 방법을 배울 수 있어, 다양한 프로젝트에 적용 가능함.
  • 실습 중심: 이 사이트는 실습 중심으로 구성되어 있어, 실제 프로젝트에 바로 적용할 수 있는 지식을 얻을 수 있음.
  • 기술 선택 시 고려사항: D3.js를 선택할 때는 프로젝트의 복잡성, 팀의 기술 수준, 유지보수 가능성 등을 고려해야 함. D3.js는 강력하지만, 간단한 시각화에는 오히려 과도할 수 있음.
▲
neo 6달전  [-]
Hacker News 의견

해커뉴스 댓글 모음 요약

  • Observable Plot과 Observable Framework 소개

    • D3를 사용한 데이터 시각화에 관심이 있다면, 더 높은 수준의 편의성을 제공하는 Observable Plot을 확인해볼 만함.
    • Observable Framework는 정적 사이트 생성기로, Plot, D3 및 다양한 라이브러리를 지원하여 시각화 대시보드를 구축할 수 있음.
    • Observable Plot
    • Observable Framework

  • D3 사용의 어려움

    • D3를 사용한 경험이 많지만, 몇 년 만에 다시 사용하면 문서가 혼란스럽고 처음부터 다시 시작하는 느낌을 받음.
    • 수학 문제를 푸는 것보다 D3 문서를 이해하는 것이 더 어려움.

  • D3 학습의 가치

    • D3를 전문적으로 사용하지 않더라도 학습할 가치가 있음.
    • 데이터의 투영과 실제 데이터의 차이를 이해하고, 이를 스케일링하는 방법을 배울 수 있음.
    • 웹이 아니더라도 다른 환경에서 데이터 시각화를 할 때 유용함.

  • D3.js의 발전과 현대적 대안

    • D3.js를 사용하여 많은 프로젝트를 진행했지만, 이제는 구식으로 느껴짐.
    • Vue 3와 TypeScript 같은 현대적인 프레임워크로 전환했지만, D3.js가 준 좋은 실천 방법들에 감사함.

  • VisX와 같은 대안

    • D3를 배우고 나서 VisX와 같은 구조화된 도구로 전환하는 것이 좋음.
    • D3와 jQuery는 스파게티 코드가 되기 쉬움.

  • Grammar of Graphics와 ggplot2

    • D3는 Wilkinson의 Grammar of Graphics에서 영감을 받음.
    • R 언어의 ggplot2도 같은 영감을 받아 더 간결하고 기능적인 인터페이스를 제공함.

  • 강제 지향 그래프의 문제

    • D3 예제의 강제 지향 그래프를 좋아하지만, 노드와 엣지가 많아지면 구성이 좋지 않게 됨.
    • 3D 시각화가 필요할 수도 있음.

  • 유용한 D3 리소스

    • D3를 이해하는 데 도움이 된 유일한 리소스가 있었음.
    • 저자가 응답성이 좋고 도움이 됨.

  • Vega 소개

    • D3 위에 있는 Vega에 대해 좋은 이야기를 들음.
    • OpenSearch Dashboards의 종속성으로, 사용자들이 로그와 관찰 데이터에 대한 맞춤형 대시보드를 만들 수 있게 함.
    • Vega 문서
    • OpenSearch Dashboards에서 Vega 사용

  • D3 문법의 복잡성

    • D3로 만든 시각화는 좋지만, 문법이 너무 복잡하고 구식임.
    • 더 선언적인 방식으로 전환되어 다행임.
답변달기