DAG multigraph v3

_.md

[ Launch: DAG wjson wstyle winfo mltigrah2 ] e231e1b4ab62ee800142 by zeffii
[ Launch: DAG wjson wstyle winfo mltigrah ] ede5f8b877d8c5f7069e by zeffii
[ Launch: DAG wjson wstyle winfo ] 40efd81278383b4e1c56 by zeffii
[ Launch: DAG wjson wstyle ] 93e8b865277803a2a40d by zeffii
[ Launch: DAG Execution viz mono3 wjson ] bab5d09bfeee093e8dd1 by zeffii
[ Launch: DAG Execution viz mono3 ] 3dafb28b66089d31ee89 by zeffii
[ Launch: DAG Execution viz mono ] 3827e4715d05281a12d5 by zeffii
[ Launch: DirectedAcyclicGraph Execution viz mono ] 99f8c1106b72653aa18d by zeffii
[ Launch: DirectedAcyclicGraph Execution viz ] ca1867cd09d88b68db1a by zeffii
[ Launch: fundamental and harmonics IMG2 ] 031730d923702adfad71 by zeffii
[ Launch: fundamental and harmonics IMG1 ] 5112280 by zeffii
[ Launch: fundamental and harmonics ] 5112252 by zeffii
[ Launch: zeffii default ] 5100062 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"DAG multigraph v3","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"terrible.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/p3y5SkG.png","ajax-caching":false}

inlet.js

/* SHARED FUNCTIONS*/

function getArray(obj) {
  var data = [];
  for(var prop in obj) {
    if(obj.hasOwnProperty(prop)){
      data.push(obj[prop]);
    }
  }
  return data
}

function translate(a, b) { 
  return "translate(" + [a, b] + ")" 
}

// Collect Totals
// the current code does.
// * namely : a = get first start, 
// *          b = get last start + last duration
// *          c = delta(b, a)
// on small graphs, the time spent in between function calls to 
// each graph is almost as large as the graph takes to process.

var vice_start = 0, vice_end=0;
for (var graph_idx in tributary.terrible.graphs){
  var u_graph = tributary.terrible.graphs[graph_idx];
  for (var item_idx in u_graph.items){
      var item = u_graph.items[item_idx]
      vice_start = item.start;
      vice_end = item.duration;
  }
}
var graph1 = tributary.terrible.graphs[0]
var first_start = graph1.items[0].start
var totals = ((vice_start + vice_end) - first_start) * 1000


d3.select("body").style("background-color", d3.rgb(240,240,240));

var margin = {top: 16, right: 6, bottom: 30, left: 103},
    width = 900 - margin.left - margin.right,
    height = 116 - margin.top - margin.bottom;

var scalar = width/totals;
var barheight = 15;
var tx = 103;  // internal x position.


/* UNIQUE FUNCTIONS PER SVG */

function draw_graph(u_graph){

    var graphname = u_graph.name.replace(/\./g, '_')
    console.log(graphname);
    var disp = d3.select('#display')
    var svg = disp.append('svg').attr({'id': graphname});

    var data = getArray(u_graph.items);
    var num_bars = data.length + 2;

    var bars = (num_bars * barheight);
    var svg_height = bars + 77 + margin.top + margin.bottom;
    svg.attr({height: svg_height, width: 964})
      .style({border: "1px solid #d6d6d6"});

    var num_keys = data.length;

    var group2 = svg.append("g")
      .attr({transform: function(d){ return translate(tx, -32) } })

    var group3 = svg.append("g")
      .attr({transform: function(d){ return translate(tx, -11) } })

    var group1 = svg.append("g")
      .attr({transform: function(d){ return translate(tx, 77) } })

    var name_group = svg.append("g")
      .attr({transform: function(d){ return translate(tx- 10, 77) } })

    var x = d3.scale.linear()
      .domain([0, totals])
      .range([0, width]);

    var x2 = d3.scale.linear()
      .domain([0, totals])
      .range([0, width]);


    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

    var xAxis2 = d3.svg.axis()
      .scale(x2)
      .tickSize(bars+20)

    group2.append("g")
      .attr("class", "x axis")
      .attr("transform", translate(0, height))
      .call(xAxis)
      .append("text")
      .attr("y", -20)
      .attr("x", width/2 )
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Time (ms)");

    // margin.top + (num_keys*barheight)
    group3.append("g")
      .attr("class", "x axis")
      .attr("transform", translate(0, height))
      .call(xAxis2)
      .attr("id", "chunk")

    //
    var interims = first_start;
    
    var rect_groups = group1.selectAll("g").data(data);
    var rect = rect_groups.enter()
      .append("g")
      .attr({
        transform: function(d,i){
           var x = (d.start-interims) * scalar * 1000;
           var y = barheight*i;
           return translate(x, y) 
           } 
        })
    
    rect.append("rect")
      .attr({
        height: barheight, 
        width: function(d){ return d.duration * scalar * 1000 } })
      .style({fill: "#9ef"})

    // rect faux drop shadow
    rect.append('path')
      .attr({d: function(d,i){
        var xlen = (d.duration * scalar * 1000);
        var ybass = -barheight;
        return "M" + [0, 0, 0, -ybass, xlen, -ybass] }})
      .style({stroke: "#000000", fill: 'none', 'stroke-width': 0.2})

    rect.append("text")
      .text(function(d,i){ 
        var rounded = d3.round(d.duration * 1000, 4)
        return rounded })
      .attr({transform: translate(4,11) })
      .style({fill: "#434"})

    var node_names = name_group.selectAll("g").data(data);
    var node = node_names.enter().append("g")
      .attr({transform: function(d,i){
        var y = barheight*i;
        return translate(0, y+11); } })

    node.append("text")
    .text(function(d,i){return d.name })
    .attr({'text-anchor': 'end'})

}


for (var graph_idx in tributary.terrible.graphs){
  var u_graph = tributary.terrible.graphs[graph_idx];
  draw_graph(u_graph);
}



/* EOF  */

style.css

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }

#title header {
  height: 52px !important;
}

body {
  font: 11px sans-serif;
}

#panel {
  width: 493px; 
}

#panel #files {
  height: 3.6em; 
}

#panel #file-list {
  font-size: 1.1em;
  color: #aaa;
  opacity: .98;
}

#file-list li {
  background-image: none !important;
  color: #fff;
  font-weight: thin;
  letter-spacing: .2em;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

#chunk line {
  fill: none;
  stroke: #bad2d3;
  shape-rendering: crispEdges;
}

terrible.json

{
  "graphs": {
    "0": {
      "items": {
        "0": {
          "bl_idname": "SvGenFloatRange",
          "duration": 0.00010203810819531256,
          "name": "Float Series",
          "start": 2.624644403129448
        },
        "1": {
          "bl_idname": "ScalarMathNode",
          "duration": 0.00022125717095322628,
          "name": "function",
          "start": 2.6247534253655145
        },
        "2": {
          "bl_idname": "ScalarMathNode",
          "duration": 0.00018102859441659902,
          "name": "function.001",
          "start": 2.624980758727715
        },
        "3": {
          "bl_idname": "GenVectorsNode",
          "duration": 0.00013528255686123813,
          "name": "Vectors in",
          "start": 2.625167514306986
        },
        "4": {
          "bl_idname": "ViewerNode2",
          "duration": 0.00014540954227415526,
          "name": "Viewer Draw2",
          "start": 2.625308942896374
        }
      },
      "name": "NodeTree"
    },
    "1": {
      "items": {
        "0": {
          "bl_idname": "SvGenFloatRange",
          "duration": 6.53714368725744e-05,
          "name": "Float Series",
          "start": 2.6261603779251272
        },
        "1": {
          "bl_idname": "GenVectorsNode",
          "duration": 8.5695248977391e-05,
          "name": "Vectors in",
          "start": 2.6262328033311495
        },
        "2": {
          "bl_idname": "MatrixGenNode",
          "duration": 0.00015867938522928782,
          "name": "Matrix in",
          "start": 2.6263248541364894
        },
        "3": {
          "bl_idname": "GenListRangeIntNode",
          "duration": 5.838730900142863e-05,
          "name": "List Range Int",
          "start": 2.626488981141458
        },
        "4": {
          "bl_idname": "SvCircleNode",
          "duration": 0.00030716194376667616,
          "name": "Circle",
          "start": 2.6265529557527563
        },
        "5": {
          "bl_idname": "ViewerNode2",
          "duration": 0.00025282542893023674,
          "name": "Viewer Draw2",
          "start": 2.626866543094164
        }
      },
      "name": "NodeTree.001"
    }
  }
}