Nassir created ZEPPELIN-2608: -------------------------------- Summary: Zeppelin not displaying d3 visualisation in cell Key: ZEPPELIN-2608 URL: https://issues.apache.org/jira/browse/ZEPPELIN-2608 Project: Zeppelin Issue Type: Bug Reporter: Nassir
When I run the code below in a cell referencing a rawJson in scala the bubble graph is not displayed. Instead, either I see no display or the bubble graph appears being my cells: %spark print(s"""%html <meta charset="utf-8"> <style> circle { fill: rgb(31, 119, 180); fill-opacity: 0.5; stroke: rgb(31, 119, 180); stroke-width: 1px; } .leaf circle { fill: #ff7f0e; fill-opacity: 1; } text { font: 14px sans-serif; } </style> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script> var json = { "name": "data", "children": [ { "name": "topics", "children": [ ${rawJson} ] } ] }; var r = 1500, format = d3.format(",d"), fill = d3.scale.category20c(); var bubble = d3.layout.pack() .sort(null) .size([r, r]) .padding(1.5); var vis = d3.select("body").append("svg") .attr("width", r) .attr("height", r) .attr("class", "bubble"); var node = vis.selectAll("g.node") .data(bubble.nodes(classes(json)) .filter(function(d) { return !d.children; })) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }) color = d3.scale.category20(); node.append("title") .text(function(d) { return d.className + ": " + format(d.value); }); node.append("circle") .attr("r", function(d) { return d.r; }) .style("fill", function(d) {return color(d.topicName);}); var text = node.append("text") .attr("text-anchor", "middle") .attr("dy", ".3em") .text(function(d) { return d.className.substring(0, d.r / 3)}); text.append("tspan") .attr("dy", "1.2em") .attr("x", 0) .text(function(d) {return Math.ceil(d.value * 10000) /10000; }); // Returns a flattened hierarchy containing all leaf nodes under the root. function classes(root) { var classes = []; function recurse(term, node) { if (node.children) node.children.forEach(function(child) { recurse(node.term, child); }); else classes.push({topicName: node.topicId, className: node.term, value: node.probability}); } recurse(null, root); return {children: classes}; } </script> """) -- This message was sent by Atlassian JIRA (v6.3.15#6346)