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