Afficher les visualisations HTML, SVG et D3 dans les notebooks

Ouvrir dans Databricks

Dans ce tutoriel, vous utilisez la fonction displayHTML pour afficher des visualisations HTML, SVG et D3 dans les Notebooks Databricks.

remarque

La taille maximale d’une cellule de Notebook, incluant le contenu et le résultat, est de 16 Mo. Assurez-vous que la taille du code HTML que vous transmettez à la fonction displayHTML ne dépasse pas cette valeur.
Lorsque vous créez un lien vers des ressources externes, utilisez https:// au lieu de http://. Autrement, les graphiques, les images ou JavaScript pourraient ne pas s'afficher correctement en raison d'erreurs de contenu mixte.

Prérequis

Accès à un Workspace Databricks.
Un Notebook associé à un compute.

Afficher le code HTML

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

Afficher les visualisations SVG

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

Afficher les visualisations D3 avec displayHTML

Vous pouvez générer dynamiquement du HTML de visualisation D3 à partir de structures de données Python.

En savoir plus sur D3 sur https://d3js.org/.

Python
# Change these colors to your favorites to change the D3 visualization.
colors = [(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)]

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)

Étapes suivantes

Exemple de Notebook

Afficher les visualisations HTML, SVG et D3 dans les Notebook

Ouvrir le notebook dans un nouvel onglet Ouvrir dans Databricks

Prérequis​

Afficher le code HTML​

Afficher les visualisations SVG​

Afficher les visualisations D3 avec displayHTML​

Étapes suivantes​

Exemple de Notebook​