ソーシャルかぶコン2013

アプリアイデア企画部門応募作品

可視化ツール詰め合わせ

応募者：pingineer

作品の目的

今まで株式市場に縁がなかった人達に株式市場をアピールする

株式市場は動いているんだということを実感してもらう

無味乾燥としたチャート図や株価等ではなく、株式市場に全く馴染みがない人達にとっても直感的に把握が可能な見て楽しいアプリケーションとして、株式市場での取引を可視化する。

応募テーマとの確認

株式市場や上場企業の魅力を投資未経験の方々へ発信する作品 投資未経験な方々にも見て動きを楽しめる作品とする。

株式市場が生活の一部に感じられるような生活者目線の作品

馴染みのある企業名が流れていく等して、株式市場の動きは生活にも関わっているのだということを直感的に理解できる作品とする。

既存の株式投資アプリケーションの枠に収まらないような斬新な切り口の作品

既存のチャート図などではなくダイナミックな動きのある可視化を行い魅せる作品とする。

想定される使用シーン等

Webサイト上で公開し、いつでも誰でも見れるようにする

巨大なスクリーンで展示

画像はソーシャルかぶコン2013のSlideShareから拝借

http://www.slideshare.net/kabucontse/how-tover20-17126418

使用ソフト、開発・制作・動作環境等(予定)

使用ソフト クライアントサイド

Three.js

サーバサイド perl

node.js

使用データ ソーシャルかぶコン2013提供データ(歩値データ)

東証上場銘柄一覧(http://www.tse.or.jp/market/data/listed_companies/)

開発環境・制作環境 ノートPC（クライアント）

Windows8(chrome、Teraterm)

さくらインターネットVPS（サーバ） Linux(vi、sed、awk、perl)

動作環境 html5に対応したブラウザ(IE10、Firefox、chrome、safariで動作確認)

PC(Windows、MacOSX、Linux)

iOS(iPhoneで動作確認)

Android

時間

取引高

銘柄番号

歩み値によって色を変える

取引高の大きいと高くなる

可視化案1

(アプリ開発に応募したSTOCK STARの棒版)

銘柄番号によって横軸の座標が決まり、時間の経過ともに奥から手前に流れていく

歩み値

取引高

銘柄番号

取引が成立するとバーが生える

バーは時間とともに縮小していく

可視化案2

取引高の大きいと高くなる

バーの色は歩み値が

・高くなる：赤

・低くなる：緑

・同じ：黒

バーが表示される場所は

・銘柄番号で横軸の座標

・歩み値で縦軸の座標

がより決まる

ある1銘柄について表示

取引があると玉が落ちてくる

13:15 表示している取引時間が成立した時間

可視化案3

ボールの色は歩み値が

・上がったら赤

・下がったら緑

・横ばいで白

取引高でサイズを変える

物理エンジンを使用し、落下してきた玉が衝突すると弾かれて動くように摩擦係数等を調整しておく

取引の累積数が多くなってくるとゴロゴロと動きが出て面白くなってくると予想(処理は重くなる)

歩み値

終値側 始値側

上がったら赤

下がったら黒

取引高によって太さを変える

可視化案4

かば子先生がスティックを振るとボールが出る

ボールは銘柄の本社所在地へ飛んでいく

目的地についたらバーを高くする

• バーは取引高の累計を表す

• ボール

• 取引高に応じて大きさを変える

• 歩み値に応じて色を変える

可視化案5

画像はそれぞれ以下から拝借しました

日本地図：wikipedia

かば子先生：アプリ開発部門のスライドショー