How to generate D3.js circular dendrogram code from Python
d3.js, javascript, plot, python
Solution
Assuming that you want to avoid having to write javascript and using python instead, you could have a look at pyjs. From their website:
pyjs contains a Python-to-JavaScript compiler, an AJAX framework and a
Widget Set API. pyjs started life as a Python port of Google Web Toolkit,
the Java-to-JavaScript compiler.
I haven't used it and am unsure how you would go about including the d3 library. However their wiki has the following page:
https://github.com/pyjs/pyjs/wiki/Calling-a-jQuery-component-from-Pyjs
That article might give you an idea of whether pyjs is useful to you.
Problem
The following figure is generated with D3.js. based on the code here: ``` <!DOCTYPE html> <meta charset="utf-8"> <title>Flare Dendrogram</title> <style> .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px; } .node { font: 10px sans-serif; } .link { fill: none; stroke: #ccc; stroke-width: 1.5px; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> var radius = 960 / 2; var cluster = d3.layout.cluster() .size([360, radius - 120]); var diagonal = d3.svg.diagonal.radial() .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; }); var svg = d3.select("body").append("svg") .attr("width", radius * 2) .attr("height", radius * 2) .append("g") .attr("transform", "translate(" + radius + "," + radius + ")"); d3.json("/d/4063550/flare.json", function(error, root) { var nodes = cluster.nodes(root); var link = svg.selectAll("path.link") .data(cluster.links(nodes)) .enter().append("path") .attr("class", "link") .attr("d", diagonal); var node = svg.selectAll("g.node") .data(nodes) .enter().append("g") .attr("class", "node") .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; }) node.append("circle") .attr("r", 4.5); node.append("text") .attr("dy", ".31em") .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; }) .text(function(d) { return d.name; }); }); d3.select(self.frameElement).style("height", radius * 2 + "px"); </script> ``` Is there a way I can use Python to generate the above exact figure (HTML)?