14 주차 d3.js 발제 조민정

Scatterplot & SVG 이야기

쪼렙의Scatter Plot 복습

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

LEVEL 1

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

LEVEL 1

//Create SVG elementvar svg = d3.select("body")

.append("svg") .attr("width", w)

.attr("height", h);

캔버스 - SVG 만들기

svg 도형을 정의해주고 , 높낮이를 정해줍니다 (svg 도형이 형태를 잡아주는 작업 )

1

LEVEL 1

svg.selectAll("circle") //.data(dataset).enter()

.append("circle") //

스탬프 모양 정하기

2난 스탬프를 ‘ circle’ 로 찍을거라는 걸정합니다

LEVEL 1

.attr("cx", function(d) { return d[0]; }) .attr("cy", function(d) { return d[1]; }) .attr("r", 5);

스탬프 찍을 위치 , 두께 정하기

3 스탬프를 찍을 위치의 좌표와 ,스탬프의 두께를 정해줍니다 .

LEVEL 1

.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

완성 !

쨘

LEVEL 1

스탬프 사이즈 설정의 문제

데이터 크기에 따른 다양한 스탬프 사이즈를 설정하고 싶다면 ?

LEVEL 2

스탬프 사이즈 설정의 문제LEVEL

2

위로 향할 수록 더욱 커지는 스탬프 모양 설정하기Math.sqrt( h - d[1] )반지름 =

.attr("r", function(d) { return Math.sqrt(h - d[1]);});

스탬프 위로 글씨 추가하기LEVEL

3

도형 위에 글씨를 그리고 싶다면 ? SVG 텍스트를 아래에다가 추가해봅시당 .

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

스탬프 위로 글씨 추가하기LEVEL

3

짠

끝

끝인줄 알았겠지만…

SVG 탐구 결과 발표

SVG 의 재정의

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

SVG 추출법

추출하는 방법은 두 가지1일러로 그려서 직접 소스 따냄 2

SVG 파일을 다운받아서 소스복사1 <<<< 넘사벽 <<< 2

2 번 방법 알랴줌

SVG 추출법

1. thenounproject 접속

SVG 추출법

2. 받고싶은 파일 고르기

SVG 추출법

3. SVG 로 다운

SVG 추출법

4. 소스보기로 열면

SVG 추출법

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

SVG 추출법

활용방법은 대충SVG 코드

1. 배경으로 이미지 사용ex) 지도 위 차트 표시할 때

한국꺼미국꺼

활용방법은 대충SVG 용도

2. 지루한 원 , 막대그래프 대신 생생한 오브젝트로 인터렉티브 차트 만들기 !

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

SVG 활용법

진짜로 끗 .