d3.js
D3.js is a JavaScript library for manipulating documents based on data.
D3 helps you bring data to life using HTML, SVG, and CSS.
https://d3js.org/
<script src="https://d3js.org/d3.v5.min.js"></script>
var data = [30,86,456,214,52];
d3.select('.chart')
.selectAll('div')
.data(data)
.enter()
.append('div')
.style('width', function(d){ return d+'px' })
.text(function(d){ return d })
D3 기본문법
d3.select
- selection.attr
- selection.classed
- selection.style
- selection.text
- selection.html
d3.selectAll
- selection.each(function)
- selection.append(name)
selection.data
selection.enter
selection.exit
d3.min
d3.max
d3.extent
d3.sum
d3.medium
d3.mean
d3.ascending / d3.descending
d3.quantile
d3.bisect
d3.nest
메서드가 체인으로 연결되어 있을 때, data()메서드를 호출한 다음에는 언제든지 d를 받는 익명 함수를 만들 수 있다.
1차원 데이터를 이용한 막대 차트
2차원 데이터를 이용한 산포도(scatterplot)
GeoJSON
GeoJSON 은 지리 정보를 저장할 목적으로 최적화한 JSON 객체의 특정한 형태다.
GeoJSON 에는 지정학적 공간의 한 지점을 저장할 수 있다(보통은 위도/경도 좌표다).
하지만 선과 다각형 같은 도형, 다른 공간적인 특징도 저장이 가능하다. 가지고 있는 지리 정보가 있다면 GeoJSON으로 파싱함으로써 D3와 최적의 궁합을 맞출 수 있다.
GeoJSON에서는 항상 경도(longitude)를 위도(latitude)보다 앞에 적어야 한다.
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [125.6, 10.1]
},
"properties": {
"name": "Dinagat Islands"
}
}
좌표 참고 http://teczno.com/squares
geojson 참고 http://geojson.xyz/
투영법
3차원 공간을 2차원 평면에 투영하는 방법을 결정하는 알고리즘
var projection = d3.geo.albersUsa().translate([w/2,h/2]);
D3에는 내장된 투영법이 몇 가지 있다.
알버스 USA(Albers USA) 투영법은 미국 남서부 아래쪽에 알래스카와 하와이를 넣어 보기 좋게 만든 합성 투영법이다.
d3.geo.path()의 기본 투영법이 albersUsa이다.
투영법의 기본 척도scale은 1000이다.