common tools
３次元散布図
- x,y,zのcsvデータを可視化
3Dの散布図を見るツールをplotly.jsで作ってみた
ドラッグできるcanvas
- canvasに描いたものを、ドラッグで移動したり拡大縮小したりする
- Reactでcanvasの全体をドラッグして移動、拡大縮小
Reactで子が計算したサイズを親に反映させる
- 子コンポーネント要素がクリックされたらリサイズし、それに合わせて親要素のSVGの幅、隣の子のx位置を変更する
- Reactで子が計算したサイズを親に反映させる
SVG要素間のクリックの連携
- SVGの要素をクリックしたら、別の要素を変形させる
- Reactで、SVG要素の変形はframer-motionモジュールを使用
- Reactで、SVGをぬるぬる動かす
Reactでテキスト(text)と矩形(rect)のサイズの調和
- テキストに合わせて矩形のサイズを変更し、また矩形に合わせてテキストを改行させる
- SVGでtextがぴったり収まるrectを描く
ドラッグ可能で無限スクロールできるSVG
- ドラッグ操作で、SVG要素を移動したり、拡大縮小する
- D3.jsを使用
- 無限にスクロールできる（メモリが許す限り）
- D3.jsで、ドラッグで縦横無限スクロール
Minecraft
スライムチャンクファインダーα
- 有名なSlime FinderのページをReact(TypeScript)で作成
- α版は基本機能として、正しい位置を出せることを確認
- JavaScriptでJavaのランダム値を再現しています
- マイクラのスライムチャンクファインダーを作ってみた
スライムチャンクファインダー（正式版）
- Minecraftのスライムチャンクを探すツールです
- ドラッグで周辺のチャンクから探せます
- Java版と、Bedrock版の両方に対応
- マイクラのスライムチャンクファインダーを作った