Old school D3 from simpler times

All examples By author By category About

jtremblay

Full window Github gist

Bioinformatics pipeline viewer

<!DOCTYPE html>
<html>
<head lang="en">

<meta charset="UTF-8">
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <title></title>
</head>
<body>
     <style type="text/css">
        .title{
           font: 20px Verdana; font-weight: bold; 
        }
        .text1{
           font: 10px Verdana; font-weight: normal; color: blue; 
        }
        .node {
            //stroke: #fff;
            //stroke-width: 1.5px;
            stroke: #333;
            stroke-width: 1.5px;
        }
        .link {
            stroke: black;
            stroke-width: 1px;
            stroke-opacity: 1;
            fill:none;
        }
        text {
            font: 10px sans-serif;
            pointer-events: none;
            text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
        }
        div.tooltip {
            position: absolute;           text-align: center;   width: 120px;
            height: 100px;                padding: 2px;         font: 12px sans-serif;
            background: lightsteelblue;   border: 0px;          border-radius: 8px;
            pointer-events: none;
        }
    </style>

<p class="title">rRNATagger pipeline - for 16S/18S/ITS amplicons</p>
<p class="text1">By Julien Tremblay - jtremblay514@gmail.com</p>
<p class="text1">Version 0.1</p>

<script type="text/javascript">
    //Width and height
    var w = 1700;
    var h = 800;
    var radius = 6;
    var dataset;
    var nodes = [];
    var links = [];
    //Create SVG element
    var svg = d3.select("body")
        .append("svg")
        .attr("width", w)
        .attr("height", h)
    var div = d3.select("body").append("div")
        .attr("class", "tooltip")
        .style("opacity", 0);
    /*    
    svg.append("rect")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("fill", "#004C99");
    */
    
    d3.json("pipeline.json", function(error, json) {
        if (error) return console.warn(error);
        dataset = json;
        console.log(json)
        //visualizeit();
        update();
    });
    function update() {
        //Initialize a default force layout, using the nodes and edges in dataset
        var force = d3.layout.force()
                .nodes(dataset.nodes)
                .links(dataset.links)
                .size([w, h])
                .linkDistance(30)
                .charge(-300)
                .start();
        //var colors = d3.scale.category10();
        var color = d3.scale.category20();
        // Per-type markers (i.e. marker=arrow,  as they don't inherit styles.
        svg.append("defs").selectAll("marker")
            .data(["next"])
            .enter().append("marker")
            .attr("id", function(d) { return d; })
            .attr("viewBox", "0 -5 10 10")
            .attr("refX", 15)
            .attr("refY", -1.5)
            .attr("markerWidth", 6)
            .attr("markerHeight", 6)
            .attr("orient", "auto")
            .append("path")
            .attr("d", "M0, -5L10,0L0,5");
        //Create edges as lines
        edges = svg.selectAll(".link")
                .data(dataset.links)
                .enter()
                .append("path")
                .attr("marker-end", function(d) { return "url(#next)"; })
                .attr("class", "link");
                //.style("stroke", "#ccc");
                //.style("stroke-width", 1);
        //Create nodes as circles
        nodes = svg.selectAll(".node")
                .data(dataset.nodes)
                .enter()
                .append("circle")
                .attr('r', function(d) { if(d.value == 1){ return 5; }else{ return d.value; } })
                .attr("class", "node")
                .attr("group_name", function(d) { return d.group; })
                .attr("selected", function(d){ return "false"; })
                .style("fill", function(d) { return color(d.group); })
                .on("click", click)
                .call(force.drag);
        nodes.on("mouseover", function(d) {
                console.log(d);
                div.transition()
                .duration(200)
                .style("opacity", .9)
                //div .html(formatTime(d.date) + "<br/>"  + d.close)
                div.html("<br>" + d.desc + "<br>")
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
            })
            .on("mouseout", function(d) {
                div.transition()
                .duration(500)
                .style("opacity", 0);
            });
        // Append the labels to each group
        var text = svg.selectAll("text")
                .data(force.nodes())
                .enter().append("text")
                .attr("x", 8)
                .attr("y", ".31em")
                .text(function (d) {
                    return d.name;
                });
        //Every time the simulation "ticks", this will be called
        force.on("tick", function () {
            edges.attr("d", linkArc);
            
            //nodes 
            //nodes.attr("cx", function (d) {return d.x; })
            //.attr("cy", function (d) { return d.y; });
            //nodes to stay inside canvas
            nodes.attr("cx", function(d) { return d.x = Math.max(radius, Math.min(w - radius, d.x)); })
            .attr("cy", function(d) { return d.y = Math.max(radius, Math.min(h - radius, d.y)); });
            text.attr("transform", transform);
        });
        function click(d) {
            if (!d3.event.defaultPrevented) {
               var curr_selection = d3.selectAll("circle[group_name=" + d.group + "]")
               var curr_group = curr_selection.transition()
                    .duration(700)
                    .ease("bounce")
                    .attr({
                        r: function(d) { 
                            currRadius = d3.select(this).attr("r");
                            if(d3.select(this).attr('selected') == "false"){
                                console.log("was selected: " + d3.select(this).attr('selected'))
                                console.log("currRadius: " + currRadius)
                                return (currRadius * 2);
                            }else{
                                //d3.select(this).attr('selected') = "true";
                                console.log("was not selected: " + d3.select(this).attr('selected'))
                                console.log("currRadius: " + currRadius)
                                return (currRadius / 2);
                            }
                        },
                        selected: function(d){
                            if(d3.select(this).attr('selected') == "false"){
                               return "true"; 
                            }else{
                                return "false";
                            }
                        }
                    })
               console.log(curr_group)
               console.log(new_selection)
               //var curr_nodes = node
            }
        }
        function linkArc(d) {
            var dx = d.target.x - d.source.x;
            var dy = d.target.y - d.source.y;
            var dr = Math.sqrt(dx * dx + dy * dy);
            return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + d.target.x + "," + d.target.y;
        }
        function transform(d) {
            return "translate(" + d.x + "," + d.y + ")";
        }
    }
</script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js