DatabricksノートブックにおけるHTML、D3、SVGの活用

[HTML, D3, and SVG in notebooks \| Databricks on AWS](https://docs.databricks.com/notebooks/visualizations/html-d3-and-svg.html) [2021/6/11時点]の翻訳、および、サンプルPythonノートブックを説明したものです。

> [Databricksクイックスタートガイド](https://qiita.com/taka_yayoi/items/125231c126a602693610)のコンテンツです。

:::note warn
本書は抄訳であり内容の正確性を保証するものではありません。正確な内容に関しては原文を参照ください。
:::

本書では、どのようにHTML、SVG、D3ビジュアライゼーションをPython、Scalaノートブックで表示するのかを説明します。

D3をレンダリングするカスタムJavascriptライブラリを使用したいのであれば、[Use a Javascript library](https://docs.databricks.com/data/filestore.html#use-a-javascript-library)を参照ください。

Javascript、D3のようなHTMLコードやSVGを参照するには`displayHTML`メソッドを使用します。

**注意:** 

- コンテンツと出力を含むノートブックセルの最大サイズは16MBです。`displayHTML`関数に引き渡すHTMLのサイズがこの値を超えないようにしてください。
- 外部リソースにリンクする場合には`http://`ではなく`https://`を使用してください。さもないと、混成コンテンツエラーのため、画像、グラフィック、Javascriptが適切にレンダリングされない場合があります。

# HTML、D3、SVGのPythonノートブック

https://github.com/taka-yayoi/public_repo/tree/main/html_d3_svg

## HTMLの表示

`displayHTML`にHTML文字列を渡してセルを実行することで、アウトプットでHTMLがレンダリングされます。

```py:Python
displayHTML("<h3>ノートブックでHTMLコードを参照できます。</h3>")
```

![Screen Shot 2021-12-25 at 15.59.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/74f9c7ef-7131-3aa7-82f2-9c4fce24ceb5.png)

## SVGビジュアルの表示

```py:Python
displayHTML("""<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   お使いのブラウザはインラインSVGをサポートしていません。
</svg>""")
```

![Screen Shot 2021-12-25 at 16.00.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/f07d308c-744b-8dad-cf20-96ecdb4d4a91.png)

## displayHTMLによるD3ビジュアライゼーションの表示

**注意:** D3ビジュアライゼーションのHTMLコードの一部をRDDからプログラムすることが可能です。

D3の詳細に関しては http://d3js.org/ を参照ください。

RDDを準備します。

```py:Python
# D3ビジュアライゼーションを変更するためにお好きな色に変更してください
colorsRDD = sc.parallelize([(197,27,125), (222,119,174), (241,182,218), (253,244,239), (247,247,247), (230,245,208), (184,225,134), (127,188,65), (77,146,33)])
colors = colorsRDD.collect()
```

d3にRDDを引き渡してレンダリングします。

```py:Python
htmlCode = """
<!DOCTYPE html>
<meta charset="utf-8">
<style>

path {{
  fill: yellow;
  stroke: #000;
}}

circle {{
  fill: #fff;
  stroke: #000;
  pointer-events: none;
}}

.PiYG .q0-9{{fill:rgb{colorArray[0]}}}
.PiYG .q1-9{{fill:rgb{colorArray[1]}}}
.PiYG .q2-9{{fill:rgb{colorArray[2]}}}
.PiYG .q3-9{{fill:rgb{colorArray[3]}}}
.PiYG .q4-9{{fill:rgb{colorArray[4]}}}
.PiYG .q5-9{{fill:rgb{colorArray[5]}}}
.PiYG .q6-9{{fill:rgb{colorArray[6]}}}
.PiYG .q7-9{{fill:rgb{colorArray[7]}}}
.PiYG .q8-9{{fill:rgb{colorArray[7]}}}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

width = 960, height = 500;

vertices = d3.range(100).map(function(d) {{
  return [Math.random() * width, Math.random() * height];
}});

svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("class", "PiYG")
    .on("mousemove", function() {{ vertices[0] = d3.mouse(this); redraw(); }});

path = svg.append("g").selectAll("path");

svg.selectAll("circle")
    .data(vertices.slice(1))
  .enter().append("circle")
    .attr("transform", function(d) {{ return "translate(" + d + ")"; }})
    .attr("r", 2);

redraw();

function redraw() {{
  path = path.data(d3.geom.delaunay(vertices).map(function(d) {{ return "M" + d.join("L") + "Z"; }}), String);
  path.exit().remove();
  path.enter().append("path").attr("class", function(d, i) {{ return "q" + (i % 9) + "-9"; }}).attr("d", String);
}}

</script>
 """.format(colorArray = colors)
displayHTML (htmlCode)
```

![Screen Shot 2021-12-25 at 16.02.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1168882/6fe444ed-196a-50d8-a4b0-3f26085f091e.png)


# HTML、D3、SVGのScalaノートブック

https://docs.databricks.com/_static/notebooks/html-d3-svg-scala.html

### Databricks 無料トライアル

[Databricks 無料トライアル](https://databricks.com/jp/try-databricks)