D3.js

HTML CHECK
https://validator.w3.org
JAVASCRIPT CHECK
https://kr.piliapp.com/javascript-validator/
D3.js는 자바스크립트 기반의 데이터 시각화 라이브러리이다.
HTML, SVG(Scalable Vecotor Graphic), CSS(cascading style sheets)
D3.js는 파이어폭스, 크롬(크로미어), 사파리(WebKit), 오페라, IE9에서 테스트되어 동일한 코드 사용가능

- 데이터 획득
- 데이터 파싱
- 데이터 필터링
- 데이터 표현
- 상호작용 추가

https://d3js.org

d3.v3.js:    D3.js 핵심 라이브러리(일반적으로 개발시 사용)
d3.v3.min.js:    d3.v3.js와 동일한 내용을 담고 있지만, 압축된 버전(일반적으로 배포시 사용)
<script src="http://d3js.org/d3.v3.min.js"></script>
기본 함수
- d3.select    : 현재 문서에서 특정 태그 하나를 선택
- d3.selectAll    : 현재 문서에서 특정 태그 전체를 선택
- selection.attr    : 선택된 태그의 속성값 지정
- selection.data    : 참조 연결할 데이터 가져옴
- selection.enter    : 데이터 개수만큼 태그가 부족할시에 플레이스 홀더를 반환
- selection.append    : 새로운 태그를 추가
- selection.exit    : 종료(더 이상 필요없는 태그를 반환)
- selection.remove    : 현재 문서에서 선택된 태그를 제거
SVG 기본 구조
- rect
    x
    y
    width
    height
    rx(좌우 방향의 둥근 모서리 반지름)
    ry(위 아래 방향의 둥근 모서리 반지름)
- circle
    cx
    cy
    r
- ellipse
- line
- polyline
- polygon
- path        복잡한 그림
    d(패스 데이터)
- text
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus@">
<meta name="Autor" content="">
<meta name="Keywords" content"">
<meta name="Description" content="">
<title>DOCUMENT</title>
<script src="https://d3js.org/d3.v3.min.js"></script>
</head>
<body>
</body>
</html>
example1.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport", content="width=device-width, initial-sclae=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>D3 EXAMPLE</title>
</head>
<body>
<svg width="500" height="500"></svg>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
const data=[5, 10, 15, 20, 25, 30, 35, 40, 45, 50];
const svg=d3.select('svg');
data.forEach((d, i)=>{
svg.append('rect')
.attr('height', data[i])
.attr('width', 40)
.attr('x', 50*i)
.attr('y', 100-data[i])
})
</script>
</body>
</html>