[Week12] D3.js_Basic2

1. Data Designer D3.js 02 : D3.js 데이터 불러오기

2. 꿈꾸는데이터디자이너

3. 시즌2오늘의 수업 이론 실습 1. D3.js에서 활용할 수 있는 데이터 종류 2. 데이터 형식 ‘CSV’, ‘JSON’ 3. D3.js 데이터 매칭 원리 1. 데이터 불러오기 2. 데이터 문장 만들기

5. 시즌2d3.js 데이터 종류 D3.js 코드 작성의 시작 외부 데이터 불러오기

7. 시즌2d3.js 데이터 종류 종류 설명 TSV 데이터가 탭으로 구분된 형식. 헤더있음. CSV 반점으로 구분한 텍스트. 헤더있음. JSON JavaScript Object Notation’의 약자. XML과 비교해 간단하고 데이터 용량도 적음. 헤더없음. HTML 브라우저로 표시했을 때 데이터를 보기 좋게 표시해줌. 다른 데이터와 달리 레이아웃이 있다. XML 태그를 이용해서 데이터 표현. 범용적인 데이터 포맷. SVG도 XML의 종류 중 하나. TEXT 순수한 문자로만 구성된 데이터 파일.

9. 시즌2d3.js 데이터 종류 : CSV CSV 반점으로 구분한 텍스트 d3.csv() item1, item2, item3, 120, 60, 300, 60, 50, 80, 300, 30, 90, 80, 10, 150, 헤더 • 그래프 요소에 연동할 때 속성 이름으로 다뤄짐. • CSV 형식에 헤더가 없으면 별도 처리가 필요하다 • D3.js에서는 첫 줄이 헤더라는 것을 전제

11. 시즌2d3.js 데이터 종류 : JSON • JavaScript Object Notation. 자바스크립트 문법을 바탕으로 하는 자료형식 • TSV나 CSV와 달리 헤더는 없다. • 여러개의 데이터는 []로 감싼다 • 계층구조를 가진 데이터에서 많이 사용. [ {“item” : “상품A”, “sales” : [150,90,300]}, {“item” : “상품B”, “sales” : [70,920,320]}, {“item” : “상품C”, “sales” : [20,40,360]}, {“item” : “상품D”, “sales” : [50,210,200]}, {“item” : “상품E”, “sales” : [400,610,100]}, ] d3.json() ex) JSON

13. 시즌2d3.js는 이렇게 생겼다 - d3.js 동작 순서 데이터 불러오기 척도, 축 설정 틀 그리기 축 그리기 요소에 데이터 엮기 요소 속성 설정 1 2 3 4 5 6 d3.csv d3.scale() .domain() .range(); d3.svg.axis() .scale() .orient; d3.select() .append() .attr(“width”) .attr(“height”); svg.append(“g”) .attr(“transform”) .call(xAxis); svg.selectAll(“”) .data() .enter() .append(“”)’; .attr(“”);

15. 시즌2 실습

17. 시즌2d3.js 설정하기 http://d3js.org d3.js 연동방법 1. 코드 파일 다운로드 후 사용 2. 코드 서버 링크 추가해 사용

19. 시즌2d3.js 설정하기 index.html 서버가 기본으로 인식하는 html 여러 파일 중 ‘index.html’ 파일이 있으면 가장 먼저 인식해서 보여줌 Tip index.html Tip 파일경로 설정 A a d3.html 같은폴더 d3_2.html d3_3.html 하위폴더 상위폴더 1. 같은 폴더 내에 있을 때 2. 하위폴더에 있을 때 3. 상위폴더에 있을 때 파일명 . 확장자 폴더명 / 파일명 . 확장자 .. / 파일명 . 확장자

21. 시즌2주의사항 D3.js 코드 쓰는 법은 사람마다 조금씩 다르다

23. 시즌21주차 복습 : 로컬호스트 설정 [ Window ] 5. 명령창이 뜨면 아래의 명령어 입력 ※ 대소문자/띄어쓰기 구분! python -‐m http.server 8888 V V VV 입력하면 위와 같은 문구가 등장

25. 시즌21주차 복습 : 로컬호스트 설정 [ Mac ] python -‐m SimpleHTTPServer 8888 ※ 대소문자/띄어쓰기 구분! V V V ‘터미널’ 여기에 입력하세요

27. 시즌21주차 복습 : 로컬호스트 설정 localhost:8888 명령어 입력 후 인터넷 브라우저 주소창에 아래 문장을 입력하면 로컬호스트 접속 완료

29. 시즌2d3.js는 이렇게 생겼다 Tip d3.js 체인문법 구두점(.)으로 d3 메서드를 체인처럼 연결해 코드 한 줄로 여러 동작을 실행하는 기법. 각각의 메서드에서 처리한 후 결과값을 다음 메서드로 전달하기 때문에 순서가 중요하다. svg.selectAll(“”) .data() .enter() .append(“”);

31. 시즌2d3.js는 이렇게 생겼다 d3._______ (“ ”, )데이터 형식 파일경로 + 파일명 함수 데이터를 불러온 후에만 할 수 있는 작업은 모두 이 함수 안에서 진행

33. 시즌2 var name = 3 ; 선언 키워드 변수명 변수값 대입연산자 ‘변수’ 값을 저장하기 위한 공간. 각 변수는 하나의 값을 갖는다. Tip 자바스크립트 기본 개념 d3.js는 이렇게 생겼다 자바스크립트 변수 이름에는 공백을 넣을 수 없다!

35. 시즌2 ‘함수’ 특정한 작업을 수행하기 위해 필요한 구문들의 그룹 Tip 자바스크립트 기본 개념 d3.js는 이렇게 생겼다 function name() { console.log(data); }; 함수 키워드 코드 함수 이름 자바스크립트의 끝에는 세미콜론 (;) 세미콜론은 특정 자바스크립트 명령 또는 문장이 끝나는 지점을 나타냄

37. 시즌2 ‘익명함수’ 이름이 없는 함수. 이름이 없어 호출이 힘들고 코드 실행기가 익명함수를 만나는 순간 바로 실행한다. Tip 자바스크립트 기본 개념 d3.js는 이렇게 생겼다 function (d) { return d; }; 함수 키워드 코드 전달인자 함수를 ‘호출’한다 = 작업을 수행한다 함수의 실행결과를 돌려받음

39. 시즌2 Tip d3 attr 메소드 d3.js는 이렇게 생겼다 selection.attr (“name”,value) 설정하고자 하는 속성명 속성에 대입할 값 value 상수 함수 데이터를 선택된 문서 요소별로 순서대로 적용 선택된 모든 요소가 같은 속성값을 가짐 첫 번째 value : 데이터값 두 번째 value : 데이터의 인덱스값(순서)

41. 시즌2 ‘익명함수’ 주로 데이터 시각화 속성에 데이터를 대입할 때 사용한다. Tip 자바스크립트 기본 개념 d3.js는 이렇게 생겼다 .text (function(d) { return d ; }) 익명함수 시작 데이터값 불러오기 데이터 전달 요소에 데이터 삽입 익명함수를 실행 해당 데이터 값을 불러옴 데이터를 속성 함수에 전달 속성함수가 해당요소에 데이터를 삽입합니다. 요소 (1) (2)

43. 시즌2d3.js는 이렇게 생겼다 - 데이터 연동 원리 body 선택 svg 추가 .data( ) 데이터 불러옴 빈 그래픽 요소 빈 그래픽 요소 빈 그래픽 요소 빈 그래픽 요소 빈 그래픽 요소 데이터값 데이터값 데이터값 데이터값 데이터값 요소정의 요소정의 요소정의 요소정의 요소정의 .enter( ) 데이터와 문서요소연동 .append( ) 문서요소 정의

45. 시즌2d3.js는 이렇게 생겼다 - 데이터 연동 원리 svg.selectAll(“요소”) .data(data) .enter() .append(“요소”); 모든 문서 요소 선택. 하지만 아직 생성되지 않았기 때문 빈 공간과 동일. 데이터 값을 불러옴 문서요소와 데이터 값을 연동시킴. 만약 요소가 없다면 정의되지 않은 요소를 생성함. 문서 요소의 정의를 추가함.

47. 시즌2d3.js는 이렇게 생겼다 - 오타주의 오타주의 D3.js를 사용하면서 가장 많이 발생하는 오류

49. 시즌2d3.js는 이렇게 생겼다 - 오타주의 코드가 끝날 땐 세미콜론( ; ) ( ), { }, [ ] , 괄호 열고 닫고 지키기 빼먹지 말자 쉼표 ( , ) “ ” 따옴표 열고 닫고 지키기 ; , “ ” { }

51. 시즌2d3.js는 이렇게 생겼다 - 오타주의 문제 힌트 1. d3.csv에서 쌍이 안 맞는 괄호가 있다 2. 세미콜론( ; )이 빠진 부분이 있다 3. 쉼표 ( , )가 빠진 부분이 있다 4. d3에서 속성을 추가하는 .attr 작성법 .attr(“속성” , “속성값 또는 함수”)

52. Neuro Associates ・ Portfolio : neuroassociates.co.kr/portfolio ・ Address : 서울특별시 마포구 상수동 145-1 6F ・ Site : neuroassociates.co.kr ・ Mail : neuro.associates.consulting@gmail.com or info@neuroassociates.co.kr ・ SNS : www.facebook.com/neuroassociatessns ・ Phone : 02-334-2013

[Week12] D3.js_Basic2

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (17)

Similar to [Week12] D3.js_Basic2

Similar to [Week12] D3.js_Basic2 (20)

More from neuroassociates

More from neuroassociates (15)

[Week12] D3.js_Basic2