PythonとJavaScriptではじめるデータビジュアライゼーション

82

4 章　Web 開発の基本

<ol>

<li>First item</li>

<li>Second item</li>

</ol>

また、

HTML

には専用の

<table>

タグもあり、可視化に生のデータを表示したい場合に便利で

す。次の

HTML

は、図

4-4

のヘッダと行を生成します。

<table id="chart-data">

<tr> #

❶

<th>Name</th>

<th>Category</th>

<th>Country</th>

</tr>

<tr> #

❷

<td>Albert Einstein</td>

<td>Physics</td>

<td>Switzerland</td>

</tr>

</table>

❶ ヘッダ行

❷ データの最初の行■

Web

可視化を作成する際に、図

4-4

の中で最も頻繁に使うタグはテキストタグでしょう。テキ

ストタグで説明や情報ボックスなどを提供します。しかし、本書で

JavaScript

を使う真の理由は、

SVG

（スケーラブルベクターグラフィックス：

Scalable Vector Graphics

）

<svg>

と

<canvas>

タグ

をルートとする

DOM

ノードの作成に専念することでしょう。ほとんどの最近のブラウザでは、

<canvas>

タグが

3D WebGL

コンテキストもサポートしています。

OpenGL

可視化をページに埋め

込めます。

「

4.7

 

SVG

」では、本書の重点事項で強力な

D3

ライブラリが使うフォーマット

SVG

を扱いま

す。次に、コンテキストブロックにスタイルを追加してみましょう。 ...