# もっくもっく ## 現状と目標 D3.js について学びたい むかしちょっと触って、半分くらいうまくいかないまま。以前のバージョンで API の大きな breaking change もあったようなので、公式のギャラリーなどを見ながら最新のバージョンでの使い方などについて学びたい そもそも JavaScript も古代の知識しか持ち合わせてないので。。。 ## D3.js について 地図も扱えるデータビジュアライゼーションのためのライブラリ。 Data-Driven Documents から来ているらしい。 - https://d3js.org/ - https://github.com/d3/d3 ### バージョンについて 2016年リリースの v4 以降のメジャーバージョンの変更点。v4 で大きな変更が入り、 v3 系と v4/v5 系は互換性がない。 - https://github.com/d3/d3/blob/main/CHANGES.md v6 でも若干変更があり、 migration guide もでている - https://observablehq.com/@d3/d3v6-migration-guide 最新版は v7.9 。マイナーバージョンでの変更点はリリースページに記載がある。 - https://github.com/d3/d3/releases ## getting startd 公式の Getting started のページにある D3 in vanilla HTML の項をコピペした HTML を作って表示させてみる - https://d3js.org/getting-started モジュールの取り扱い方法で ESM とか UMD とかあるようだけど、馴染みのあるコードとなる UMD+CDN を選択。 Node.js とか使わなくてもいけるし、使ってもいける。 ![スクリーンショット 2024-05-18 143914](https://hackmd.io/_uploads/SketyTrQ0.png) 下記で、軸というか、軸に使う変数の定義をやって ```javascript=14 // 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` で指定位置に平行移動させた軸を描画。 ```javascript=24 // 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"` の要素のオブジェクトを表しているっぽい。 ```javascript=1 <!DOCTYPE html> <div id="container"></div> ``` ## Gallery 公式のギャラリーを見て、参考になりそうなものを探している。 - https://observablehq.com/@d3/gallery Notebook のようなセルベースのサイト上で作成されているギャラリーのため、見方がわからん。。。下のセルから読むのか？ Observable の機能が使われていたり、 pure JS として完結しておらず、とりあえずコピペしてみて。って使い方ができなさそう。 あとギャラリーのうちアメリカだけの地図は、左上原点のキャンパス座標系に再投影済みのデータを用意して読み込んでいるので、 GIS 的にはいまいち参考にならないかも。沖縄の位置をずらすというような前処理を加える方法は、表現の目的のためには参考になるかもしれないけど（地理学徒にとっては盲点かも）。