블로그 이미지
정홍주
Azure에 대한 내용뿐만 아니라 새로운 트렌드로 빅데이터, BI, SharePoint, 앱 등의 내용을 다룹니다.

calendar

    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    

Notice

2013.04.22 08:31 Microsft Azure/고급 분석

D3

 

D3

 

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

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

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

 

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

 

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

http://d3js.org/

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

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

  

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

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

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

신고

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

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

티스토리 툴바