カテゴリー: データ可視化

カテゴリー
データ可視化

hexyzland – 数式で六角形の図形表示を動かす遊び場サイト

Hexyzland トップページ

hexyzland は、六角形ベースの図形を6つの変数と数式で動かす、プログラミング実験場です。

Hexyzland トップページ

6つの変数は t(時間), r(中心からの距離), a(角度), x,y,z(3方向の座標) となっていて、各ヘックスの値を -1(真っ赤) から 1(真っ白)の間に変えることでヘックスのサイズと色が変わります。

あとは数学的な関数を組み合わせればアニメーションのできあがり。チュートリアルにたくさんの実例が出ています。

作成した図形は URL が生成されるので SNS 等で共有することもできますし、動いているところを動画として保存することもできます。

GitHub にサイトのソースコードも公開されています。

tixyland という正方形ベースの同様の遊び場があり、hexyzland はそれにインスパイアされたものだそうです。

tixy.land トップページ

via reddit/programming

カテゴリー
データ可視化

StatusBase – gitで記録するウェブサイト状態モニターツール

適当なwebサイトの死活状況をStatusBase on Vercelで作ってみたもの

StatusBase (status-base/statusbase-nuxt) は、ウェブサイトの運用状況を記録して表示するためのツールです。

StatusBase GitHubリポジトリ

AWSとかTwitter APIとか、サービスの提供状態を時系列でまとめて出しているページが、サービス本体とは別のところに(=本体が落ちても巻き込まれないように)公開されていますよね。ああいうページをセルフホストで作るためのものです。

Vue + Nuxt.js で作られ、オープンソースで公開されている StatusBase は、モニターした対象サイトの up/down を git のコミットで記録していきます。GitHub Actions で定期実行させ、Nuxt で紹介されている多種のホスティングサービスに結果を送るように設定すれば、それだけで一定時間おきに指定したサイトの状態をコミットして、直近の履歴を表示してくれました。

適当なwebサイトの死活状況をStatusBase on Vercelで作ってみたもの

サイトのダウンに関してレポートを載せたい場合は、これも markdown のドキュメントを置くだけ。

サイトがダウンした時はeメールで通知もしてくれるのですが、これも GitHub issues を使って実現しています。

作者の @zernonia さんによれば、監視部分のスクリプトの GitHub Actions による定期実行は時刻の正確性に欠けるということです。個人のホビーサイトではそれほど気にならないとは思いますし、無料枠でここまで簡単に動かせてしまうのが申し訳ないぐらいですね。

via twitter

カテゴリー
データ可視化

3D Order Book – 仮想通貨の売買状況をブラウザで高速表示

3D Order Bookは、Bitcoin などの仮想通貨のリアルタイムでの取引状況をグラフにして見るwebサイトです。ただし、そのグラフは立体で表現されています。

上のスクリーンショットだと、左手の緑が買気配、右手の赤が売り気配の株数。売買が成立した時は谷底に黄色い球が見えますね。

スターウォーズの有名シーンのような X-Wing モードでは、時系列が逆で過去から現在へ向かって移動するように描画がされます。

Bitcoin 市場の動きを3D化した中を FPSのように動き回る

また、FPSモードで3Dグラフの中を自由に動き回ることもできます。なかなか思い通りに動けませんが。

ソースコードはGitHubで公開されているので、仮想通貨でなくても他の株式市場のデータなどを突っ込むことができるでしょう。