티스토리 뷰

Microsft Azure/고급 분석

D3

정홍주 2013. 4. 22. 08:31

 

D3

 

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

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

오픈소스 빅데이터 요소 기술

 

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

 

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

http://d3js.org/

https://github.com/mbostock/d3/wiki/Gallery

https://github.com/mbostock/d3/wiki/Tutorials

  

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

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

<body>

    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

 

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

<script>

        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로도 작업이 가능하여 데이터 시각화에 사용하시면 도움이 될 것으로 보입니다.

'Microsft Azure > 고급 분석' 카테고리의 다른 글

빅 데이터 활용 기술 및 솔루션  (0) 2013.05.06
데이터 과학자 – Data Scientist  (1) 2013.04.24
HDFS (Hadoop Distributed File System)  (1) 2012.12.14
.NET SDK for Hadoop  (0) 2012.12.14
오픈소스 빅데이터 요소 기술  (0) 2012.11.28
댓글