공부정리

이때까지 막대그래프를 가지고 데이터를 추가하고 삭제하는 시각화를 진행해보았다. 이 두가지를 함께 응용하여 추가와 삭제가 동시에 이루어지도록 해보자. 전체코드는 아래와 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 1..

이번에는 원래 있던 데이터에서 데이터를 제거하여 각 축과 영역에 맞게 시각화를 진행하고자 한다. 전체코드는 아래와 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 11..

이전시간에 막대 그래프와 산포도에 동적인 변화를 주었다. 이번에는 막대 그래프에서 클릭 시, 새로운 문서요소가 추가되어 막대가 생성되는 시각화를 본다. - 코드 - 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 10..

이번에는 막대그래프가 아닌 산포도를 갱신해보자. 변경사항은 1 - 클릭이벤트에 따라 새로운 데이터를 랜덤한 값으로 생성한다. 2 - 데이터 갱신이 일어나면 트랜지션이 발생한다. 3 - delay는 없고 1초안에 한번에 트랜지션이 일어나며 갱신 후 새로운 트랜지션이 발생한다. 4 - X, Y 축도 갱신한다. 5 - 산포도의 반지름을 모두 같게 한다. 전체코드를 보자. 주석으로도 내용을 표시하였다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 6..

지금까지 정적인 테이터를 가지고 시각화를 하였다. 이제는 시각화에 변화를 통해 모션을 통해 트랜지션을 사용하여 시간에 따른 처리를 해보자 먼저 막대차트에 척도를 적용해보자. 1 2 3 4 5 var xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, w]) .paddingInner(0.05); //rangeRoundd[0,w]는 0에서 시작해서 w로 끝나는 대역들을 계산해서 그 조각들을 치역으로 지정 D3의 서열척도는 시각 요소를 같은 간격의 특정 순서로 위치시키려 할때에도 사용하여 그 코드는 .domain(d3.range(dataset.length) 이다. range()를 통해 순서대로 값을 빠르게 생성할 수 있다. 파이썬..

D3.js : 축 축은 척도와 형태가 거의 유사하다. 축은 우리가 정의한 파라미터를 가진 함수이며 척도와 다르게 축 함수를 호출하면 어떤 값을 반환하는 대신에 선, 라벨, 구분자를 가진 시각적 요소가 생성된다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 D3: A simple, unstyled axis /* No style rules here y..

척도는 입력되는 정의역(domain)과 출력되는 치역(range)을 매핑한 함수를 말한다. D3 reference를 보면 자세히 볼 수 있다. 데이터의 값들은 척도를 사용하여 시각화에 적절한 값으로 비율을 바꾸어 쉽게 매핑할 수 있다. 여기서는 선형척도만을 다루어 본다. 정의역이란 입력 가능한 데이터 값의 범위를 말하며 치역은 화면에 출력하기 위한 데이터 값의 범위라 생각하자. y=f(x)함수처럼 생각하면 이해하기 쉽다. 선형척도는 D3가 수행하는 수학적 정규화 과정이며, 정의역을 기준으로 정규화되고 정규화된 값은 치역을 기준으로 비율이 변경된다. 1 2 3 4 5 6 7 var scale = d3.scaleLinear(); // 척도함수 생성 scale.domain([100, 500]); // 정의역의..

이전 시간에 SVG를 이용하여 시각화를 진행할 것이다. 이번에는 '산포도'를 그려보자 산포도는 가로, 세로 즉, x y 축 위에 관련된 두 값을 넣는 시각화이다. 데이터는 Javascript의 배열에 배열을 담은 원소로 나타낸다. C++의 pair 컨테이너와 비슷하다고 생각하면 좋을 것 같다. 이전 막대그래프와의 차이는 산포도이기에 원으로 표현하는 것이다. SVG의 'circle'을 사용한다. 이때까지의 코드를 보면 아래와 같다. 1 2 3 4 5 6 7 8 9 10 11 12 13 var w = 500, h = 100; var datas = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85,..

이번에는 SVG를 이용해서 시각화를 진행해보자. SVG는 벡터로 이미지를 표현한 것이며 백터(vector) 이미지를 표현하기 위한 포맷으로 w3c에서 만든 백터 이미지 표준이다. 특징은 이미지를 확대하든 변형하든 깨짐이 없는것이 특징이다. 먼저 산점도부터 보자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 var w = 500, h = 200; var data3 = [5, 10, 20, 30, 50]; var svg = d3.select('body').append('svg') .attr('width', w).attr('height', h); //SVG객체를 참조하기 위함 var circle = svg.selectAll('circ..

데이터를 이용해서 차트를 만들어보자. 먼저 예시 코드를 보며 이해해보자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 div.bar{ display: inline-block; width: 20px; height: 75px; margin-right: 4px; background-color: teal; } div.bar2{ display: inline-block; width:15px; height:75px; margin-right:2px; backgro..