daily pastebin goal
50%
SHARE
TWEET

Untitled

a guest Jun 19th, 2017 43 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. function melodyChart() {
  2.     var settings = {
  3.         chartContainerClass: ".g-chart-container-melody-chart"     
  4.     };
  5.  
  6.     var chartContainer = d3.select(settings.chartContainerClass).html('');
  7.  
  8.     var margin = {
  9.             top:40,
  10.             left:100,
  11.             right:140,
  12.             bottom:40
  13.         };
  14.  
  15.     var w = chartContainer.node().clientWidth - margin.left - margin.right,
  16.             h = 600 - margin.top - margin.bottom;
  17.  
  18.     d3.queue()
  19.         .defer(d3.csv, "note-frequency.csv")
  20.         .defer(d3.csv, "melody.csv")
  21.         .await(ready);
  22.  
  23.     function ready(error, freqD, melodyD) {
  24.         if (error) throw "error: not loading data, bro";   
  25.                
  26.         melodyD.forEach(function(d){
  27.             d.beats = +d.beats;
  28.         });
  29.        
  30.         var freqRange = freqD.map(function(d){
  31.             return d.freq;
  32.         });    
  33.  
  34.         var freqByNote = {};
  35.     freqD.forEach(function(d){         
  36.             freqByNote[d.note] = +d.freq;          
  37.         });
  38.  
  39.     melodyD.forEach(function(d,i){
  40.         var indexM = melodyD[i];
  41.         var sliced = melodyD.slice(0,i);
  42.         var total = 1;
  43.                 sliced.forEach(function(d){
  44.                     total += d.beats;
  45.                     return total;
  46.                 });
  47.                 d.songPos = total;
  48.     });    
  49.  
  50.         function axisSum(input, pos){
  51.             if (pos !== undefined) {
  52.             }
  53.                 var total =  0;
  54.                 for(var i=0;i<input.length;i++) {                      
  55.                     total += Number(input[i].beats);
  56.                 }
  57.                 return total;              
  58.         }
  59.  
  60.         var totalBeats = axisSum(melodyD);
  61.        
  62.         var yscale = d3.scaleLinear()
  63.             .domain([0,200])
  64.             .range([h,0]);
  65.  
  66.         var yaxis = d3.axisRight()
  67.             .scale(yscale)         
  68.             .tickFormat(d3.format(".4r"))
  69.             .tickSize(w);      
  70.  
  71.         var xscale = d3.scaleLinear()
  72.           .domain([1,totalBeats+1])
  73.           .range([0, w]);
  74.  
  75.         var xaxis = d3.axisBottom(xscale)
  76.             .ticks(totalBeats)
  77.             .tickSize(-h);     
  78.  
  79.         var svg = chartContainer           
  80.             .append("svg")
  81.             .attr("width", w + margin.left + margin.right)
  82.             .attr("height", h + margin.top + margin.bottom)
  83.             .append("g.wrap")              
  84.             .translate([margin.left,margin.top]);
  85.  
  86.         svg
  87.             .append("text.x-axis-label")
  88.             .translate([w/2,h+margin.bottom])
  89.             .attr("text-anchor","middle")
  90.             .text("Beats");
  91.  
  92.         svg
  93.             .append("text.y-axis-label")
  94.             .attr("transform","translate("+ (w+70) + "," + h/2 +"), rotate(90)")
  95.             .attr("text-anchor","middle")          
  96.             .text("Note Frequency");
  97.  
  98.         svg.append("g.y-axis")         
  99.             .call(yaxis);
  100.  
  101.         svg.append("g.x-axis")
  102.             .translate([0,h])          
  103.           .call(xaxis);      
  104.        
  105.         var ticks = d3.selectAll(".x-axis .tick");
  106.         ticks.attr("class", function(d,i){
  107.                 var self = d3.select(this);
  108.             if(i%4 != 0) {             
  109.                 self.select("text").text("");
  110.                 return "up-beat";
  111.             } else {
  112.                 self.select("text").text("1");
  113.                 return "down-beat";
  114.             }
  115.         });
  116.  
  117.         var lineGen2 = d3.line()
  118.             .x( function(d){ return xscale(d.songPos); })
  119.             .y( function(d){ return yscale(freqByNote[d.note]); });
  120.  
  121.         svg.append("path.path")
  122.             .attr("d", lineGen2(melodyD));
  123.  
  124.         var dots = svg
  125.             .selectAll("g.dot-note")
  126.             .data(melodyD)
  127.             .enter()
  128.             .append("g.cov-dot")
  129.             .attr("transform", function(d){ return "translate(" + xscale(d.songPos) +","+ yscale(freqByNote[d.note]) +")" ; });
  130.  
  131.         dots
  132.             .append("circle")
  133.             .attr("r", 3);
  134.  
  135.         dots
  136.             .append("text")
  137.             .text(function(d){
  138.                 var note = d.note;
  139.                 note = note.replace(/[0-9]/g, '');
  140.                 note = note.toUpperCase();
  141.                 return note;
  142.             })
  143.             .attr("dy",-10)
  144.             .attr("text-anchor","middle");
  145.     }
  146. }
  147.  
  148. $( window ).resize(fireAll);
  149. function fireAll() {   
  150.     melodyChart();
  151. }
  152. // pageload fire
  153. ;(function(){  
  154.     melodyChart();
  155. })();
RAW Paste Data
Top