Scala not defterlerinde HTML, SVG ve D3 görselleştirmelerini görüntüleme

Bu sayfanın not defteri sürümünü aç

Bu öğreticide, Azure Databricks Scala not defterlerinde HTML, SVG ve D3 görselleştirmelerini işlemek için displayHTML işlevini kullanacaksınız.

Note

  • İçindekiler ve çıkışlar da dahil olmak üzere not defteri hücresinin boyut üst sınırı 16 MB'tır. İşleve geçirdiğiniz displayHTML HTML boyutunun bu değeri aşmadığından emin olun.
  • Dış kaynaklara bağlantı verirken http:// yerine https:// kullanın. Aksi takdirde, grafikler, görüntüler veya JavaScript karışık içerik hataları nedeniyle doğru şekilde işlenmeyebilir.

Prerequisites

  • Azure Databricks çalışma alanına erişim.
  • İşlem için eklenmiş bir not defteri.

HTML kodunu görüntüleme

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

SVG görselleştirmelerini görüntüleme

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 ile D3 görselleştirmelerini görüntüleme

Scala veri yapılarından dinamik olarak D3 görselleştirme HTML'i oluşturabilirsiniz.

D3 hakkında daha fazla bilgi için bkz https://d3js.org/. .

// 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))


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

Sonraki Adımlar

Örnek defter

Scala not defterlerinde HTML, SVG ve D3 görselleştirmelerini görüntüleme

Dizüstü bilgisayar al

  • Last updated on