jupyterでpy_d3というライブラリを使って、D3.jsのグラフを表示したい

前提・実現したいこと

jupyterでpy_d3というライブラリを使って、D3.jsのグラフを表示したいのですが、うまくいきません。
hello worldは表示されるのでpy_d3自体は動いていると思うのですが、以下を表示させようとしても何も出力されません。アドバイスお願いします。

該当のソースコード

python
1%load_ext py_d3
2
3%%d3
4
5<!DOCTYPE html>
6<html>
7
8<head>
9  <meta charset="utf-8">
10  <title>D3 Test</title>
11  <script src="https://d3js.org/d3.v5.min.js"></script>
12</head>
13
14<body>
15  <script>
16  var dataset = [
17    [5, 20],
18    [480, 90],
19    [250, 50],
20    [100, 33],
21    [330, 95],
22    [410, 12],
23    [475, 44],
24    [25, 67],
25    [85, 21],
26    [220, 88]
27  ];
28  var width = 800;
29  var height = 600;
30
31  var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
32  var padding = 30;
33
34  var xScale = d3.scaleLinear()
35    .domain([0, d3.max(dataset, function(d){return d[0];})])
36    .range([padding, width - padding]);
37
38  var yScale = d3.scaleLinear()
39    .domain([0, d3.max(dataset, function(d){return d[1];})])
40    .range([height - padding, padding]);
41
42  var axisx = d3.axisBottom(xScale);
43  var axisy = d3.axisLeft(yScale);
44  svg.append("g")
45    .attr("transform", "translate(" + 0 + "," + (height - padding) + ")")
46    .call(axisx);
47
48  svg.append("g")
49    .attr("transform", "translate(" + padding + "," + 0 + ")")
50    .call(axisy);
51
52  svg.append("g")
53    .selectAll("circle")
54   .data(dataset)
55   .enter()
56   .append("circle").attr("cx", function(d) {
57        return xScale(d[0]);
58   })
59   .attr("cy", function(d) {
60        return yScale(d[1]);
61   })
62   .attr("fill", "SkyBlue")
63   .attr("r", 4);
64
65  </script>
66</body>
67
68</html>

行動規範の内容に同意します

回答1件

ベストアンサー

https://github.com/ResidentMario/py_d3
のhello worldのコードをNotebook上でそのまま打ち込み

Notebook
1%%d3
2<g></g>
3<script>
4d3.select("g").text("Hello World!")
5</script>

このセルを実行したところ"Hello World!"というテキストは一つの出力セルとして表示されました。

ご存じのようにNotebookのページは一枚のHTMLページ上に複数の入力・出力セルが縦方向に並んだ構造をしています。%%d3の結果が一つの出力セルとして表示されるということは「%%d3のセルに記述するHTML部分は出力セルに該当する要素のみ(例えばg要素のみ)とすべきなのだろう」と自分は思いました。

さてご質問のコードを見てみますと「DOCTYPEから始まるHTMLページ全体」を記述しておられます。そこで次のように余分と思える要素を削除するよう変更したところグラフが表示されました。

変更点：
・<!DOCTYPE html>～<body ...>まで削除
・上記の代わりに<g></g>を挿入
・javascript中のselect対象の要素をbodyからgに変更
=>var svg = d3.select("g").append("svg").attr("width", width).attr("height", height);
・</body>～</html>まで削除

最初に挙げたd3_pyサイトのHow it worksの項にNotebook上で動かすためにselectにパッチを当てており入力セルに記述した範囲のHTML要素のみを検索対象にするといったことが書いてあります。つまり一枚のページの複数のセルに同一の要素(gなど)をidなしで記述しても期待通りに動くようになっているみたいです。実際次のように書いてみると期待どおりそれぞれのセルの記述結果が出力セルに反映されました。

Nodebook
1In [2]: %%d3
2        <g></g>
3        <script>d3.select("g").text("AAA")</script>
4        AAA
5In [3]: %%d3
6        <g></g>
7        <script>d3.select("g").text("BBB")</script>
8        BBB