[D3.js] 난수 실험 참조 : 오늘은 d3에서 제공되는 난수 함수들에 대해서 간단히 어떤 난수 만드는 함수들에 대해 살펴볼까 합니다. 1. 난수 함수 d3.randomUniform(최소,최대) : 균일한 분포 난수 d3.randomNormal() : 정규(가우스)분포 난수 d3.randomLogNormal() : 로그 정규 분포 난수 d3.randomBates()

해피빈(당신은 작지만 큰 기부천사) 예전에 해피빈을 주제로 post를 쓸까 하다가 누군가 스팀잇에서 post해서 그냥 넘어갔는데 이런 글들이 많아지면 좋을 것 같아서 그냥 post 한편을 남깁니다. 본 POST의 취지는 날씨가 추워지고 있습니다. 작지만 1일1콩으로 사랑의 나눔을 매일 실천합시다. 콩 모우기 네이버 계정이 있으면 네이버 안에서 활동을 하면 아래와

[D3.js] Pixi.js의 이미지 랜더링 Pixi.js 홈페이지 : 오늘은 Pixi.js를 좀 더 실험을 하고 싶어서 Pixi.js에 나와 있는 예제 중 하나를 더 실험해 보았습니다. 1. Pixi.js 예제 어제 간단히 소개만 했는데 각 예제들을 다시 한번씩 살펴 보았는데 재밌는 것들이 많더군요. 예제 항목을 누르면 위와 같은 창이 뜨는데 왼쪽 항목에

[D3.js] Pixi.js 소개 Pixi.js 홈페이지 : D3.js를 공부하다가 우연히 찾은 2D WebGL 렌더링 라이브러리 API를 소개합니다. 저도 잠깐만 몇분정도 다루어 본 것이 전부라 자세히는 설명 드리기 어렵지만 한번 공부해 볼만한 것 같아서 간단히 소개합니다. 1. Pixi.js 사이트 링크 된 사이트에 들어가시면 다운로드와 시작이 있는데 시작으로

[D3.js] zoom 효과 D3.js 공식홈페이지 : 오늘은 간단히 zoom 효과만 실험을 하겠습니다. 1. zoom()함수 .call(d3.zoom().on("zoom", function () { svg.attr("transform", d3.event.transform) })) zoom()함수에 on()함수에서

[D3.js] 이미지 추가 D3.js 공식홈페이지 : 오늘은 간단히 이미지를 추가하는 방법을 살펴보도록 하죠. 1. HTML 이미지 태그 HTML에서 svg에 이미지 삽입하면 아래와 같이 코딩 됩니다. <svg width="300" height="300"> <image xmlns:xlink="

[D3.js] 키보드 이미지 조정기 d3 공식홈페이지 : 오늘은 어떤 실험을 할까 고민하다가 주제를 결정하지 못했는데 문득 고전 스네이크 게임이 생각나서 한번 캐릭을 조정하는 걸 표현을 해볼까 하는 생각에 정석은 아닌데 생각나는 느낌대로 코딩해서 실험을 해보았네요. 오늘 실험 내용은 Circle(원)을 스네이크라고 생각하고 켄버스 영역 내에서 키보드로 조정해보는

[D3.js] 아날로그 시계 만들기 참조 : 오늘은 실험 할 내용이 없는지 알아보기 위해서 D3.js 튜토리얼을 구경하다가 우연히 아날로그 시계를 튜토리얼로 만든 post가 있더군요. 대충 이미지와 arc()함수를 사용한 것만 보고 아날로그 시계를 직접 만든 다면 어떻게 코딩 할까 상상하면서 arc()함수를 사용하여 만들어 보는 실험을 하였습니다. 그러면 어떻게

[D3.js] d3.js + vis.js + steem.js 짜집기 [ 참조 ] 스팀파워 계산 출처 : Steem-Js for dummies #1 : How to calculate the current Voting Power @stoodkev님 소스 계기판 출처 : Pasha’s Block 59c2c7483fb61070486835d15c807941 오늘은 오픈

[D3.js] setInterval() 함수로 실시간 처리 참조 : [D3.js] Data 실시간 처리 [D3.js] Timer 함수 지난 시간에 두가지 방법으로 데이터를 실시간 처리를 하였습니다. setTimeout()함수를 이용하여 순환 호출방식으로 반복 동작을 하거나 d3.timer()함수로 반복 동작을 수행했었습니다. 오늘은 setInterval()

[D3.js] vis.js 라이브러리 시각화 D3.js 공식 홈페이지 : vis.js 홈페이지 : 예전 post에서 D3.js 기반의 Britecharts 라이브러리 API 함수에 대해 이야기 했었는데 이번에 새롭게 찾은 vis.js 라이브러리를 소개 할까 합니다. 1. vis.js 라이브러리 vis.js 홈페이지 : 링크된 주소로 가면 해당 사이트로 이동하게

[D3.js] d3.on() 함수의 Key 이벤트 참조 : [D3.js] 드래그(d3.drag()) 함수 [D3.js] d3.on() 함수 [D3.js] d3.on() 함수의 클릭 이벤트 지난 시간에 d3.on()함수로 "click" 이벤트를 실험 했었습니다. 그러다 문득 키보드 키를 눌렀을 때 이벤트 발생이 궁금해서 찾아보니

[D3.js] d3.on() 함수의 클릭 이벤트 참조 : [D3.js] 드래그(d3.drag()) 함수 [D3.js] d3.on() 함수 오늘은 d3.on()함수에서 빠진 부분으로 클릭 이벤트를 실험하는 시간으로 채우겠습니다. 1. d3.on("click", 동작) 함수 .on("click",동작함수) : type이 click으로

[D3.js] d3.on() 함수 d3.on()함수에 대해서 이야기가 하고 싶어 오늘의 주제로 결정 했습니다. 지난시간에 드래그 함수 편에서 이 함수를 사용하여 Circle(원) 이미지를 캔버스 영역에서 자유자재로 이동을 시켰습니다. 그때 사용한 type은 "start", "drag", "end" 등을 이용하여

[D3.js] 제거(remove()) 함수 오늘은 제거 함수에 대해서 알아보는 시간을 갖겠습니다. 별다른 내용은 없습니다. 구지 remove()함수를 1일 post에 할애할 정도의 내용을 갖고 있지 않습니다. 간단히 정의를 하더라도 선택한 객체를 제거한다는 의미를 가지고 있는 것일 뿐 특별한 내용은 없습니다. 하지만 remove()함수를 잘 써야 하고 어떤

[D3.js] margin 설정 오늘은 차트 영역인 캔버스 영역에서 margin을 설정하는 방법에 대해서 이야기 하고자 합니다. 이전 축 post를 하기전에 이야기 했어야 했는데 순서가 바뀌었네요. 자 본격으로 margin 틀을 만들어서 좀더 효율적으로 차트를 만들어 볼까요. 1. margin 설정 위 그림으로 보면 전체 캔버스 회색부분에서 부분 연한노란색

[D3.js] 드래그(d3.drag()) 함수 오늘은 차트의 이미지를 움직이게 하는 드래그 함수에 대해서 살펴보고자 합니다. 지난 시간에는 로또볼로 너무 이상한 쪽으로 post 흐르는 것 같아서 멈추고 다시 원래 코스로 복귀 합니다. 사실 로또볼 다음 내용이 좀 더 있지만 사행성 내용으로 post가 흐르는 것은 약간 좀 그렇더군요. d3.js로 로또 관련해서

헬게이트 산책 근처 아파트 단지 뒤쪽에 그리 높지 않은 야산이 있었고 완만한 산책로가 있다는 소리에 야산 주변을 입구를 찾았다 대충 조금마한 공원 같은 산책로이겠지하고 신발은 그냥 캐주얼화에 추워서 가을잠바를 입고 중무장하고 산책로를 찾아 다녔다. 한참을 도로가로 1km정도 걸어도 산책로 입구는 보이지 않았고 오기가 생겨서 보일 때까지 하염 없이 걸었다. 드디어

[D3.js] 실제 데이터로 로또볼 출력하기 참조 : [D3.js] CSV 파일 읽는법 [D3.js] 로또볼 만들기 지난 시간에 이어 로또 사이트에서 제공되는 데이터를 다운받아서 로또볼로 출력해보는 실험을 간단히 해보겠습니다. 1. 각 회차 당첨번호 CSV 파일로 만들기 [1 단계] 로또 사이트 가시면 아래 그림에서 보는 것처럼 원하는 회차 구간의 당첨번호를

[D3.js] 로또볼 만들기 계속 함수에 관한 내용만 다루다 보니 뭔가 재미가 없어 보여요. 로또볼을 만들면 좋을 것 같아서 예전에 따로 만들어 놓은 실제 로또 코딩을 했던 일부분인 로또볼만 가져와서 간단히 실험을 해보도록 하겠습니다. 1. 로또 사이트 실제 로또볼 이미지 관찰 로또 번호를 본지가 오래 되어서 827회까지 회차가 나왔나 보네요. 당첨 번호를