メインコンテンツまでスキップ
非公開のページ
このページは非公開です。 検索対象外となり、このページのリンクに直接アクセスできるユーザーのみに公開されます。
に最終更新

HTML、SVG、D3 ビジュアライゼーションをScalaノートブックに表示する

このチュートリアルでは、 displayHTML関数を使用して、Databricks Scala ノートブックで HTML、SVG、および D3 の視覚化をレンダリングします。

注記
  • ノートブックセルの最大サイズ（内容と出力を含む）は16MBです。displayHTML関数に渡す HTML のサイズがこの値を超えないようにしてください。
  • 外部リソースにリンクする場合は、 http://の代わりにhttps://使用してください。そうしないと、混合コンテンツエラーにより、グラフィック、画像、またはJavaScriptが正しく表示されない可能性があります。

前提条件​

  • Databricksワークスペースへのアクセス。
  • コンピュートに付属するノートブック。

HTMLコードを表示する​

Scala
displayHTML("<h3>You can view HTML code in notebooks.</h3>")

SVGビジュアライゼーションを表示する​

Scala
displayHTML("""<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg>""")

displayHTMLを使用してD3ビジュアライゼーションを表示する​

Scalaのデータ構造から、D3の可視化用HTMLを動的に生成できます。

D3 の詳細については、 https://d3js.org/をご覧ください。

Scala
// Change these colors to your favorites to change the D3 visualization.
val colors = Array((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))

Scala
displayHTML(s"""
<!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${colors(0)}}
.PiYG .q1-9{fill:rgb${colors(1)}}
.PiYG .q2-9{fill:rgb${colors(2)}}
.PiYG .q3-9{fill:rgb${colors(3)}}
.PiYG .q4-9{fill:rgb${colors(4)}}
.PiYG .q5-9{fill:rgb${colors(5)}}
.PiYG .q6-9{fill:rgb${colors(6)}}
.PiYG .q7-9{fill:rgb${colors(7)}}
.PiYG .q8-9{fill:rgb${colors(8)}}

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

var width = 960,
    height = 500;

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

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

var 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>
  """)

次のステップ​

サンプルノートブック​

HTML、SVG、D3 ビジュアライゼーションをScalaノートブックに表示する

ノートブックを新しいタブで開く
このページの見出し