�ݺ�ߣ

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

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to [Week12] D3.js_Basic2 (20)

More from neuroassociates (15)

[Week12] D3.js_Basic2