요약

'D3.js + Backbone.js + Require.js'에서 재사용 가능한 그래프를 만들 준비를 했습니다.

내용

꽤 시행착오 중이지만,
「D3.js와 Backbone.js를 조합해, 웹 브라우저상에서 보다 스트레스 없이 그래프를 조작할 수 있게 되고 싶다」
라고 생각하고 있으므로 작성한 데모를 투고해 보겠습니다.

데모(꽤 대변인 코드입니다.나중에 정리합니다, 나중에..)
D3.js + backbone.js + require.js
github은 여기

「타율」, 「홈런」, 「OPS」, 「도루」를 클릭하면 각각에 대응해 x축, y축을 재묘화 합니다(실제는 더 세련된 애니메이션을 시키고 싶었다).
※데이터는 프로야구 Freak씨의 데이터를 사용하고 있습니다.

D3.js + backbone.js는 여기을 참조했습니다.

흔한 데이터로 하나의 레코드에 여러 지표가 있으며,
상관을 보거나 특수한 데이터를 찾는 일이 있을까 생각합니다.
「Excel」을 이용하면 일일이 그래프의 지정 범위를 변경할 필요가 있어,
꽤 어렵습니다.

그래서 입력 데이터에 있는 항목을 바로 바꿔 변경할 수 있도록 해 보았습니다.

야구 이야기

이번에는 소위 세이버 메트릭스 이야기에서
「 OPS 라고 득점 상관 높지!」
같은 것이 잘 가시화할 수 있으면 좋겠다고 생각했습니다만, 작계라면 이마이치군요.
득점과 도루와의 상관은 이마이치이지만 OPS가 아직 상관있을 것 같다는 것을 알 수 있습니다.
※ OPS = 출루율 + 장타율 (On-base plus slugging)

미래

현재는 x축, y축 밖에 움직일 수 없지만 더욱 부드럽게 애니메이션 등으로 변화시키려고 합니다.
또한 기계 학습 과정을 D3.js로 시각화
에서 쓴 것 같은 클러스터링과 맞추어도 재미있을 것 같은 생각이 듭니다.

앞으로는 비동기 통신 등과 함께 재사용 가능하고 인터랙티브한 그래프(또한 유지보수라면 좋다)를 작성해 갈까 생각합니다.