JSFiddle - React, Tailwind, and code Playground

by emepyc

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://www.ebi.ac.uk/~mp/ePeek/lib/ePeek.js"></script>
<link rel="stylesheet" href="http://www.ebi.ac.uk/~mp/ePeek/lib/ePeek.css">
<script src="http://www.ebi.ac.uk/~mp/ePeek/clients/lib/minimal2.js"></script>
<div id="mytree"></div>
<div id="mydiv"></div>

CSS

.node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.node {
  font: 10px sans-serif;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

JavaScript

var species_tree = {
    "name": "root",
    "children": [
	{
	    "name": "N1",
	    "children": [
		{
		    "name": "N2",
		    "children": [
			{"species": "Human", "gene": "BRCA1"},
			{"species": "Mouse", "gene": "BRCA1"},
			{"species": "Rat", "gene" : "BRCA1"}
		    ]
		},
		{
		    "name": "N3",
		    "children": [
			{"species": "Gorilla", "gene": "BRCA1"},
			{"species": "Chimpanzee", "gene": "BRCA1"}
		    ]
		}
	    ]
	}
    ]
};

function plotTree(div) {
    var width = 1500;
    var height = 500;

    var cluster = d3.layout.cluster().size([500,500]).nodeSize([70,100]);

    var nodes = cluster.nodes(species_tree);
    var links = cluster.links(nodes);

    var svg = d3.select(div)
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(40,250)");

    var link = svg.selectAll(".link")
	.data(links)
	.enter().append("path")
	.attr("class", "link")
	.attr("d", elbow);

    var node = svg.selectAll(".node")
	.data(nodes)
	.enter().append("g")
	.attr("class", "node")
    .attr("id", function(d){return d.species})
	.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; });

    var label = node.append("g")
	.attr("class", "label");

    label.append("circle")
	.attr("r", 4.5);

    label.append("text")
	.attr("x", function(d) {return 8})
	.text(function(d) {return d.species});

    function elbow(d, i) {
	return "M" + d.source.y + "," + d.source.x
	    + "V" + d.target.x + "H" + d.target.y;
    }
}

var epeek_nolayout = function() {
    "use strict";

    var slot_type = {
	slot_height : 30,
	gene_height : 10,
	show_label  : true
    };
    var height = 50;
    var genes = [];
    var genes_layout = function(gs) {
	for (var i = 0; i < gs.length; i++) {
	    gs[i].slot = 0;
	}
	genes = gs
	console.log("GENES:");
	console.log(genes);
    };

    genes_layout.scale = function(){};
    genes_layout.height = function(){return height}
    genes_layout.genes = function(){return...