Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to generate D3.js circular dendrogram code from Python

The following figure is generated with D3.js.

enter image description here

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)?

like image 734
neversaint Avatar asked Mar 29 '14 04:03

neversaint


1 Answers

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.

like image 78
pandita Avatar answered Oct 21 '22 04:10

pandita