Skip to content
Snippets Groups Projects
Commit 2ff8ce38 authored by NAAE CHO's avatar NAAE CHO
Browse files

Update README.md

parent 22490b08
Branches
No related tags found
No related merge requests found
# Open Source Software 도구를 교육하는 동영상 콘텐츠 제작 [SWTT] 보고서 # Open Source Software 도구를 교육하는 동영상 콘텐츠 제작 [SWTT] 보고서
## 주제: D3.js 튜토리얼 및 공공 데이터를 이용한 실습 ## 주제: 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. 아이템 선정 동기 ## 1. 아이템 선정 동기
d3.js는 데이터 시각화 라이브러리로, 웹에서 복잡한 데이터를 효과적으로 시각화하는 데 매우 유용하다. 다양한 데이터 시각화 기술을 이해하고 활용할 수 있는 능력을 키우기 위해 d3.js를 선택하게 되었다. 특히, 실습을 통해 직접 코드 작성을 해보며 d3.js의 강력한 기능과 유연성을 체험해보고자 했으며, 다른 사람들에게도 공유를 하고자 했다. d3.js는 데이터 시각화 라이브러리로, 웹에서 복잡한 데이터를 효과적으로 시각화하는 데 매우 유용하다. 다양한 데이터 시각화 기술을 이해하고 활용할 수 있는 능력을 키우기 위해 d3.js를 선택하게 되었다. 특히, 실습을 통해 직접 코드 작성을 해보며 d3.js의 강력한 기능과 유연성을 체험해보고자 했으며, 다른 사람들에게도 공유를 하고자 했다.
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment