google chart 구글 차트의 경우 검색을 통해 찾을 수 있다. 검색을 통해 아래 사이트로 들어간다. 접속 한 다음 빨간색으로 표시된 more을 클릭한다. 여기에서 내가 원하는 다양한 차트를 가져다 쓸 수 있다. 난 scatter chart의 예를 가져왔다. 이렇게 소스코드를 그대로 가져다 붙이면 그래프가 그려진다. 여기서 그래프 틀을 구하고 내 가지고 있는 데이터를 넣어 원하는 차트를 그리면 된다.
CSV 파일 읽어오기 csv 파일을 읽을 때 d3.csv (경로 , function(data){}) 를 통해 csv 파일을 읽어온다. function 부분을 통해 데이터를 어떻게 할지를 정의할 수 있다. 기본 예제 ) 예제) 처음은 csv 파일 내용이다. 이 값을 가져와서 p태그에 뿌리는 것을 해보겠다. 예제) 가져온 p 태그를 table 넣는 예제이다. JSON 파일 읽어오기 json 파일을 읽을 때 d3.json (경로 , function(data){}) 를 통해 json 파일을 읽어온다. function 부분을 통해 데이터를 어떻게 할지를 정의할 수 있다. 예제) 예제) 불러온 json 값을 p 태그에 넣는 작업
Event 마우스 이벤트에 따라 // container라는 id를 가지고 있는 div 태그 이런식으로 표현된다. body에 값은 없지만 scrip 단에서 동적으로 페이지가 변화한다. Aninmation Aninmation을 하기 위해서는 svg를 알아야 한다. SVG(Scalable Vector Graphics): 2차원 벡터 그래픽을 표현하기 위한 XML-based image format svg의 장점 SVG기반의 전문 그래픽 프로그램에서 나온 산출물을 그대로 활용할 수 있다 검색화, 목록화, 스크립트화가 가능하고, 필요하면 압축도 가능하다 확대/축소시 퍼짐 현상이 없고 품질의 손상이 없다 아래는 svg 를 통한 간단한 애니메이션 예제이다. 위와 같이 그려지게 된다. 참조: https://pubdata..
D3.js DATA 사용법 D3.js는 script 단에서 data의 값을 정의해서 사용할 수 있다. 이때 배열 형태로만 저장 후 사용해야 된다. 기본 예제) 심화 예제) Error : This is Error Warning : This is Warning 그 결과 위와 같은 결과가 나오게 된다. 결과는 이렇게 나오게 된다.
