www.attrs.co.kr www.facebook.com/datadesigner2015

1. Data Designer
D3.js
08: D3.js Interative - Update d3.js data with button

2. 꿈꾸는데이터디자이너 시즌2오늘의 수업
이론 실습
1. d3.remove( )
2. svg:title
1. 버튼을 누르면 데이터가 바뀌는 그래프

3. 꿈꾸는데이터디자이너 시즌2
실습

4. 꿈꾸는데이터디자이너 시즌2Update d3.js data with button
오늘의 결과물

5. 꿈꾸는데이터디자이너 시즌2
버튼을 누르면 데이터가 바뀝니다
마우스를 올리면 텍스트 형태의 툴팁이 나옵니다
Update d3.js data with button

6. 꿈꾸는데이터디자이너 시즌2
버튼을 누르면 데이터가 바뀐다
1. 버튼을 만든다 2. 클릭 이벤트 3. 클릭 때마다 데이터를 불러온다
4. 그래프를 그린다
4-1) 이전 요소를 지운다
4-2) 요소를 다시 그린다
5. 마우스를 올리면 나라명이 나온다
.on(“click”) d3.csv
.remove( )
svg.selectAll(“circle”)
.on(“mouseover”
.append(“svg:title”)
Update d3.js data with button

7. 꿈꾸는데이터디자이너 시즌2
.remove( )
[ 참고링크 ] https://github.com/zziuni/d3/wiki/Selections#remove
선택된 요소를 제거한다. remove 함수로 지운 요소는 다시 사용할 수 없다.
d3.select(“circle”)
.remove( )
svg 원 요소를 선택합니다
svg 원 요소를 지운다
Update d3.js data with button

8. 꿈꾸는데이터디자이너 시즌2
svg <title>
[ 참고링크 ] https://github.com/zziuni/d3/wiki/Selections#remove
svg 그래픽 요소에 제목을 붙임. 별도로 표시되지는 않고 요소 위에 마우스를 올리면 나타난다.
간단한 내용을 툴팁으로 만들 때 유용하다.
Update d3.js data with button

9. 꿈꾸는데이터디자이너 시즌2
HTML요소에 특정한 이름을 붙이는 것.
같은 CSS 속성을 적용할 때 많이 쓰인다.
Class
<div class=“a”></div> <div class=“b”></div>
.a {
border : white;
background-color : red;
}
.b {
border : yellow;
background-color :gray;
}
Update d3.js data with button

10. 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