HackMD
もっくもっく
現状と目標
D3.js について学びたい
むかしちょっと触って、半分くらいうまくいかないまま。以前のバージョンで API の大きな breaking change もあったようなので、公式のギャラリーなどを見ながら最新のバージョンでの使い方などについて学びたい
そもそも JavaScript も古代の知識しか持ち合わせてないので。。。
D3.js について
地図も扱えるデータビジュアライゼーションのためのライブラリ。 Data-Driven Documents から来ているらしい。
バージョンについて
2016年リリースの v4 以降のメジャーバージョンの変更点。v4 で大きな変更が入り、 v3 系と v4/v5 系は互換性がない。
v6 でも若干変更があり、 migration guide もでている
最新版は v7.9 。マイナーバージョンでの変更点はリリースページに記載がある。
getting startd
公式の Getting started のページにある D3 in vanilla HTML の項をコピペした HTML を作って表示させてみる
モジュールの取り扱い方法で ESM とか UMD とかあるようだけど、馴染みのあるコードとなる UMD+CDN を選択。 Node.js とか使わなくてもいけるし、使ってもいける。
- The image was uploaded to a note which you don't have access to
- The note which the image was originally uploaded to has been deleted
下記で、軸というか、軸に使う変数の定義をやって
// Declare the x (horizontal position) scale.
const x = d3.scaleUtc()
.domain([new Date("2023-01-01"), new Date("2024-01-01")])
.range([marginLeft, width - marginRight]);
// Declare the y (vertical position) scale.
const y = d3.scaleLinear()
.domain([0, 100])
.range([height - marginBottom, marginTop]);
下記で SVG 要素を動的に生成し、 translate で指定位置に平行移動させた軸を描画。
// Create the SVG container.
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
// Add the x-axis.
svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(d3.axisBottom(x));
// Add the y-axis.
svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y));
// Append the SVG element.
container.append(svg.node());
最後の container は HTML 中に記載した id="container" の要素のオブジェクトを表しているっぽい。
<!DOCTYPE html>
<div id="container"></div>
Gallery
公式のギャラリーを見て、参考になりそうなものを探している。
Notebook のようなセルベースのサイト上で作成されているギャラリーのため、見方がわからん。。。下のセルから読むのか？
Observable の機能が使われていたり、 pure JS として完結しておらず、とりあえずコピペしてみて。って使い方ができなさそう。
あとギャラリーのうちアメリカだけの地図は、左上原点のキャンパス座標系に再投影済みのデータを用意して読み込んでいるので、 GIS 的にはいまいち参考にならないかも。沖縄の位置をずらすというような前処理を加える方法は、表現の目的のためには参考になるかもしれないけど（地理学徒にとっては盲点かも）。
