javascript
·⏱ 5m
chart.js를 애니메이션을 사용해서 차트 업데이트하기.
chart를 주기적으로 변경하기. 별거 아니고요. 주기적으로 데이터가 변하거나, 업데이트될 경우, 그에 맞춰서 차트도 변경될 수 있도록 하려고 합니다. 비교적 간단하게, chart.js와 d3.js를 가지고 사용해봤습니다. do it d3와 ch...
Page 1 of 1
javascript
·⏱ 2m
d3에서 애니메이션 내에 애니메이션을 넣어보자.
animation 내에 애니메이션 넣기. 그냥, 애니메이션 내에 새로운 애니메이션을 또 넣어서 진행해도 되는지 알아봅니다. 귀찮으니 그냥 코드를 그대로 넣어볼게요. do it. 그냥 같은 형식의 코드를 그대로 넣어주면 잘 굴러갑니다. wrap-u...
others
·⏱ 4m
d3js로 marker 정의해서 사용하기. 혹은 선에 arrow 추가하기.
d3js를 이용해서 화살표를 그려보려고 합니다. 우리가 아는 대부분의 라이브러리들에서는 이 부분이 무척 쉽게 해결되었던 것 같은데, d3에서는 이 부분이 손쉽게 해결되지 않습니다. 우선, 화살표라는 요소가 따로 존재하지 않습니다. 즉, 화살표를 ...
others
·⏱ 3m
d3 transition 이용하기.
transition을 이용해봅시다. 뭐, 딱히 길게 설명할 것이 없을 것 같으니, 바로 코드로 넘어가겟습니다. wrap-up 함수로 넘겨주는 것이 가능합니다. 순서는 transition, style, duration 이죠.
others
·⏱ 5m
flask에서 만든 데이터로 d3js 애니메이션 만들기.
애니메이션을 만듭시다. python 에서 애니메이션, 즉 각 프레임별로 필요한 데이터를 전송하고, 각 프레임을 만드는 작업을 해보려고 합니다. html 페이지를 만들어줍니다. - 처음에는 어떻게 하나 싶었는데 그냥 를 하나씩 올려주면서 진해하면 ...
others
·⏱ 4m
d3js에서 transition 이용하기.
d3js에서 transition 사용하기 d3.interval을 이용하면, 비교적 간단한 애니메이션을 만들 수 있습니다. 그런데, 이 경우, 개체의 움직임이 자연스럽게 움직이게 되지 않습니다. 간단하게 flash를 생각하시면, 플래쉬의 경우 움직...
others
·⏱ 7m
d3에서 enter, exit를 알아보쟈.
enter, exit, update in d3.js 이해하고 나면 간단한 개념입니다. 그리고 이 개념은 사실 d3, Data-Driven Document의 철학과 일치한다고 생각합니다. Data-Driven Document를 한국말로 변환하면, ...
web
·⏱ 4m
flask에서 데이터를 html, javascript로 보내자.
flask에서 데이터를 javascript로 보내자. 저의 주력언어는 파이썬입니다. 파이썬으로 대부분의 데이터 처리를 하게 되는데, 데이터를 시각화하는 측면에서는 javascript, 특히 d3.js가 매우 편한 것 같아요. 그 측면에서, 제가 ...
others
·⏱ 8m
d3 이용해보기 - make three circle
d3js를 이용해서 간단하게 그림을 좀 그려보려고 합니다. 기본적으로는 d3js의 tutorial에 있는 이 포스트를 참고하였으나, 애니메이션을 넣었다는 점에서 차이가 있습니다. 아무튼, 기본 html 페이지에 내용이 다음과 같이 있다고 합시다....
python-libs
·⏱ 14m
mpld3를 이용해서 python의 그림을 웹에 올려보자.
matplotlib.pyplot로 그린 그림을 편하게 html로 바꾸자. 파이썬으로 코딩하는 사람들은 시각화할때 대부분 를 사용할 것이라고 생각합니다. 특히 는 jupyter notebook과 붙으면 매우 굉-장해집니다. 그림을 바로 그리고 고치...