プログラム練習記5日目＿ダイナミックな散布図をつくる
D3.js練習5日目です。
今回も散布図をD3.jsでつくりました。
今回は乱数をプログラミングして、少し動的なグラフになっています。
ブラウザをリロードするたびにグラフがかわりますよ(*‘ω‘ *)
それから軸のラベルに％を入れることもできました。
というわけで、今回のプログラムもchat-GPTさんに解説してもらいます。
生成AI このプログラムは、D3.jsを使用して動的に生成されたデータを用い、線形スケールで散布図を描画し、軸を追加するものです。まず、空の配列に50個のランダムなデータポイントを生成します。それぞれのデータポイントは、x軸とy軸の値が乱数で設定されます。次に、x軸とy軸のスケール関数を作成します。x軸スケールはデータの最大値に基づいて0から最大値までの範囲を、y軸スケールも同様に0から最大値までの範囲を取ります。
円の半径を設定するスケールも定義され、これにより各データポイントの円の大きさが決まります。さらに、新しい数値整形関数が定義され、軸のラベルをパーセンテージ形式で表示します。次に、x軸とy軸が定義され、それぞれのスケールと整形関数が適用されます。
SVG要素を作成し、各データポイントに対応する円を描画します。各円のx座標、y座標、および半径は、スケール関数を使用して計算されます。最後に、x軸とy軸がSVG要素に追加され、整形されたラベルと共に表示されます。このプログラムにより、動的なデータセットを基にしたインタラクティブな散布図が完成します。
chat-GPTに相談だ
動的なプログラムを学んだので、
chat-GPTに、●を使ったプログラムを相談してみました。
ひろあき codesondbox上で動作するjavascriptのd3.jsを用いて宇宙を旅するようなレンダリングのhtmlを作成してください。
とお願いしてみました。
その結果、できたのがこんなプログラム。
生成AI 宇宙を旅するようなレンダリングを作成するためには、D3.jsを使って星や惑星を描画し、アニメーションを加えて動きのあるシーンを作成することができます。以下は、CodeSandbox上で動作するHTMLとJavaScriptのサンプルコードです。
このコードでは、星や惑星が背景にアニメーションされ、宇宙空間を旅しているようなエフェクトを作ります。さらに対話的なプログラムにするために、ユーザーが星の移動速度を制御できるようにスライダーを追加します。これにより、ユーザーはX方向とY方向の速度をリアルタイムで調整でき、宇宙空間の旅をよりインタラクティブに楽しむことができ、星の移動速度をリアルタイムで変更できます。
米作りが始まっています。
閑話休題。
前振りが長くなりましたが、近況について少し報告しておきたいと思います。
米作りが始まってきています。
こちらの写真は、
去年の田植えまでの苗づくり、
田んぼの準備や代かき後の田んぼの写真などです。
今週の初めにお米の種もみを水に漬けて苗づくりがスタートしたところです。
今週末にはその種もみを育苗箱に播いて苗づくりが1ヶ月ほど続きます。
その苗ができるまでに田んぼの準備をするという予定です。
夏クレソンの準備のために、週に何度か九州山地のほうへ向かっています。
阿蘇など、標高の高いところは5月初旬から田植えをしているので、
稲が植わった水田を目にすると、
熊本の田んぼでもコメ作りの準備を頑張らねば！( ˘•ω•˘ )
と刺激をもらっている今日この頃です。
まとめ
D3.jsで動的な散布図を作るプログラミング練習記5日目。
今回は乱数を使って、ブラウザをリロードするたびに異なるグラフが表示されるようにした。
また、軸ラベルにパーセンテージを追加してみた。
これもすべてChat-GPTさんのおかげで、今回のプログラムもわかりやすく解説してもらった。
次に、星や惑星がアニメーションする宇宙を旅するようなプログラムを作成。
星の移動速度をスライダーで調整できるようにして、さらにインタラクティブな体験に。
閑話休題、米作りが始まった。
九州山地の風景を眺めつつ、田植えの準備に励んでいる。
