// Change these colors to your favorites to change the D3 visualization. val colorsRDD = sc.parallelize(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))) val colors = colorsRDD.collect()
colorsRDD: org.apache.spark.rdd.RDD[(Int, Int, Int)] = ParallelCollectionRDD[1] at parallelize at command-3901575101284196:2
colors: Array[(Int, Int, Int)] = 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> """)
HTML, Javascript, D3 and SVG
You can view HTML code, including Javascript, D3, SVG and more in Python, Scala, and R notebooks, with the
displayHTML
method.Note:
The maximum size for a notebook cell, both contents and output, is 16MB. Make sure that the size of the HTML you pass to the
displayHTML
function does not exceed this value.If you link to anything across the web, use
https://
instead ofhttp://
when linking to external resources. If you don't, your graphics, images, or Javascript may not render correctly due to mixed content errors.Last refresh: Never