이 자습서에서는 displayHTML 함수를 사용하여 Azure Databricks Notebook에서 HTML, SVG 및 D3 시각화를 렌더링합니다.
메모
- 내용 및 출력을 포함하여 Notebook 셀의 최대 크기는 16MB입니다.
displayHTML함수에 전달하는 HTML의 크기가 이 값을 초과하지 않아야 합니다. - 외부 리소스에 연결할 때는
http://대신https://를 사용합니다. 그렇지 않으면 혼합 콘텐츠 오류로 인해 그래픽, 이미지 또는 JavaScript가 제대로 렌더링되지 않을 수 있습니다.
사전 요구 사항
- Azure Databricks 작업 영역에 액세스합니다.
- 컴퓨팅에 연결된 Notebook입니다.
HTML 코드 표시
displayHTML("<h3>You can view HTML code in notebooks.</h3>")
SVG 시각화 표시
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 시각화 표시
Python 데이터 구조에서 동적으로 D3 시각화 HTML을 생성할 수 있습니다.
에서 D3 https://d3js.org/에 대해 자세히 알아보세요.
# 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)]
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)