2018-04-03このチュートリアルではD3.jsで簡単なグラフ(散布図)を書けるところまでを解説します。Documents)はjavascriptのデータ視覚化ライブラリです。データビジュアライゼーションといったらこれ、というぐらい有名なライブラリです。他のライブラリとは異なり、関数にデータを入れれば描画してくれるものでなく、用意したデータを描画用のデータに変換し、変換したデータを元に画面を構成していきます。一つの表示を作るためにいくつかの処理を組み合わせなければなりませんが、それゆえ他のライブラリと比べて汎用性が非常に高く、アイディア次第で魔法のような表示が可能です。公式サイトのギャラリーに、多くのサンプルがあり雰囲気を掴むことができます。Chrome推奨)で、簡単に無料で始めることが始めることができます。ライセンスもフリー(修正BSDライセンス)で商用利用も可能です。Canvasですが、ここでは知識がない人でも使い始められる用に説明していきます。環境の準備まず、テキストエディタを準備して下のテキストをコピーしてください。(※このサイトのコードは、そのままクリックすると数字などが入ってしまいますが、ダブルクリックするとテキストをコピーできるモードに切り替わります。右上の<>を押すと元に戻ります。ここにコードを書いていきます。ここにコードを書いていきます。</script></body></html>テキストエディタはメモ帳で構いません。筆者はSublimeTextを使っています。SublimeTextは関数などを色分けしてくれますし、動作が軽くておススメです。テキストをコピーしたらファイル名をindex.htmlとして、適当な場所(デスクトップなど)に保存してください。保存したらこれをGoogleChromeで開きます。GoogleChormeでの開き方はいくつかありますが、GoogleChromeを先に開いてからファイルをGoogleChrome上にドロップする方法が簡単かと思います。何もない真っ白な画面が開かれましたでしょうか。この真っ白な画面に要素を追加していきます。D3.jsのチュートリアルを始める前に、GoogleChromeの開発者用ツールの説明をしたいと思います。画面右上の点々(下の赤まる)をクリックしてメニューを開き、「その他のツール」→「デベロッパーツール」を選択してください。右上にこのような情報が表示されます。現在のindex.htmlの構造を表示しています。headの情報が表示されていない場合は<head>の左にある三角を押すと表示されます。<head>と</head>の間にタイトル等のヘッダ情報が記載され、<body>と</body>の間に実際にブラウザに表示される文書の本体が記述されます。<script>はjavascriptのコードを記載するタグです。src="https://d3js.org/d3.v5.min.js"></script>で、D3.jsのライブラリを読み込んで使えるようにしています。v4を使いたい場合はv5の部分をv4に変えてください。次のページ(要素の追加方法)で、表示する要素を追加していきます。使い方D3のドラッグイベントについて解説します。chart)の作り方D3での基本チャート、折れ線グラフの作り方を紹介します。TOP%d人のブロガーが「いいね」をつけました。