데이터를 웹페이지에 시각화 할 때 단순한 형태의 차트 이미지로 보여주면 뭔가 부족해 보일 수 있습니다. 데이터 시각화를 하고 시각화한 이미지가 실시간으로 움직이며 데이터가 살아 움직이는 효과를 보여 주면 좀 더 멋진 시각화 데이터가 되겠죠. 오늘은 간단한 애니메이션 효과로 이미지를 실시간으로 계속 움직이게 하는 표현을 실험하고자 합니다. 저도 기초부터 하나씩 잡아가는 단계라 깊게는 설명을 못드립니다.
가로x세로 크기의 배경색은 blue로 지정하면 다음과 같습니다.
// 추가
var canvas = d3.select("body").append("svg")
.attr("width",300)
.attr("height",300)
.style("background-color","blue");
처음에 attr()함수에 "background-color"를 지정했는데 왜! 배경색이 안나오지 하고 삽질하고 찾아보니깐 style()함수로 지정해야 되더군요.
[결과]
위 결과 이미지를 보면 캔버스로 시각화 데이터가 그려질 영역이라고 보시면 됩니다.
원이 그려 질 cx가 30, cy 150의 위치에 r=15인 원을 그리고 원의 색은 red로 지정하면 다음과 같습니다.
//
var circle = canvas.append("circle")
.attr("cx",30)
.attr("cy",150)
.attr("r",15)
.attr("fill","red");
위에 캔버스에서 특정 좌표(30,150) 위치에 원을 그립니다.
[결과]
//
var circle = canvas.append("circle")
.attr("cx",30)
.attr("cy",150)
.attr("r",15)
.attr("fill","red");
circle.transition() //시작전 1초 대기(delay)했다가 2초동안 현재위치에서 x축 300위치로 이동한뒤 원 제거
.duration(2000)
.delay(1000)
.attr("cx",300).remove();
circle을 이동하는데 duration(2초) 동안 이동합니다. 대기시간은 1초이고 cx가 300이 될때까지 이동을 2초동안 하게 됩니다. 즉, 초기 circle이 그려진 위치에서 2초동안 cx가 300인 위치까지 움직인다고 보면 되겠죠.
참가로 remove()함수는 제거 함수인데 2초동안 움직인 후 해당 원은 제거 합니다. 원을 한곳에 계속 쌓아 둘 필요는 없으니깐요.
이전 시간에는 기존의 자바스크립트 언어에서 setTimeout()함수로 처리를 했지만 이번에는 d3.interval()함수를 통해서 한번 처리를 해볼까 합니다.
render(); //처음한번수행
d3.interval(render, 3000); //3초간격으로 render()함수 호출함
이렇게 표현하면 3초 간격으로 render()함수가 호출이 됩니다 어떤 의미 인지 아시겠지요. 오늘 배운 애니메이션 효과를 3초 간격으로 동작하도록 해볼까요.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>codingman</title>
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
// 추가
var canvas = d3.select("body").append("svg")
.attr("width",300)
.attr("height",300)
.style("background-color","blue");
function render(){
//
var circle = canvas.append("circle")
.attr("cx",30)
.attr("cy",150)
.attr("r",15)
.attr("fill","red");
circle.transition() //시작전 1초 대기(delay)했다가 2초동안 현재위치에서 x축 300위치로 이동한뒤 원 제거
.duration(2000)
.delay(1000)
.attr("cx",300).remove();
}
render(); //처음한번수행
d3.interval(render, 3000); //3초간격으로 render()함수 호출함
</script>
</body>
</html>
[결과]
단순하게 원 하나를 수평으로 이동시키는 실험이였습니다. 하지만 이 한동작의 원리만 제대로 이해하셔도 많은곳에 사용할 수 있습니다. 가령 막대형 차트에 적용 한다고 상상해 보세요. 각 막대기가 데이터 길이만큼 애니메이션 효과로 움직이면서 막대가 그려지겠죠. 한번 머리속에서 그려 보세요.
오늘은 d3.js에서 제공하는 실시간 동작 명령 interval함수에 대해서 살펴 보았습니다. 그리고 실시간 처리를 할 때 CSS의 부분인 애니메이션 효과를 D3.js함수를 이용하여 간단히 움직이는 동작을 코딩했습니다. 이런 동작 원리를 이해하시면 차트가 처음 열릴 때 움직이는 차트를 한번쯤은 보셨을 꺼에요. 그와 같이 애니메이션 효과를 부여하면 좀 더 멋진 데이터 시각화를 할 수 있습니다.
맛보기로 간단히 원을 수평으로 움직이게 실험했는데 여러분들 수직으로 한번 움직이게 해보세요. 원이 그려지는 초기 위치를 수정하고 cy값으로 변경하시면 되겠죠. 그리고 duration()함수의 시간값을 수정하여 빠르게 또는 느리게 움직이게 해보세요. 또는 interval()함수내 시간값을 수정하여 빠르게 또는 느리게 움직임을 만들어 보세요. 다양한 움직임을 만들어 낼 수 있을 거에요.