4. d3.js란무엇인가
- D3.js는 ‘데이터 중심의 문서’(Data-Driven Documents)의 약자로 자바스크립트 기반의 라이브러리 언어입니다.
- D3.js는 사용자가 입력한 시각화 규칙을 바탕으로 데이터를 반영해 시각화 결과물을 생성합니다.
D3.js
D3.jsData-Driven Documents Javascript
6. D3.js
d3.js동작과정이해하기
데이터 불러오기
(Loading)
데이터 엮기
(Binding)
시각적 요소 지정
(Transforming)
사용자 반응 지정
(Transitioning)
• 시각적 요소를 그리기 전에 보여주고자 하는 데이터를 불러옴.
• .tsv, .csv, .json 등 다양한 형식의 데이터 연동 가능.
• 데이터를 시각적인 요소와 연동시킴.
• 시각적 요소 안에 데이터 수치를 입력한 코드에 맞춰 연동시킴.
• 데이터의 시각적인 요소 지정.
• 그래프의 유형, 요소의 색상, 축과 범례의 여부 등 다양한 요소 지정 가능.
• 파이, 트리맵 등 그래프 유형별로 레이아웃 코드 제공
• 클릭, 드래그 등 사용자 반응에 따른 효과 지정 가능.
10. D3.js
HTML/CSS/Javascript
HTML에 디자인 속성을 적용하는 방법
1. 내부 코드 작성
- HTML 요소 내에 스타일 태그를 지정함.
- 장점 : 별도의 연동이 필요 없다.
- 단점 : 수정을 한꺼번에 할 수 없고 일일이 해야 함.
2. CSS 파일 별도 작성
- HTML 요소 속성을 CSS 파일에 지정.
- 장점 : 수정 및 관리 용이
보통 CSS파일 작성을 추천하지만
오늘의 실습은 내부 요소에 먼저 작성해보기
14. D3.js
SVG란무엇인가
웹용 벡터그래픽
HTML 문서에 직접 포함시키거나 삽입할 수 있다.
인터넷 익스플로러 8 이하를 제외한 모든 브라우저에서 지원
코드작업으로 이미지 편집 가능
품질손상없이 확대/축소 가능
SVG(Scalable Vector Graphics)