CODELIB

이번 장에서는 여러 데이터를 표현하는 기본적인 차트 중다중곡선 차트에 대해 구성해본다. 그 중 예시로 연간 전기사용량(Electricity. kWh)에 대해서 차트를 구성해본다. [JSP]12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697 .axis--x path { display: none;} .line { fill: none; stroke: steelblue; stroke-width: 1.5px;} var svg = d3.s..

전 시간 예제에서는 외부파일인 TSV(Tab-Separated Values) 파일형식으로 탭(Tab)으로 데이터를 구분해 차트를 구현해봤다. 이번 장에서는 비슷한 포맷인 CSV(Comma-Separated Values) 파일형식으로 차트를 구현하려고한다. CSV는 몇 가지 필드를 쉼표(,)로 구분한 텍스트 데이터 및 텍스트 파일이다. 확장자는 .csv이며 MIME 형식은 text/csv이다. CSV는 지금까지도 대중적으로 많이 사용한다.보통 스프레드시트(Excel)나, 데이터베이스 소프트웨어 (SQL)등에서 문서화된다.세부적인 구현식은 소프트웨어에 따라 서로 다르지만공통점이 있다.문서를 기록하고 저장에 안전하며 수정하기도 쉽고 원하는 데이터만 출력하여, 사용이 간편하고 편리하다. 따라서 많은 데이터를 다..

소스코드에 배열이나 데이터설정값에데이터를 입력하지 않고, 외부파일에서 데이터를 읽어차트를 띄워보기로 한다. 많은 방법이 있는데그중 .tsv나 .csv와 같은 파일형식이가장 대표적이다. TSV파일이란? TSV 파일 형식, "탭(Tab)으로 구분 된 값"을 의미하고,이 탭으로 구분 된 값 파일이 많은 스프레드 시트 응용 프로그램에 의해 만들어지고 사용된다. 예를 들어, "[data.tsv]" 의 파일형식은메모장에서 ","(콤마) 대신에 Tab키로 간격을 맞춰줘야 한다.이는 ","가 많이 사용이 되는 주로 화폐나 수치단위 등과 같은 숫자데이터에 사용하기 적절하다. ","(콤마)로 간격 맞추는건 CSV파일이다.CSV파일은 보통 스프레드 시트에서 응용되어 생성된다.CSV파일은 이번 장에서 다루지 않고,먼저 TSV..

지금까지는 데이터를 그래픽으로 표현하여 바 차트의 막대, 라인 차트의 선을 다루었다.이번엔 파이 차트의 조각과 같은 데이터로 나타내려고한다. 원그림 또는 파이차트는 범주별 구성비율을 단위 원에 부채꼴로 표현한 그래프이다. 이 그래프에서 부채꼴의 중심각은 구성비율에 비례한다. 즉, 원그래프라고도 한다. 다양한 차트가 있지만,그 중에서도 비율을 이야기할 때 많이 쓰이는 유형이파이차트다. 파이차트의 데이터 구성은지금까지 데이터 구성방식과 많이 다르다.가장 큰 차이는데이터를 담는 형식과데이터의 시각화를 담당하는Scale이 사라진 점이다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445Insert title here..

라인차트의 예제로 그림과 같이 툴팁 기능과정확한 데이터값을 보여주기 위해 꺾은선 그래프를 구현한다. 구현할 툴팁 기능은 바 차트에서는 도형(rect)에 마우스를 올리면 해당하는 값을 보이게 했다.라인 차트는 하나의 선이기 때문에 이렇게 구현할 수 없다.대체 방법은 X축의 값이 있는 부분에적당한 도형(rect, circle등)을 생성하고(append)이 도형에 마우스를 올리면 툴팁이 보이도록 작성한다.반지름(r)이 3 px인 원을 생성하였다.보이고 숨기는 방식은 바 차트와 동일하다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676..

이번에는 D3의 차트를 만들면서 정리한다. 먼저, 라인 차트의 구현 방법을 알기 위해 이전에 작성한 바 차트 중 하나를 골라서 마지막에 다음 코드를 추가한다. 12345678910 var line = d3.line() .x(function(d) {return xScale(d.x) + 55 ; }) .y(function(d) {return yScale(d.y); }); svg.append("path") .data([dataset]) .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", "1.5px") .attr("d", line) 위 코드를 추가하고 실행해보면 그림과 같이 라인 차트가 생성되는 것을 볼 수 있다. 즉, D3에서는 바 차트나..

툴팁(tooltip) 기능은그림과 같이 차트 bar(도형)에 마우스를 올리면 별도의 작은 창에 관련 데이터를 보여주는 기능을 구현한다.해당 데이터값의 상세데이터를 표현하고자 할때 사용한다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102svg { border: 1px solid;}.bar { fill: LightCoral;}.bar:hover { fill: maroon;/* DarkSlateBlue; ..

이번에는 그리드기능을 추가해본다.그리드는 값의 정확한 위치를 쉽게 볼 수 있게 사용되는 것으로D3에서 tickSize 함수로 간단하게 구현할 수 있다. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384svg { border: 1px solid;}.bar { fill: orange;}.bar:hover { fill: tomato; cursor: pointer;}.text { fill: white; font-weight: bold;}.grid line { stroke: lig..

일반적인 차트에서 흔히 보는 척도를 구현하려고 한다.이러한 기능을 구현하기 위해서 앞의 '01 간단한 차트 만들기' 마지막 소스 중에서 다음과 같이 수정해 준다. 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152svg { border: 1px solid;}.bar { fill: orange;}.bar:hover { fill: tomato; cursor: pointer;}.text { fill: white; font-weight: bold;} var dataset = [ {x : 'A', y : 9} , {x : 'B', y : 19} , {x : 'C', y : 29} , {x : '..

D3.js 는 데이터 시각화 프레임워크로 잘 알려져 있고, 자바스크립트로 개발을 한다.HTML5의 SVG(Scalable Vector Graphic)을 통하여 다양한 화면 해상도에서도 깨짐없는 Visualizing이 가능하고,다양한 차트를 쉽게 제작할 수 있다. D3로 만들 수 있는 차트는 github나 bl.ocks.org에서 확인해 볼 수 있다.버전은 크게 v3와 최신버전인 v4로 나뉜다. v3와 v4는 척도(scale) 사용에 변화가 있고 대부분 유사하게 사용할 수 있다. 자세한 차이는 여기를 읽어보면 대략 알수있다. D3.js의 개발언어 함수를 익힐려면 select, selectAll, enter, data, append, domain, range 등의 기본적인 함수는 알고 시작해야하고 모른다면 ..