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

getdocs

4年前

序章

D3.js 、またはD3はJavaScriptライブラリです。その名前はD ata- D riven D ocuments（3 “D”）の略で、インタラクティブで動的なデータ視覚化ライブラリとして知られています。ウェブ。

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

D3は、 Scalable VectorGraphicまたはSVG形式を利用して、品質を損なうことなくズームインまたはズームアウトできる形状、線、および塗りつぶしをレンダリングできます。

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

前提条件

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

CSSを使用してD3のスタイルを設定しますが、HTMLで機能する多くの標準CSSはSVGでは異なる方法で機能することに注意してください。つまり、使用することになります。 stroke それ以外の border、と fill それ以外の color. 詳細については、SVGおよびCSSに関する MozillaDeveloperNetworkの記事を参照してください。

テキストエディタとWebブラウザを使用します。テストの目的で、 Firefox DeveloperToolsやChromeDevTools などのJavaScript、HTML、CSSを調べてデバッグするツールを使用することをお勧めします。

ステップ1—ファイルとリファレンスD3を作成する

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

mkdir D3-project
cd D3-project

D3の機能を利用するには、 d3.js Webページのファイル。長さは約16,000行、500kbです。

使ってみよう 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 このチュートリアル全体でファイルを作成しますが、人間が読める形式を使用する場合は、 d3.js 代わりにHTMLファイルで。

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

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

nano style.css

まず、標準のCSS宣言から始めて、ページを100 % he ightで、余白なしでスタイル設定します。

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

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

次に、JavaScriptファイルを作成します。名前を付けます。 barchart.js この例では棒グラフを作成するためです。このファイルは、D3作業の大部分が存在する場所であり、次のステップで作業を開始します。今すぐファイルを開く必要がないので、 touch 指図。

touch barchart.js

とりあえず、これらすべての要素をHTMLファイルに接続しましょう。これを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];

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

今ロードした場合 barchart.html 選択したWebブラウザーで、開発者ツールを使用してDOMまたはDocumentObject Model をチェックし、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")
          .attr("height","100%")
          .attr("width","100%");

ブラウザでページをリロードすると、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%");

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

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

この長方形の配列をに保存されているデータに結び付けます dataArray と .data(dataArray).

選択範囲内の各アイテム（データ配列に対応）に実際に長方形を追加するには、さらに追加します .enter().append("rect"); 長方形を追加します。この例では、配列内の9つの数字に対応する9つの長方形があります。

ここでページをリロードすると、まだ長方形は表示されませんが、DOMを確認すると、そこに9つの長方形が定義されていることがわかります。

長方形を表示するための属性はまだ設定されていないので、に追加してみましょう。

形状の属性の設定

SVGの属性を定義したのと同じ方法で、を使用して形状に属性を追加できます。 .attr(). D3の各形状は、それらがどのように定義および描画されるかに応じて、異なる属性を持ちます。

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

("height", "height_in_pixels") 長方形の高さ
("width", "width_in_pixels") 長方形の幅
("x", "distance_in_pixels") ブラウザウィンドウの左側からの距離
("y", "distance_in_pixels") ブラウザウィンドウの上部からの距離

したがって、たとえば、高さ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")
          .attr("height","250")
          .attr("width","40")
          .attr("x","25")
          .attr("y","50");

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

デフォルトでは、D3の形状は黒色で塗りつぶされていますが、最初に長方形の位置とサイズに対処する必要があるため、後で変更できます。

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

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

長方形の位置とサイズを変更するには、いくつかの属性に関数を導入する必要があります。関数を追加すると、値が手動ではなく動的になります。

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

        .attr("x","25")

25ピクセルの数字を関数に置き換えます。 D3で定義された2つの変数をに渡します function()、データポイントとインデックスを表します。インデックスは、配列内のデータポイントの位置を示します。使用するのが慣例です d データポイントと i インデックスの場合、 function(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("x", function(d, i) {return (i * 60) + 25})
          .attr("y","50");

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

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

私たちは今、 height 属性、およびに追加したものと同様の関数を追加します x 属性。変数を渡すことから始めましょう d と i に function、そして戻る d. それを思い出します d データポイントを表します。

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

ここでコードを実行すると、2つのことに気付くでしょう。まず、長方形がかなり小さいこと、そして次に、長方形がチャートの下部ではなく上部に接続されていることです。

長方形の小さいサイズに対処するために、 d それが返されます：

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

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

ブラウザは通常、左上から右下にWebページを読み取りますが、棒グラフは下から上に読み取ります。長方形を再配置するには、 y 上のスペースを引く属性。

繰り返しますが、 function(d, i)、そして棒グラフの最も高い値よりも高いY値、たとえば400を返します。返された高さを減算します (d * 10) 400から、ラインは次のようになります。

          .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("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)});

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

これで、グラフのスタイル設定に取り掛かることができます。

ステップ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("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 作成したクラス：

style.css

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

.bar {
  fill: blue
}

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

.bar {
  fill: #0080FF
}

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

長方形に次のような追加の値を与えることができます stroke 特定の色で長方形の輪郭を描くには、 stroke-width:

style.css

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

.bar {
  fill: #0080FF;
  stroke: black;
  stroke-width: 5
}

これにより、幅5ピクセルの黒い輪郭の長方形が提供されます。

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

.bar:hover {
  fill: red
}

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

または、属性を追加してJavaScriptファイルの図形のスタイルを設定することもできます。長方形のブロックに、他のようにこれらを書きます .attr() 属性。したがって、長方形の周りに黒いストロークを追加すると、次のように記述されます。 .attr("stroke", "black"). また、追加しましょう stroke-width 5ピクセルで、セミコロンを下に移動してください。

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)})
          .attr("stroke", "black")
          .attr("stroke-width", "5");

形状のスタイルとファイルのスタイルを決定する方法は、あなた次第です。この例では、 style.css ファイルを作成し、塗りつぶしの色とホバー塗りつぶしに限定します。

style.css

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

.bar {
  fill: #0080FF
}

.bar:hover {
  fill: #003366
}

Webで色を操作するときは、視聴者を念頭に置き、できるだけ普遍的にアクセスできる色を含めるように作業することが重要です。カラーアクセシビリティの考慮事項の詳細については、チェックアウトできますアクセス可能性と私。

ステップ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)});

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

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

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

barchart.js

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

ここでWebページをロードすると、バーの上に数字が浮かんでいるのがわかります。

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

ここから、関数の数式を変更して、数値の再配置を開始できます。たとえば、バーの上に浮かせたままにしておきます。

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) {return 390 - (d * 10)});

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

barchart.js

...
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)});

私たちの中で style.css ファイルの場合、ファイルの下部に次の行を追加して、テキストを白とサンセリフにします。

style.css

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

ポジショニングとスタイリングにより、テキストを好きなだけ変更できます。たとえば、 font-size の属性 style.css ファイル。

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

この時点で、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

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

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

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

結論

このチュートリアルでは、JavaScriptD3ライブラリで棒グラフを作成しました。 D3.jsの詳細については、GitHubのD3APIにアクセスしてください。

他のプログラミング言語は、Webブラウザに限定されないデータを視覚化する他の方法を提供します。ここから、matplotlibを使用してPythonでデータをプロットする方法を学ぶことができます。