データを表現する（データビジュアライゼーション）
データと数式の関係についてイメージするには、プログラムを書いて数式から生まれるデータを実際に表示してみる事や、そのうえで、数式の係数などの値を変えて、どのように変わるかを体験する事がもっとも効果的です。そこで、以降ではD3.jsというライブラリを使ってのプログラム上で値や数式を表現する方法について説明していきたいと思います。
D3.jsとは
D3.jsは比較的簡単にチャートなどを作成できるライブラリではありますが、チャートを直接描画するような、目的特化型のライブラリではありません。そのため、少々ハードルが高くなっています。ただ、データ表示を行う中間処理は比較的わかりやすく、学習目的としてはよいライブラリでしょう。また、数学的考え方に慣れてくればチャート専用のライブラリを使って描写するよりも使いやすく、また分かりやすい描写ができるというメリットもあります。
D3.jsの説明についての注意点
本連載は、D3.jsライブラリ（以下、D3）の使い方を紹介する内容ではないため、細かいAPIの使い方やそのバリエーションなどの紹介は割愛します。しかし、まったく使い方がわからない中で進めることは難しいと思うので、初回ではD3の使い方を簡単なサンプルと共に紹介していきます。
なお、本稿で紹介するD3の使い方は、D3の作法やより適した使い方ではなく、あくまでデータや数式をどのように考えるかを分かりやすく説明することを主目的としている点はご了承ください。
D3の簡単な使い方とSVGとの関係
D3はブラウザ上だけで動作し、リスト1のように簡単に試す事ができます。そして、これを実行した結果が図8です。
<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
</head>
<body><div id="app">
<div id="canvas"></div>
</div></body>
<style>
svg { border: 2px solid red; }
.-line { stroke: blue; stroke-width: 5px; }
.-circle { fill : yellow; stroke: black; }
.-rect { opacity: 0.5; fill : red; }
</style>
<script>
const ele = document.getElementById('canvas');
const root = d3.select(ele);
// (1) SVG要素を追加
const svg = root.append("svg")
.attr("width", 600).attr("height", 400);
// (2) 線を書く
svg.append("line").attr("class","-line")
.attr("x1", 200).attr("y1", 50).attr("x2", 500).attr("y2", 200)
.attr("stroke","black")
// (2) 四角計を書く
svg.append("rect").attr("class","-rect")
.attr("x",10).attr("y",10).attr("width",300).attr("height",300);
// (3) 円を描く
svg.append("circle").attr("class","-circle")
.attr("cx",350).attr("cy",300).attr("r",50)
</script>
</html>
リスト2はD3特有の特別な機能を何も使っていないコードで、以下のようなSVG要素を直接組み立てるためのサンプルです。
<svg width="600" height="400"> <line class="-line" x1="200" y1="50" x2="500" y2="200" stroke="black"></line> <rect class="-rect" x="10" y="10" width="100" height="100"></rect> <circle class="-circle" cx="350" cy="300" r="50"></circle> </svg>
このコードは（1）～（3）までの処理と出力されたSVGの出力が対応しているため、分かりやすいと思います。今回は簡単なSVG要素を作るだけのサンプルですが、実際にはこれらを組み合わせて用いたり、CSSなどを組み合わせたりすることで、自由度が高い描写が可能です。
実際に画面上にデータを表示する際の問題点とD3の強み
先ほどの例では、SVGキャンバス上の位置を直接指定して図形を描写していました。例えば、正方形を表示する際に先ほどは直接(10,10)の位置を基準にしました。そのため、左上に表示されています。しかし、実際にデータを見る場合、多くのケースでは図9のように左下を基準に考えているはずです。
このケースでは変換はそれほど難しくありません。しかし、マイナス値も考慮する必要がある場合には、軸を図10のように任意の場所に動かすことも考えられます。こうなるとさらに変換するのは面倒になります。
このような変換作業がコード上のさまざまな場所に入ってしまうと、データ操作に集中できなくなります。D3は、こうした変換問題を考えずに開発者がデータ操作や計算と描写（SVG要素の操作）に集中できる点が大きな強みです。
