プログラミング練習記＿7日目　D３で棒グラフをつくる」をD3公式サイトをみて復習する/稲の苗が順調にそだっています

はえました！

何が？と言いますと、稲の芽がちゃんと出ていて成長していました。

種を播いたのが5月の19日でした。

こちらのその時の写真です。

それから3週間の時間が過ぎて、田植え箱を覆っていたシートをはずして成長具合があらわになったのです。

⇓

少しイノシシが歩き回ってはげているのがくやしいですが、

稲は立派な苗になろうとしています。

プログラミング練習記＿7日目　最新情報を確認する

プログラミングの自習も続けています。

目標にしている「通い農業支援システム」のマニュアルも読めるようになってきています。

とはいえ、まだまだ分からない部分も多いのでまだまだ精進せねばと感じています。

今週からは動画でD3に関連するものを見ていて、

改めてすごいなーと感じたので、D3とjavascriptを見直し中です。

手にとった本の情報が少し古いので、公式サイトのコードと違うところがあるので、

基本の棒グラフの作り方をブラッシュアップするべく、本と公式サイトでのグラフの作り方を確認しました。

アウトプットこそ記憶の定着になるので、

ブログで記事にすることでアウトプットにしたいと思います。

「D３で棒グラフをつくる」をD3公式サイトをみて復習する

D3公式サイトの基本的な棒グラフのコードを現在使っている「インタラクティブデータビジュアライゼーション」という本の記述と突き合わせながら復習しました。

参照コードは以下のサイトより。

https://observablehq.com/@d3/bar-chart/2?intent=fork

以下のコードでどんなグラフになるかも上記のサイトで確認できるので、

興味のある人はのぞいてみてね。

では、棒グラフの作り方について。

１．ＳＶＧのサイズを決める

　⇒まず、ピクセル単位でそれぞれの余白を表す 4 つの辺のそれぞれ (CSS のように上から時計回り) のプロパティを持つオブジェクトを定義します。目盛ラベルに合わせて余白を調整する必要がある場合があります。
　幅と高さをグラフィックの外寸として定義します。 Observable 標準ライブラリのリアクティブ幅を使用するには、幅を定義しないでください。非応答グラフィックの固定幅のみを定義します。
// Declare the chart dimensions and margins.
const width = 928;
const height = 500;
const marginTop = 30;
const marginRight = 0;
const marginBottom = 30;
const marginLeft = 40;
引用元：オライリー・ジャパンScotto Murray「インタラクティブデータビジュアライゼーション」及び　D3 templete barchartより抜粋

２．ＸとＹスケールをつくる

// Declare the x (horizontal position) scale.　Ｘスケールを宣言する
const x = d3.scaleBand()
.domain(d3.groupSort(data, ([d]) => -d.frequency, (d) => d.letter)) // descending frequency
.range([marginLeft, width – marginRight])
.padding(0.1);

// Declare the y (vertical position) scale.　Ｙスケールを宣言する
const y = d3.scaleLinear()
.domain([0, d3.max(data, (d) => d.frequency)])
.range([height – marginBottom, marginTop]);
〇スケールをつくる（ドメインとレンジ）
　スケールの入力ドメインとは、入力データ値が取り得る範囲のことである。
スケールの出力レンジとは、出力値が取れる値の範囲で、一般にピクセル単位の表示値として使われる。
線形スケールでは、正規化プロセスの数学的な処理は全てＤ３に任せてしまう。入力値はドメインにしたがって正規化され、正規化された値が出力レンジに合わせてスケーリングされる。
引用元：オライリー・ジャパンScotto Murray「インタラクティブデータビジュアライゼーション」及び　D3 templete barchartより抜粋

３．ＳＶＧ要素をつくる

〇次に、D3にからのSVG要素を作らせ、それをDOMに追加する。

// Create the SVG container.
const svg = d3.create(“svg”)
.attr(“width”, width)
.attr(“height”, height)
.attr(“viewBox”, [0, 0, width, height])
.attr(“style”, “max-width: 100%; height: auto;”);

　〇このコードは閉じ〈/body〉タグの直前に新しい要素を挿入し、
svgの幅を928ピクセル、高さを500ピクセルとする。この文は、結果を新しいsvgという変数に格納し、あとでd3.select(svg)のようなコードで再び選択し直したりせずに新しいsvg要素を参照できるようにしている。
引用元：オライリー・ジャパンScotto Murray「インタラクティブデータビジュアライゼーション」及び　D3 templete barchartより抜粋

4．棒グラフの棒をつくる

// Add a rect for each bar.
svg.append(“g”)
.attr(“fill”, “steelblue”)
.selectAll()
.data(data)
.join(“rect”)
.attr(“x”, (d) => x(d.letter))
.attr(“y”, (d) => y(d.frequency))
.attr(“height”, (d) => y(0) – y(d.frequency))
.attr(“width”, x.bandwidth());

　まず、append(“g”)をつかいすべての要素を１つのgグループにまとめる。
つぎに、select（）selectall()メソッド（…入力としてCSSセレクタを与えると、セレクタにマッチするDOMのなかで最初の要素のリファレンス(参照）が返される。複数の要素が必要な場合は、selectAll()を使う。）ををつかう。
ここのデータポイントに対しては、rectをつくる。
引用元：オライリー・ジャパンScotto Murray「インタラクティブデータビジュアライゼーション」及び　D3 templete barchartより抜粋

5．軸をセットアップする

// Add the x-axis and label.
svg.append(“g”)
.attr(“transform”, translate(0,${height - marginBottom}))
.call(d3.axisBottom(x).tickSizeOuter(0));

〇軸関連のすべての要素を１つのgグループにまとめる。
SVGの座標変換を用いている。attr()を使ってgの属性としてtransform（座標変換）を適用していることに注意。
引用元：オライリー・ジャパンScotto Murray「インタラクティブデータビジュアライゼーション」及び　D3 templete barchartより抜粋

6．Y 軸とラベルを追加し、ドメイン行を削除する。

// Add the y-axis and label, and remove the domain line.
svg.append(“g”)
.attr(“transform”, translate(${marginLeft},0))
.call(d3.axisLeft(y).tickFormat((y) => (y * 100).toFixed()))
.call(g => g.select(“.domain”).remove())
.call(g => g.append(“text”)
.attr(“x”, -marginLeft)
.attr(“y”, 10)
.attr(“fill”, “currentColor”)
.attr(“text-anchor”, “start”)
.text(“↑ Frequency (%)”));
X軸と同様に、軸関連のすべての要素を１つのgグループにまとめる。
SVGの座標変換を用いている。attr()を使ってgの属性としてtransform（座標変換）を適用していることに注意。
tick（）をつかい目盛りも操作している。
引用元：オライリー・ジャパンScotto Murray「インタラクティブデータビジュアライゼーション」及び　D3 templete barchartより抜粋