d3.js scatter plot

1. 14주차 d3.js 발제
조민정
Scatterplot & SVG 이야기

2. 쪼렙의
Scatter Plot 복습

3. 준비물 : Scatterplot 1st.html 파일을 열어주
세요
LEVEL 1

4. 자, 지금부터
캔버스에 스탬프를 찍는
초간단 Scatter plot을 만들어 봅시다!
LEVEL 1

5. //Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
캔버스 - SVG 만들기
svg도형을 정의해주고, 높낮이를 정해줍니다
(svg도형이 형태를 잡아주는 작업)
1
LEVEL 1

6. svg.selectAll("circle") //
.data(dataset)
.enter()
.append("circle") //
스탬프 모양 정하기
2난 스탬프를 ‘circle’로 찍을거라는 걸
정합니다
LEVEL 1

7. .attr("cx", function(d) {
return d[0];
})
.attr("cy", function(d) {
return d[1];
})
.attr("r", 5);
스탬프 찍을 위치, 두께 정하기
3
스탬프를 찍을 위치의 좌표와,
스탬프의 두께를 정해줍니다.
LEVEL 1

8. .attr("cx", function(d) {
return d[0]; // 왜 0?
})
.attr("cy", function(d) {
return d[1]; // 왜 1?
})
.attr("r", 5);
스탬프 찍을 위치, 두께 정하기
왜 return d[0] 와 d[1] 인지는 아시리라 믿으며…
LEVEL 1

9. 완성!
쨘
LEVEL 1

10. 스탬프 사이즈 설정의 문제
데이터 크기에 따른
다양한 스탬프 사이즈를 설정하고 싶다면?
LEVEL 2

11. 스탬프 사이즈 설정의 문제
LEVEL 2
위로 향할 수록
더욱 커지는 스탬프 모양 설정하기
Math.sqrt( h - d[1] )반지름 =
.attr("r", function(d) {
return Math.sqrt(h - d[1]);
});

12. 스탬프 위로 글씨 추가하기
LEVEL 3
도형 위에 글씨를 그리고 싶다면?
SVG 텍스트를 아래에다가 추가해봅시당.

13. svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text(function(d) {
return d[0] + "," + d[1];
})
.attr("x", function(d) {
return d[0];
})
.attr("y", function(d) {
return d[1];
})
.attr("font-family", "sans-serif")
.attr("font-size", "11px")
.attr("fill", "red");
LEVEL 3

14. 스탬프 위로 글씨 추가하기
LEVEL 3
짠

15. 끝

16. 끝
인줄 알았겠지만…

17. SVG 탐구 결과 발표

18. SVG 의 재정의
이미지 파일이지만,
텍스트로(소스 형태)로 사용 가능한 어마무시한 파일

19. SVG 추출법
추출하는 방법은 두 가지
1
일러로 그려서 직접 소스 따냄
2
SVG 파일을 다운받아서 소스복사
1 <<<<넘사벽<<< 2

20. 2번 방법 알랴줌
SVG 추출법

21. 1. thenounproject 접속
SVG 추출법

22. 2. 받고싶은 파일 고르기
SVG 추출법

23. 3. SVG로 다운
SVG 추출법

24. 4. 소스보기로 열면
SVG 추출법

25. 5. 외계어 같은 아이들이 바로 SVG의 코드입니
다.
SVG 추출법

26. 활용방법은 대충
SVG 코드
1. 배경으로 이미지 사용
ex) 지도 위 차트 표시할
때
한국
꺼미국
꺼

27. 활용방법은 대충
SVG 용도
2. 지루한 원, 막대그래프 대신
생생한 오브젝트로 인터렉티브 차트 만
들기!

28. 조만간 기깔나는 활용법을 들고올게요! (언..언제?)
SVG 활용법

29. 진짜로 끗.