D3.jsをお試し動作確認

# 目的
D3.jsをお試し動作確認した際の備忘録です

# 準備

実際に動かす際に以下を参考にさせて頂きました。
> [かなりざっくりD3.js入門](https://qiita.com/ebisennet/items/ba7d437bf8165d28fd6d)
> [D3.js を使ってお客様の声を可視化する](https://tech.askul.co.jp/entry/2018/08/08/120545)
> [pythonでローカルwebサーバを立ち上げる](https://qiita.com/okhrn/items/4d3c74563154f191ba16)
> [D3.js v4/v5 force simulation ノード相互作用 – サンプル](https://wizardace.com/d3-forcesimulation-onlynode/)

1. http serverの準備

以下を参照してhttp serverを起動します。

> [pythonでローカルwebサーバを立ち上げる](https://qiita.com/okhrn/items/4d3c74563154f191ba16)

以降は、http serverが起動済であることを前提とします。

2. d3.jsの準備

以下からd3.zipをダウンロードします。
[D3.js Data-Driven Documents](http://d3js.org/)

URLから利用する方法もあるようです。
> To link directly to the latest release, copy this snippet:
> <script src="https://d3js.org/d3.v5.min.js"></script>

3. コード作成

以下のbubble chart用サンプルコードを動かしてみます。

> [Bubble Chart](https://bl.ocks.org/alokkshukla/3d6be4be0ef9f6977ec6718b2916d168)

<img width="630" alt="スクリーンショット 2020-03-03 18.55.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/344880/4cb30640-df07-fa3c-bf12-5eb8ef607ed9.png">

```html:index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>D3: A simple packed Bubble Chart</title>
  <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>

  <style type="text/css">
    /* No style rules here yet */
    </style>
</head>
<body>
  <script type="text/javascript">

        dataset = {
            "children": [{"Name":"Olives","Count":4319},
                {"Name":"Tea","Count":4159},
                {"Name":"Mashed Potatoes","Count":2583},
                {"Name":"Boiled Potatoes","Count":2074},
                {"Name":"Milk","Count":1894},
                {"Name":"Chicken Salad","Count":1809},
                {"Name":"Vanilla Ice Cream","Count":1713},
                {"Name":"Cocoa","Count":1636},
                {"Name":"Lettuce Salad","Count":1566},
                {"Name":"Lobster Salad","Count":1511},
                {"Name":"Chocolate","Count":1489},
                {"Name":"Apple Pie","Count":1487},
                {"Name":"Orange Juice","Count":1423},
                {"Name":"American Cheese","Count":1372},
                {"Name":"Green Peas","Count":1341},
                {"Name":"Assorted Cakes","Count":1331},
                {"Name":"French Fried Potatoes","Count":1328},
                {"Name":"Potato Salad","Count":1306},
                {"Name":"Baked Potatoes","Count":1293},
                {"Name":"Roquefort","Count":1273},
                {"Name":"Stewed Prunes","Count":1268}]
        };

        var diameter = 600;
        var color = d3.scaleOrdinal(d3.schemeCategory20);

        var bubble = d3.pack(dataset)
            .size([diameter, diameter])
            .padding(1.5);

        var svg = d3.select("body")
            .append("svg")
            .attr("width", diameter)
            .attr("height", diameter)
            .attr("class", "bubble");

        var nodes = d3.hierarchy(dataset)
            .sum(function(d) { return d.Count; });

        var node = svg.selectAll(".node")
            .data(bubble(nodes).descendants())
            .enter()
            .filter(function(d){
                return  !d.children
            })
            .append("g")
            .attr("class", "node")
            .attr("transform", function(d) {
                return "translate(" + d.x + "," + d.y + ")";
            });

        node.append("title")
            .text(function(d) {
                return d.Name + ": " + d.Count;
            });

        node.append("circle")
            .attr("r", function(d) {
                return d.r;
            })
            .style("fill", function(d,i) {
                return color(i);
            });

        node.append("text")
            .attr("dy", ".2em")
            .style("text-anchor", "middle")
            .text(function(d) {
                return d.data.Name.substring(0, d.r / 3);
            })
            .attr("font-family", "sans-serif")
            .attr("font-size", function(d){
                return d.r/5;
            })
            .attr("fill", "white");

        node.append("text")
            .attr("dy", "1.3em")
            .style("text-anchor", "middle")
            .text(function(d) {
                return d.data.Count;
            })
            .attr("font-family",  "Gill Sans", "Gill Sans MT")
            .attr("font-size", function(d){
                return d.r/5;
            })
            .attr("fill", "white");

        d3.select(self.frameElement)
            .style("height", diameter + "px");



	</script>
</body>
</html>
```

# その他
以下のコードを使わせて頂くとインタラクティブなグラフを簡単に描けました。

> [D3.js を使ってお客様の声を可視化する](https://tech.askul.co.jp/entry/2018/08/08/120545)

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">d3.jsお試し <a href="https://t.co/5nP8DlvBg3">pic.twitter.com/5nP8DlvBg3</a></p>&mdash; st (@st17890027) <a href="https://twitter.com/st17890027/status/1234778615260147712?ref_src=twsrc%5Etfw">March 3, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


# CodingError対策
コードにエラーがあるとブラウザに何も表示されなくなるので注意する。
（どうすればエラーメッセージからデバッグができるのでしょう。。）

# 参考
[かなりざっくりD3.js入門](https://qiita.com/ebisennet/items/ba7d437bf8165d28fd6d)
[pythonでローカルwebサーバを立ち上げる](https://qiita.com/okhrn/items/4d3c74563154f191ba16)
[D3.js Data-Driven Documents](http://d3js.org/)
[Gallery](https://github.com/d3/d3/wiki/Gallery)
[Bubble Chart](https://bl.ocks.org/alokkshukla/3d6be4be0ef9f6977ec6718b2916d168)
[D3.js v4/v5 force simulation ノード相互作用 – サンプル](https://wizardace.com/d3-forcesimulation-onlynode/)
[D3.js v4/5 使い方 徹底攻略](https://wizardace.com/)


[【D3.js】世界の主要20言語　使用人口グラフ(バブルチャート)](https://shimz.me/blog/d3-js/2770)
[w3schools.com](https://www.w3schools.com/html/html5_svg.asp)
[Spark + kuromoji + D3.js で 簡単に「NHKつぶやきビッグデータ」を作る](https://qiita.com/AKB428/items/12118d1d28b9e067296a)
[SVGとD3.jsの入門まとめ](https://qiita.com/simonritchie/items/16bfa1f9f80db10cb5ae)
[D3.jsの概要と使い所について](https://qiita.com/cawpea/items/8d66e1a1df9e2d64fef6)
[D3.js を使ってみる](https://qiita.com/ynakayama/items/362049808223c191d252)
[データ可視化勉強会](https://www.slideshare.net/muddydixon/ss-31811179)
[これから D3.js を始める人のためのメモ](https://qiita.com/corestate55/items/e70d5981c33a89f63367)