일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- D3차트
- Token ) was not valid
- 로트관리
- adobe flash 보안정책
- rmate chart
- 유효재고
- chart flash
- D3.js
- 시큐어코딩
- SEcure coding
- rmate chart flash
- mms.cfg
- SQL0104
- flash에러
- 생산SCM
- Today
- Total
D3.js는 뛰어난 유연성과 데이터 시각화로 원하는 모든 작업을 부팅할 수 있는 기능으로 지금까지 다양한 D3 차트를 구현하면서 항상 놀라게 했다. D3.js는 데이터 기반 문서(D3, Data-Driven Documents)를 표방하는 SVG 기반의 시각화 기술이다. SVG는 ‘Scalable Vector Graphics’의 약자다.SVG는 HTML 페이지 안에서 다른 태그와 같은 방식으로 화면을 그리고, 코드 작업으로 이미지를 편집하여 이벤트를 처리할 수 있고,그려야 할 선의 위치, 길이, 방향 등을 수학적으로 결정하기 때문에 여타 이미지와는 다르게 벡터 기반 그래픽으로 더 나은 화질을 화면에 보여주면서 확대·축소시 그림이 깨지는 등의 품질 손상이 없는 장점을 지녔다.D3.js는 이런 SVG의 장점을..
Path Transitions시계열 데이터의 실시간 표시를 구현할 때 종종 x 축을 사용하여 시간을 위치로 인코딩합니다. 시간이 경과함에 따라 새로운 데이터가 오른쪽에서 나오고 오래된 데이터가 왼쪽으로 미끄러져 나옵니다. 그러나 D3에 내장 된 path interpolators(경로 보간)를 사용 하면 몇 가지 놀라운 동작이 나타날 수 있습니다. 위 차트는 다소 산만합니다. 흔딜리고 있다는 느낌을 받습니다.하지만 자세히보면 차트내 데이터가 오른쪽에서 왼쪽으로 이동하고있음을 알 수 있습니다.(데이터는 랜덤데이터로 가정하여 받습니다.) 흔들리는 느낌을 제거하기 위해 select를 지정해주고 transform해줍니다.그리고 x축도 그려넣습니다.설명은 아래에서 같이 자세하게 다루겠습니다.1234567891011..
이번 장에서는 여러 데이터를 표현하는 기본적인 차트 중다중곡선 차트에 대해 구성해본다. 그 중 예시로 연간 전기사용량(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..