DirectedAcyclicGraph Execution viz

_.md

[ 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":"DirectedAcyclicGraph Execution viz","endpoint":"","display":"svg","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}},"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/ieCrgTg.gif","ajax-caching":true}

inlet.js

// fundamental and harmonics.
var TAU = Math.PI * 2;

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

var svg = d3.select("svg");

svg.attr("height", 213)
var defs = svg.append("defs");
// var group1 = svg.append("g").classed("group1", true);
var group2 = svg.append("g").classed("group2", true);

// group1.attr("transform", "translate(" + [61, 33] + ")")
group2.attr("transform", "translate(" + [61, 33] + ")")

// 
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 512 - margin.left - margin.right,
    height = 128 - margin.top - margin.bottom;

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

var y = d3.scale.linear()
    .range([height*2, 0]);

var y2 = d3.scale.linear()
    .range([height, 0]);

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var segments = 124;
var amplitude = 1;

var data1 = make_wave(amplitude, TAU);
var data2 = make_wave(amplitude/2, TAU*2);
var data3 = make_wave(amplitude/3, TAU*3);
var data4 = make_wave(amplitude/4, TAU*4);

var frequencies = [
  	{data:data1, color:"#00A3FF"},
  	{data:data2, color:"#DB2F8F"},
  	{data:data3, color:"#38EB3F"},
  	{data:data4, color:"#FF3402"}];

var summed_frequencies = summed(frequencies);

//make_graph(frequencies, group1)
make_graph(summed_frequencies, group2)


/*  helpers */ 


function make_graph(frequencies, group){

  var line = d3.svg.line()
      .x(function(d) { return x(d.x); })
      .y(function(d) { return y2(d.y); });
  
  frequencies.forEach(function(d){
      group.append("path")
          .datum(d.data)
          .attr("class", "line")
          .attr("d", line)
          .style("stroke", d.color)
          .style("stroke-width", 2.8)
          .style("fill", "none")
  })
  
  x.domain(d3.extent(data1, function(d) { return d.x; }));
  y.domain(d3.extent(data1, function(d) { return d.y; }));
  
  group.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
      .append("text")
      .attr("y", -4)
      .attr("x", width + 36)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Time");
  
  group.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", -46)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Amplitude");

}
    
function make_wave(amp, period){	
    var m_array = [];
    var seg_size = period / segments;
    for (var i = 0; i <= segments; i += 1){
        var pos = {
            x: i*seg_size/period, 
            y: Math.sin(seg_size * i)*amp};
        m_array.push(pos)
    }
    return m_array; 
}


function summed(f_array){
    var num_frequencies = f_array.length;
	var m_array = [];
    var array_max = 0;
  
    // sum the arrays
  	for (var i = 0; i <= segments; i += 1){
		var _sum = 0;       
      	for (var j = 0; j < num_frequencies; j += 1){
        	_sum += ((f_array[j].data[i].y) / num_frequencies)
      	}
        if (_sum > array_max) array_max = _sum
    	var pos = {
          	x: f_array[0].data[i].x, 
            y: _sum
        };
   		m_array.push(pos)
    }
    
    // normalize the array
  	var normalized_array = [];
  	for (var i = 0; i <= segments; i += 1){
      	normalized_array.push({
        	x: m_array[i].x,
         	y: m_array[i].y / array_max
        })
  	}
  
	return [{data:normalized_array, color: "#A5A5A5"}]
    //return [{data:m_array, color: "#A5A5A5"}]
}











/* 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; }

body {
  font: 11px sans-serif;
}

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

.x.axis path {
  display: none;
}