D3

이전 글에서 잠시 언급한 D3 에 대한 내용을 한번 적용해보았습니다.

저번 글에 2 번이나 언급되어 있어서 수정했습니다.

D3는 시각화 언어로 javascript 라이브러리이며 HTML 5의 CSS 3, SVG와 동작되며 정말 다양하고 새로운 결과를 제공해줍니다. Data-Driven을 제공해주어 사용자 경험을 더 강화해주고 있습니다.

아래 링크를 통해 보다 더 자세한 정보를 확인 가능합니다.

HTML 5의 SVG를 이용하여 D3로 바 차트를 구현해보겠습니다. jQuery를 사용해본 사람이라면 그다지 문제는 없을 것 같습니다.

1. 프로젝트를 생성하고 D3 스크립트를 링크해주고 나면 HTML로 작업하거나 HTML 5의 SVG에 작업이 가능합니다.

<body>

2. 추가한 내용에 아래 스크립트를 추가합니다.

var data = [4, 8, 15, 16, 23, 42];

var chart = d3.select("body").append("svg")

.attr("class", "chart")

.attr("width", 420)

.attr("height", 20 * data.length);

var x = d3.scale.linear()

.domain([0, d3.max(data)])

.range([0, 420]);

chart.selectAll("rect")

.data(data)

.enter().append("rect")

.attr("y", function (d, i) { return i * 20; })

.attr("width", x)

.attr("height", 20);

3. 실행하여 결과를 확인합니다.

4. 보다 더 복잡한 결과도 구성할 수 있습니다.

도움말과 샘플 예제를 통해 정말 다양한 시각화가 가능해질 수 있습니다. HTML 5의 SVG로도 작업이 가능하여 데이터 시각화에 사용하시면 도움이 될 것으로 보입니다.