web
·⏱ 2m
html에서 range를 이용해서 input을 받고 input 변화값 보여주기.
사용자가 직접 키보드를 이용해서 원하는 값을 매번 선택할 수도 있습니다. 그게 기본적인 input이죠. 그런데, 아주 정확한 값을 측정하지는 않아도 되고 대략적인 값만 해도 되고, 또 입력해야 하는 값이 매우 많다면, 그냥 scroll의 형식으로...
Page 5 of 5
javascript
·⏱ 5m
chart.js를 애니메이션을 사용해서 차트 업데이트하기.
chart를 주기적으로 변경하기. 별거 아니고요. 주기적으로 데이터가 변하거나, 업데이트될 경우, 그에 맞춰서 차트도 변경될 수 있도록 하려고 합니다. 비교적 간단하게, chart.js와 d3.js를 가지고 사용해봤습니다. do it d3와 ch...
javascript
·⏱ 2m
d3에서 애니메이션 내에 애니메이션을 넣어보자.
animation 내에 애니메이션 넣기. 그냥, 애니메이션 내에 새로운 애니메이션을 또 넣어서 진행해도 되는지 알아봅니다. 귀찮으니 그냥 코드를 그대로 넣어볼게요. do it. 그냥 같은 형식의 코드를 그대로 넣어주면 잘 굴러갑니다. wrap-u...
others
·⏱ 1m
onclick을 이용하기
아주 간단합니다. 그냥 html의 특정 부분을 눌렀을때, 어떤 javascript요소가 수행되도록 하려면 그냥 을 설정해주면 됩니다. 기본적으로는 에 대해서만 가능한 것 같지만, 도, 도 어떤 html 요소든 모두 가능하죠. 다음처럼 해주면 됩니...
javascript
·⏱ 5m
svg의 요소에 마우스를 올렸을때 내렸을 때 변화 넣기.
svg의 요소에 마우스를 올렸을 때 변하는 것을 넣어보자 png와 같은 그림이 아니라, svg와 같은 형태로 넘기게 될 경우, 해당 요소 내의 특정 부분에 마우스가 올라가거나 했을 때의 액션을 지정할 수 있습니다. png에 비해서 훨씬 강력한 기...
others
·⏱ 4m
d3js로 marker 정의해서 사용하기. 혹은 선에 arrow 추가하기.
d3js를 이용해서 화살표를 그려보려고 합니다. 우리가 아는 대부분의 라이브러리들에서는 이 부분이 무척 쉽게 해결되었던 것 같은데, d3에서는 이 부분이 손쉽게 해결되지 않습니다. 우선, 화살표라는 요소가 따로 존재하지 않습니다. 즉, 화살표를 ...
others
·⏱ 3m
d3 transition 이용하기.
transition을 이용해봅시다. 뭐, 딱히 길게 설명할 것이 없을 것 같으니, 바로 코드로 넘어가겟습니다. wrap-up 함수로 넘겨주는 것이 가능합니다. 순서는 transition, style, duration 이죠.
javascript
·⏱ 2m
javascript에서 colormap 사용하기.
colormap 차트를 그릴 때 일일이 색깔을 지정하는 것은 매우 귀찮은 일입니다. 데이터의 칼럼의 수에 따라서 자동으로 색깔을 지정하고, 예쁘게 만들어주고 싶은데, 몇개가 들어올지 모르는데, 매번 색깔을 배정할 수는 없으니까요. 아무튼 이럴 때...
javascript
·⏱ 10m
chart.js로 차트를 그려 봅시다.
chart.js를 사용합니다. 최근에는 d3.js를 사용하다가 갑자기 chart.js로 넘어왔습니다. 늘 그랬듯이, 대단한 이유는 없고요. 데이터를 활용해서 일반적인 차트를 그려야 하는데, chart.js를 사용하는 것이 손쉽게 할 수 있는 방법...
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 페이지에 내용이 다음과 같이 있다고 합시다....
others
·⏱ 5m
javascript를 웹에서 돌리기.
간단한 인터랙션을 넣읍시다. 간단하게, 웹페이지에서 어떤 버튼을 눌렀을 때 웹페이지의 텍스트가 바뀌는 것을 수행해보려고 합니다. just html html로만 할 경우에는 다음과 같습니다. 일단은 특정 버튼을 누르면 alert가 뜨도록 한것이기는...
others
·⏱ 4m
javascript를 좀 파보고 있습니다.
why javascript suddenly 사실 javascript까지 해야 하나 싶기는 한데, 이유는 다음과 같아요. - 웹 프로그램을 하나 만드는 중이다. - 데이터를 긁어와서 시뮬레이션을 수행하고 시뮬레이션되는 상황을 웹에 그대로 보여주고 ...