プログラミング練習記＿6日目動き、遷移、更新
今日もプログラミングの練習記から。
今回で６日目です。
今日のサンプルデータでは、ついにインタラクティブで動的で対話的なグラフをつくりました。
画面の文章をクリックするとグラフが変化しますよ(*^▽^*)
プログラムの解説をいつものようにchat-GPTさんにお願いしました。
生成AI このJavaScriptプログラムは、D3.jsを用いてインタラクティブな棒グラフを作成し、データの更新や遷移を学ぶためのサンプルコードです。このプログラムは、“Interactive Data Visualization for the Web”という書籍から引用されています。以下にその解説を示します。
## プログラムの概要
プログラムは、乱数を生成して棒グラフを作成し、ユーザーがクリックすることでデータを更新するインタラクティブなグラフを表示します。初期のデータセットは、20個のランダムな値で構成されています。
## 主な機能と説明
1. **初期設定**:
– グラフの幅と高さを設定し、データセットを初期化します。
– `xScale`と`yScale`のスケールを設定し、x軸は`scaleBand()`を、y軸は`scaleLinear()`を使用しています。
2. **SVG要素の作成**:
– `d3.select(“body”).append(“svg”)`でSVG要素を作成し、幅と高さを設定します。
3. **棒グラフの描画**:
– `selectAll(“rect”)`を使用して棒を作成し、各棒のx座標、y座標、幅、高さ、および色を設定します。色はデータ値に基づいて青色の濃淡が変わります。
4. **ラベルの追加**:
– 各棒の上にデータ値を表示するためのテキストラベルを追加します。テキストの位置やスタイルを設定します。
5. **クリックイベント**:
– ユーザーがテキストをクリックすると、新しいランダムなデータセットが生成されます。新しいデータセットは元のデータセットと同じ長さですが、各値は0から24のランダムな整数です。
– `svg.selectAll(“rect”).data(dataset)`で新しいデータに基づいて棒の位置、高さ、および色を更新します。この更新は`transition()`を使用してアニメーション化され、各棒の遅延時間は棒のインデックスに基づいて計算されます。
– 同様に、テキストラベルも新しいデータ値に更新され、位置が調整されます。
このプログラムは、D3.jsを用いたインタラクティブなデータビジュアライゼーションの基礎を学ぶための良い例です。データのバインディング、スケーリング、SVG要素の操作、アニメーションによる遷移など、D3.jsの重要な機能が含まれています。
熱中症体験記
閑話休題、
昨日は米の種まきで一日快晴の空の下におりました。
結論から言うと、熱中症になってしまったようです。
種まきから翌日の今日、午後から体調を崩してしまい、
病院で点滴を打ってもらいました。
熱中症の症状が、思っていたものと違ったので、
記録がてら今日のブログに書き留めておこう思います。
筋肉が痛いのはツライ
午前中は何ともなくて、
午後から急に背中が痛いなーと横になっていると眠れないほどの痛みと、
熊本弁で言うところの”からすまがり”、つまりこむら返りしたような痛みが腕にでました。
しばらく横になってもいっこうに良くならないので、
病院へ行き点滴をしてもらうとあっという間に痛みもひいていきました。
おそらく脱水でしょうね。熱中症のようです。
という診察でした。
熱中症でも筋肉に痛みがでるの！！
とびっくりしました。調べてみると、熱中症の症状に筋肉の痛みが書いてありました。
足・腕・腹部の筋肉に痛みをともなったけいれん、腹痛などが起こります。
引用元：日本医師会 健康の森／熱中症
筋肉が痛むとこんなにツライんですね。
これからより暑くなるので、水分補給をきっちりしていかなきゃと反省でした。
また、そもそも暑い日の翌日に熱中症になることがあるのか？
と疑問に思いましたが、
熱中症が暑い日の翌日に起きることがある（当日に発症せず）
熱中症は暑い日に起きることが多いのですが、まれに、暑かった日の翌日に発症することがあります。
つまり、熱中症が起きてもおかしくないほど暑い日に起きず、「なんとか乗り切ることができた」と安心した翌日に、前日よりは気温が下がっているのに体調不良に見舞われることがある、ということです。
引用元： ヒロオカクリニック 2021年8月19日熱中症が暑い日の翌日に起きることがある（当日に発症せず）
とあるように、暑い日の翌日に熱中症の症状が出ることもあるそうなので、
暑い日を乗り越えたと思っても油断大敵のようです。
まとめ
プログラミングの練習も6日目。
今日はついに、クリックするたびにグラフが動き、変わるインタラクティブな棒グラフを作りました。
初期データは20個のランダムな値で、クリックすると新しいランダムなデータセットに更新されます。
これにより、データの更新や遷移を学びます。
さて、昨日は快晴の下で米の種まきをしていたのですが、熱中症になってしまいました。
体調が悪くなったのは翌日で、午後から背中が痛くなり、腕に痛みが走り、病院で点滴を受けました。
脱水が原因のようで、筋肉の痛みがひどく驚きました。
調べると、熱中症の症状に筋肉の痛みがあると知り、水分補給の大切さを痛感しました。
暑い日は油断せずに、翌日も注意が必要ですね。
