TOC

JavaScriptとD3ライブラリを使用したデータの視覚化入門

前書き

  • D3.js *、またはD3はJavaScriptライブラリです。 その名前は D ata- D riven D ocuments（3つの「D」）を表しており、Web用のインタラクティブで動的なデータ視覚化ライブラリとして知られています。

2011年2月に初めてリリースされ、D3のバージョン4は2016年6月にリリースされました。 執筆時点では、最新の安定版リリースはバージョン4.4であり、継続的に更新されています。

D3は、* Scalable Vector Graphic または SVG *形式を活用します。これにより、品質を損なうことなくズームインまたはズームアウトできる図形、線、塗りつぶしをレンダリングできます。

このチュートリアルでは、JavaScript D3ライブラリを使用して棒グラフを作成する方法を説明します。

前提条件

このチュートリアルを最大限に活用するには、JavaScriptプログラミング言語に精通し、CSSとHTMLの知識が必要です。

CSSを使用してD3のスタイルを設定しますが、HTMLで動作する多くの標準CSSがSVGで異なる動作をすることに注意してください。つまり、「+ border 」の代わりに「 stroke 」を使用し、 ` color `の代わりに fill + `。 詳細については、https：//developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/SVG_and_CSS [SVGおよびCSSに関するMozilla Developer Networkの記事]を参照してください。

テキストエディターとWebブラウザーを使用します。 テスト目的で、https：//developer.mozilla.org/en-US/docs/Tools [Firefox Developer Tools]、またはhttps：/などのJavaScript、HTML、CSSを調べてデバッグするツールを使用することをお勧めします/developer.chrome.com/devtools[Chrome DevTools]。

手順1-ファイルと参照D3の作成

すべてのファイルを保持するディレクトリを作成することから始めましょう。 好きなように呼び出すことができます。ここで呼び出します。 作成したら、ディレクトリに移動します。

mkdir
cd

D3の機能を利用するには、Webページに `+ d3.js +`ファイルを含める必要があります。 長さ約16,000行、500 kbです。

`+ curl`を使用して、ファイルをディレクトリにダウンロードします。

プロジェクトに含めるのに適した圧縮バージョンをダウンロードするには、次のように入力します。

curl https://d3js.org/d3.v4.min.js --output d3.min.js

D3コードの読み取りを計画している場合は、次のように入力して、人間に優しい空白を含む非圧縮バージョンを取得することをお勧めします。

curl https://d3js.org/d3.v4.js --output d3.js

このチュートリアルでは + d3.min.js`ファイルを使用しますが、人間が読めるバージョンを使用することを選択した場合は、代わりにHTMLファイルで + d3.js`ファイルを参照してください。

D3バージョン4はモジュール式であるため、代わりに、使用するモジュールのみを取り込むことでファイルサイズを小さくすることができます。

D3をダウンロードしたら、CSSファイルとHTMLファイルをセットアップしましょう。 `+ nano `など、このファイルで作業するテキストエディターを選択できます。 CSSファイル ` style.css`から始めて、HTMLファイルからすぐにリンクできるようにします。

nano style.css

まず、標準のCSS宣言から始めて、ページを高さ100％でマージンなしでスタイル設定します。

html, body {
 margin: 0;
 height: 100%;
}

現時点では、CSSファイルを保存して閉じることができます。

次に、この例の棒グラフを作成するため、「+ barchart.js」という名前のJavaScriptファイルを作成します。 このファイルは、D3作業の大部分が存在する場所であり、次のステップで作業を開始します。 今すぐファイルを開く必要はなく、 `+ touch +`コマンドを使用できます。

touch barchart.js

とりあえず、これらすべての要素をHTMLファイルに接続してみましょう。これを「+ barchart.html +」と呼びます。

nano barchart.html

このファイルは他のほとんどのHTMLファイルと同様に設定でき、その内部では、作成したばかりの `+ style.css `ファイルと ` barchart.js `ファイル、および ` d3.min.js +`スクリプトを参照します。 。

barchart.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Bar Chart</title>
   <link rel="stylesheet" type="text/css" href="style.css">

   <!-- Alternatively use d3.js here -->
   <script type="text/javascript" src="d3.min.js"></script>

 </head>

 <body>
   <script type="text/javascript" src="barchart.js"></script>
 </body>
</html>

HTMLファイルは今のところ保存して閉じることができます。

ステップ2-JavaScriptでのSVGのセットアップ

選択したテキストエディターで `+ barchart.js`ファイルを開くことができます。

nano barchart.js

まず、数値の配列を追加します。これを棒グラフの基礎として使用します。

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

次に、SVG要素を作成する必要があります。 これは、すべての図形を配置する場所です。 D3では、 `+ d3.select +`を使用して、要素を検索するようブラウザに指示します。

これは1行の `+ d3.select（" body "）。append（" svg "）; +`で行うことができますが、コードで簡単に参照できるように変数として宣言する方が良いでしょう後。

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

選択したWebブラウザーに「+ barchart.html +」を読み込むと、https：//www.digitalocean.com/community/tutorials/introduction-to-the-dom [* DOM または*ドキュメントオブジェクトモデル]開発ツールを使用して、SVGボックスにマウスを合わせます。 ブラウザによっては、かなり小さい場合があります。

image：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-svg-dom.png [DOMに表示されるD3 SVG]

JavaScriptファイルに戻り、*属性*をSVGにチェーンして、Webページの完全な高さと幅にすることができます。 属性に `+ .attr（）+`を使用します。 これをすべて1行に収めることができますが、これを分割するともう少し読みやすくなります。 必ずセミコロンを変数宣言の最後まで移動してください。

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")

ブラウザでページをリロードすると、DOMの上にマウスを置いたときに全画面を占める長方形が表示されます。

ステップ3-長方形の追加

SVGの準備ができたら、データセットの四角形をJavaScriptファイルに追加し始めることができます。

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

上記の `+ d3.select`と同様に、要素を検索するようブラウザに指示しています。 今回は、長方形の配列用です。 配列なので、 `+ d3.selectAll `を使用し、長方形の配列なので ` d3.selectAll（" rect "）+`を使用します。 ブラウザが長方形を見つけた場合、選択範囲でそれらを返し、空の場合は空を返します。 D3では、最初に操作する要素を選択する必要があります。

この長方形配列を、 `+ .data（dataArray）`で ` dataArray +`に保存されているデータに結び付けます。

（データ配列に対応する）選択範囲内の各項目に実際に長方形を追加するには、 `+ .enter（）。append（" rect "）; +`を追加して長方形を追加します。 この例では、配列内の9つの数字に対応する9つの長方形があります。

今すぐページをリロードすると、まだ長方形は表示されませんが、DOMをチェックすると、そこに定義された9つの長方形が表示されます。

image：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/DOM-rectangles.png [DOMに表示されるD3長方形]

四角形を表示するための属性をまだ設定していないので、追加します。

シェイプの属性を設定する

`+ .attr（）+`を使用して、SVGの属性を定義したのと同じ方法で、属性を図形に追加できます。 D3の各図形は、定義および描画の方法に応じて異なる属性を持ちます。

長方形は4つの属性を取ります。

  • `（" height "、" "）`長方形の高さ

  • `（" width "、" "）`長方形の幅

  • ブラウザウィンドウの左側からの距離を表す （" x "、" "）

  • ブラウザウィンドウの上部からの距離を表す （" y "、" "）

したがって、たとえば、高さ250ピクセル、幅40ピクセル、ブラウザーの左側から25ピクセル、上部から50ピクセルの長方形が必要な場合、次のようにコードを記述します。

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

ブラウザを更新すると、すべての長方形が重なっていることがわかります。

image：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-overlapping-rectangles.png [デフォルトの黒で重なるD3の長方形]

デフォルトでは、D3の図形は黒で塗りつぶされていますが、最初に四角形の位置とサイズを指定する必要があるため、後で変更できます。

長方形にデータを反映させる

現在、配列内のすべての長方形はX軸に沿って同じ位置にあり、高さに関してデータを表していません。

四角形の位置とサイズを変更するには、一部の属性にhttps://www.digitalocean.com/community/tutorials/how-to-define-functions-in-javascript[functions]を導入する必要があります。 関数を追加すると、値が手動ではなく動的になります。

まず、 `+ x +`属性の変更から始めましょう。 現在、このコード行は次のようになっています。

       .attr("x","25")

25ピクセルの数字を関数に置き換えます。 D3で定義された2つの変数をデータポイントとインデックスの代わりに `+ function（）`に渡します。 インデックスは、配列内のデータポイントの位置を示します。 ` function（d、i）`のように、データポイントに ` d `を、インデックスに ` i +`を使用するのが慣例ですが、任意の変数を使用できます。

JavaScriptは、「+ d 」と「 i 」を繰り返し処理します。 繰り返し処理する各インデックスに間隔を追加して、各長方形が間隔をあけるようにします。 これを達成するために、インデックス「 i +」に特定のピクセル数を掛けることができます。 とりあえず60を使用しますが、どの間隔が適切かを決めることができます。 X軸属性の新しい行は次のようになります。

       .attr("x", function(d, i) {return i * 60;})

ただし、ここでコードを実行すると、四角形がブラウザーの左側に揃うことがわかります。そこで、たとえばエッジから25ピクセルのスペースを追加します。 これで、完全なコードは次のようになります。

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("height","250")
         .attr("width","40")

         .attr("y","50");

この時点でブラウザを更新すると、次のような画面が表示されます。

image：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/9-d3-rectangles.png [D3の長方形の間隔]

これで、配列内の各アイテムを表すX軸に沿って長方形が配置されました。 次に、長方形の高さに配列内のデータを反映させます。

これで、 `+ height `属性を使用して作業し、 ` x `属性に追加した機能と同様の機能を追加します。 まず、変数「 d 」と「 i 」を「 function 」に渡し、「 d 」を返します。 ` d +`はデータポイントを表すことを思い出してください。

         .attr("height", function(d, i) {return (d)})

ここでコードを実行すると、2つのことがわかります。 1つ目は長方形がかなり小さく、2つ目は下ではなくチャートの上部に取り付けられていることです。

image：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-chart-top-to-bottom.png [D3棒グラフの上下]

長方形の小さなサイズに対処するために、返される `+ d +`を掛けましょう：

         .attr("height", function(d, i) {return (d * 10)})

現在、長方形のサイズは大きくなっていますが、上から下まで表示されています。

ブラウザは通常、ウェブページを左上から右下に読み取りますが、棒グラフは下から上に読み取ります。 四角形の位置を変更するには、「+ y +」属性を変更して、上のスペースを削除します。

繰り返しになりますが、「+ function（d、i）」を使用し、棒グラフの最も高い値、たとえば400よりも高いY値を返します。 400から返された `（d * 10）+`の高さを引くので、行は次のようになります。

         .attr("y", function(d, i) {return 400 - (d * 10)});

JavaScriptコード全体を見てみましょう。

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})

この時点で、ページをリロードすると、下から上に読むことができる棒グラフが表示されます。

image：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-bar-chart-black.png [黒のD3棒グラフ]

これで、チャートのスタイル設定に取り組むことができます。

ステップ4-D3でのスタイリング

CSSファイルを使用してD3シェイプのスタイルを設定しますが、最初に、この作業を簡単にするために、CSSファイルで参照できるJavaScriptファイルでクラス名にクラス名を付けます。

クラスの追加は、ドット表記を使用して他の属性を追加するようなものです。 クラスは棒グラフなので「+ bar +」クラスと呼びますが、すべての参照が同じ名前を参照している限り、必要なものを呼び出すことができます。 構文は次のようになります。

         .attr("class", "bar")

この属性はどこにでも追加できます。 最初の属性として保持すると、CSSファイルで参照しやすくなります。

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")

         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

それでは、 `+ style.css +`ファイルに切り替えましょう。現在は次のようになっています。

style.css

html, body {
 margin: 0;
 height: 100%
}

塗りつぶしの色を変更して、作成したばかりの `+ bar +`クラスを参照することで、四角形の変更を開始できます。

style.css

html, body {
 margin: 0;
 height: 100%
}

ここでは、四角形を青にしました。代わりに、次のように16進数の色コードを割り当てることもできます。

.bar {
 fill: #0080FF
}

この時点で、長方形は次のようになります。

画像：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-bar-chart-blue-fill.png [D3棒グラフの青色の塗りつぶし]

特定の色で長方形の輪郭を描くための `+ stroke `や ` stroke-width +`など、長方形に追加の値を与えることができます。

style.css

html, body {
 margin: 0;
 height: 100%
}

.bar {
 fill: #0080FF;


}

これにより、長方形の幅が5ピクセルの黒のアウトラインが提供されます。

image：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/bar-chart-blue-fill-black-stroke.png [D3棒グラフ青塗りつぶし黒5pxストローク]

さらに、マウスのホバーで変更するバーの色のスタイルを追加することにより、グラフにインタラクティブな操作を追加できます。

.bar:hover {
 fill: red
}

これで、長方形の1つにマウスを合わせると、その特定の長方形が赤に変わります。

image：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-red-hover-bar-chart.png [D3棒グラフのカラーインタラクティブ]

または、追加の属性を追加して、JavaScriptファイル内の図形のスタイルを設定できます。 長方形ブロックでは、他の `+ .attr（）`属性と同様にこれらを記述します。 そのため、長方形の周りに黒いストロークを追加すると、「。attr（ "stroke"、 "black"）+ `」と記述されます。 また、5ピクセルの「+ stroke-width +」を追加し、セミコロンを下に移動してください。

barchart.js

...
svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)})

         ;

シェイプをどのようにスタイル設定するか、どのファイルで選択するかはユーザー次第です。 この例では、 `+ style.css +`ファイルで作業し、塗りつぶしの色とホバーの塗りつぶしに制限します：

style.css

html, body {
 margin: 0;
 height: 100%
}

.bar {
 fill: #0080FF
}

.bar:hover {
 fill: #003366
}

ウェブ上で色を扱うときは、視聴者のことを念頭に置いて、できるだけ普遍的にアクセス可能な色を含めるように努めることが重要です。 カラーアクセシビリティの考慮事項の詳細については、http：//a11y.me/ [Acessibility＆Me]をご覧ください。

ステップ5-ラベルの追加

最後のステップは、定量化可能なマーカーをラベルの形でグラフに追加することです。 これらのラベルは、配列内の番号に対応します。

テキストの追加は、上記で行った長方形の追加に似ています。 テキストを選択して、SVGに追加する必要があります。 また、作成した `+ dataArray `に結び付けます。 `" rect "`の代わりに、 `" text "`を使用しますが、一般的な形式は上の長方形を追加するために行ったものと似ています。 これらの行を ` barchart.js +`ファイルの下部に追加します。

barchart.js

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

ブラウザを更新すると、ページにテキストは表示されませんが、DOMに再び表示されます。

image：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/DOM-text.png [DOMに表示されるD3テキスト]

DOMのテキスト行にマウスを合わせると、テキストがすべてページの上部にあることがわかります。XとYは0です。 属性を追加して、長方形に使用したのと同じ関数式を使用して位置を変更します。

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})

         ;

ここでウェブページを読み込むと、バーの上に数字が浮かんでいます。

image：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-labels-bar-chart.png [棒グラフ付きのD3テキストラベル]

これは画像ではなくSVGであるため、ページに表示される他のテキストと同じようにテキストを選択できることに注意してください。

ここから、関数式を変更することにより、数値の再配置を開始できます。 たとえば、それらをバーの上に浮かせたままにすることができます。

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})
         .attr("x", function(d, i)
         .attr("y", function(d, i) ;

または、Y軸に関して位置を変更することにより、長方形自体に数値を浮動させることができます。 これも読みやすくしたいので、 `+ style.css +`ファイルからアクセスできるクラスを追加しましょう。

barchart.js

...
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})

         .attr("x", function(d, i) {return (i * 60) + 36})
         .attr("y", function(d, i) ;

`+ style.css +`ファイルでは、ファイルの下部に次の行を追加して、テキストを白とサンセリフにします。

style.css

...
.text {
 fill: white;
 font-family: sans-serif
}

image：http：//assets.digitalocean.com/articles/eng_javascript/d3-barchart/d3-white-text-labels.png [棒グラフ付きの白のD3テキストラベル]

配置とスタイル設定により、必要なだけテキストを変更できます。 たとえば、 + style.css`ファイルの + font-size`属性を変更することもできます。

完成したコードとコードの改善

この時点で、JavaScript D3ライブラリでレンダリングされた完全に機能する棒グラフが必要です。 すべてのコードファイルを見てみましょう。

barchart.html

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8">
   <title>Bar Chart</title>

   <!-- Reference style.css -->
   <link rel = "stylesheet" type="text/css" href="style.css">

   <!-- Reference minified version of D3 -->
   <script type="text/javascript" src="d3.min.js"></script>
 </head>

 <body>
   <script type="text/javascript" src="barchart.js"></script>
 </body>
</html>

style.css

html, body {
 margin: 0;
 height: 100%
}

/*Rectangle bar class styling*/

.bar {
 fill: #0080FF
}

.bar:hover {
 fill: #003366
}

/*Text class styling*/

.text {
 fill: white;
 font-family: sans-serif
}

barchart.js

// Create data array of values to visualize
var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

// Create variable for the SVG
var svg = d3.select("body").append("svg")
         .attr("height","100%")
         .attr("width","100%");

// Select, append to SVG, and add attributes to rectangles for bar chart
svg.selectAll("rect")
   .data(dataArray)
   .enter().append("rect")
         .attr("class", "bar")
         .attr("height", function(d, i) {return (d * 10)})
         .attr("width","40")
         .attr("x", function(d, i) {return (i * 60) + 25})
         .attr("y", function(d, i) {return 400 - (d * 10)});

// Select, append to SVG, and add attributes to text
svg.selectAll("text")
   .data(dataArray)
   .enter().append("text")
   .text(function(d) {return d})
          .attr("class", "text")
          .attr("x", function(d, i) {return (i * 60) + 36})
          .attr("y", function(d, i) {return 415 - (d * 10)});

このコードは完全に機能していますが、コードを改善するためにできることはたくさんあります。 たとえば、SVGグループ要素を活用してSVG要素をグループ化し、より少ないコード行でテキストと四角形を変更できます。

さまざまな方法でデータにアクセスすることもできます。 データを保持するために配列を使用しましたが、既にアクセスしているデータを視覚化したい場合があります。また、配列でうまく機能するデータよりもかなり多くのデータがある場合があります。 D3では、いくつかの異なるデータファイルタイプを操作できます。

  • HTML

  • JSON

  • テキストで表示

  • CSV（コンマ区切り値）

  • TSV（タブ区切り値）

  • XML

たとえば、ウェブサイトのディレクトリにJSONファイルを作成し、JavaScriptファイルに接続できます

d3.json("myData.json", function(json) {
// code for D3 charts in here
});

D3ライブラリを、バニラJavaScriptで既に知っている他のインタラクティブ機能と組み合わせることもできます。

結論

このチュートリアルでは、JavaScript D3ライブラリで棒グラフを作成しました。 d3.jsの詳細については、https：//github.com/d3/d3/blob/master/API.md [GitHubのD3 API]にアクセスしてください。

他のプログラミング言語は、Webブラウザーに限定されないデータを視覚化する他の方法を提供します。 ここから、https：//www.digitalocean.com/community/tutorials/how-to-plot-data-in-python-3-using-matplotlib [matplotlib]を使用してPythonでデータをプロットする方法を学ぶことができます。

Related