diff --git a/README.md b/README.md index 6ed68822e03b9b94608fab838cd932c7e3ab9950..d3d0acf330f9c39a4c1670e7e9dfd6406cc398dc 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,28 @@ # Open Source Software 도구를 교육하는 동영상 콘텐츠 제작 [SWTT] 보고서 ## 주제: D3.js 튜토리얼 및 공공 데이터를 이용한 실습 + +## 0. D3.js +**D3.js (Data-Driven Documents)**는 데이터 시각화를 위한 자바스크립트 라이브러리로, HTML, SVG, CSS를 사용하여 데이터를 동적으로 시각화하는 데 사용된다. D3는 데이터와 DOM(Document Object Model) 요소를 바인딩하고, 데이터를 기반으로 문서의 요소를 만들고 변형하는 데 필요한 강력한 기능을 제공한다. + +## 주요 특징과 기능 +- 데이터 바인딩: D3.js는 데이터와 DOM 요소를 연결하고, 데이터 세트를 기반으로 요소를 생성하거나 업데이트할 수 있는 메커니즘을 제공한다. 이를 통해 데이터를 시각적 요소로 변환하고 관리할 수 있다. + +- DOM 조작: D3는 웹 문서의 DOM 요소를 선택하고 조작하는 데 유용한 함수들을 제공한다. 이를 통해 SVG, HTML 등의 요소를 생성, 제거, 수정할 수 있다. + +- SVG 기반 시각화: D3는 Scalable Vector Graphics (SVG)를 사용하여 그래프, 차트, 맵 등 다양한 시각화 요소를 생성한다. SVG는 해상도 독립적이며, CSS와 JavaScript로 스타일을 적용할 수 있어 디자인 확장 가능성이 높다. + +- 애니메이션과 인터랙티브 기능: D3는 데이터의 변화에 따라 자연스럽고 매끄러운 애니메이션 효과를 제공하며, 마우스 이벤트와 같은 사용자 상호작용을 처리할 수 있는 기능도 포함되어 있다. + +- 다양한 확장성: D3는 모듈화된 구조로 설계되어 있어 필요에 따라 필요한 기능을 확장하고 추가할 수 있다. 다양한 커뮤니티와 개발자들이 개발한 다양한 확장 라이브러리들이 존재한다. + +### 사용 예시 +- 막대 그래프와 선 그래프: 데이터를 기반으로 막대 그래프나 선 그래프를 생성하고, 각각의 요소를 데이터에 따라 크기와 위치를 동적으로 조정할 수 있다. + +- 산포도와 버블 차트: 데이터의 상관 관계나 분포를 보여주는 산포도(Scatter plot)나 버블 차트(Bubble chart)를 생성하여 다양한 차원에서 데이터를 시각화할 수 있다. + +- 지도 시각화: 지리적 데이터를 표현하기 위해 지도를 SVG 기반으로 생성하고, 다양한 영역에 데이터를 매핑하여 지리적 분포를 시각적으로 보여준다. + ## 1. 아이템 선정 동기 d3.js는 데이터 시각화 라이브러리로, 웹에서 복잡한 데이터를 효과적으로 시각화하는 데 매우 유용하다. 다양한 데이터 시각화 기술을 이해하고 활용할 수 있는 능력을 키우기 위해 d3.js를 선택하게 되었다. 특히, 실습을 통해 직접 코드 작성을 해보며 d3.js의 강력한 기능과 유연성을 체험해보고자 했으며, 다른 사람들에게도 공유를 하고자 했다.