-
D3.js 차트 컴포넌트D3 2021. 7. 4. 23:51
D3로 데이터를 시각화할 때의 핵심적인 절차
- CSV나 JSON 포맷인 외부 파일에서 데이터 로딩하기
- D3 스케일과 자바스크립트 내장 함수로 데이터를 포맷하고 변환하기
- 시각화에 사용할 값을 만드는 데 데이터 측정하기
- 데이터의 속성에 기초에 그래프를 생성하는 데 데이터 바인딩하기
- <g> 요소로 여러 도형으로 구성된 복잡한 그래프 객체를 생성하는 데 하위 셀렉션 사용하기
- 셀렉션에 enter() 와 exit() 메서드로 요소를 생성, 변경, 삭제하기
D3는 엄청 많은 그래프 예제를 제공하며, 깃허브는 예제의 산실이다.
레이아웃
생성기나 컴포넌트와 대조적으로 D3 레이아웃은 파이 차트 레이아웃처럼 상당히 간단할 수도 있고, 힘-방향 네트워크 레이아웃처럼 복잡할 수도 있다. 레이아웃은 일련의 데이터, 그리고 생성기로 구성된 배열을 입력받아 특정 위치와 크기로 그리는 데 필요한 데이터 속성을 동적 혹은 정적으로 추가한다.
축 생성
차트 대부분에서 X-축은 시각을, Y-축은 양을 나타낸다. 이와는 대조적으로 산포도는 데이터의 양적인 데이터에 의해 결정되는 XY 위치에 따라 단 하나의 기호를 올려놓는다. 산포도는 과학 분야에서 흔히 볼 수 있으며, 의료 서비스의 비용과 품질을 비교하는 기사 그 밖에 언론 매체 등에서 점점 더 많이 사용하고 있다.
데이터 표시
산포도를 그리려면 다차원 데이터가 필요하다. 각 데이터점에는 연결된 데이터가 하나 이상 있어야 하며, 특히 산포도의 경우에는 데이터가 수치형이어야 한다. 산포도는 두 개의 수치로 구성된 데이터의 배열만 있으면 된다.
고액 연봉과 친구 수의 대한 예제
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <title>Document</title> </head> <script> var scatterData = [{friends: 5, salary: 22000}, {friends: 3, salary: 18000}, {friends: 10, salary: 880000}, {friends: 0, salary: 180000}, {friends: 27, salary: 56000}]; d3.select("svg").selectAll("circle") .data(scatterData).enter() .append("circle").attr("r", 5).attr("cx", function(d,i) { return i * 10; }).attr("cy", function(d){ return d.friends; }); var xExtent = d3.extent(scatterData, function(d){ return d.salary; }); var yExtent = d3.extent(scatterData, function(d){ return d.friends; }); var xScale = d3.scale.linear().domain(xExtent).range([0, 500]); var yScale = d3.sclae.linear().domain(yExtent).range([0, 500]); d3.select("svg").selectAll("circle") .data(scatterData).enter().append("circle") .attr("r", 5).attr("cx", function(d){ return xScale(d.salary); }).attr("cy", function(d){ return yScale(d.friends); }); </script> <body> </body> </html>'D3' 카테고리의 다른 글
채광량에 따른 키우기 쉬운 농작물 예제 (0) 2021.07.12 D3.js <svg> 요소 (0) 2021.06.28 D3.js (0) 2021.06.27 D3.js? (0) 2021.06.21