diff --git a/index.html b/index.html
index ff7ea09..f15e322 100644
--- a/index.html
+++ b/index.html
@@ -179,225 +179,229 @@
 <script>
 // BAR GRAPH SCRIPTS
 
-var myjson = ""; // THIS IS WHAT THE CONTENTS OF THE DATA WOULD GO INTO
-var margin = {top: 30, right: 120, bottom: 0, left: 120},
-    width = 960 - margin.left - margin.right,
-    height = 500 - margin.top - margin.bottom;
-
-var x = d3.scale.linear()
-    .range([0, width]);
-
-var barHeight = 20;
-
-var color = d3.scale.ordinal()
-    .range(["steelblue", "#ccc"]);
-
-var duration = 750,
-    delay = 25;
-
-var partition = d3.layout.partition()
-    .value(function(d) { return d.size; });
-
-var xAxis = d3.svg.axis()
-    .scale(x)
-    .orient("top");
-
-var svg = d3.select("body").append("svg")
-    .attr("width", width + margin.left + margin.right)
-    .attr("height", height + margin.top + margin.bottom)
-  .append("g")
-    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
-
-svg.append("rect")
-    .attr("class", "background")
-    .attr("width", width)
-    .attr("height", height)
-    .on("click", up);
-
-svg.append("g")
-    .attr("class", "x axis");
-
-svg.append("g")
-    .attr("class", "y axis")
-  .append("line")
-    .attr("y1", "100%");
-
-function populate(){
-  partition.nodes(myjson);
-  x.domain([0, myjson.value]).nice();
-  down(myjson, 0);
-}
-
-function down(d, i) {
-  if (!d.children || this.__transition__) return;
-  var end = duration + d.children.length * delay;
-
-  // Mark any currently-displayed bars as exiting.
-  var exit = svg.selectAll(".enter")
-      .attr("class", "exit");
-
-  // Entering nodes immediately obscure the clicked-on bar, so hide it.
-  exit.selectAll("rect").filter(function(p) { return p === d; })
-      .style("fill-opacity", 1e-6);
-
-  // Enter the new bars for the clicked-on data.
-  // Per above, entering bars are immediately visible.
-  var enter = bar(d)
-      .attr("transform", stack(i))
-      .style("opacity", 1);
-
-  // Have the text fade-in, even though the bars are visible.
-  // Color the bars as parents; they will fade to children if appropriate.
-  enter.select("text").style("fill-opacity", 1e-6);
-  enter.select("rect").style("fill", color(true));
-
-  // Update the x-scale domain.
-  x.domain([0, d3.max(d.children, function(d) { return d.value; })]).nice();
-
-  // Update the x-axis.
-  svg.selectAll(".x.axis").transition()
-      .duration(duration)
-      .call(xAxis);
-
-  // Transition entering bars to their new position.
-  var enterTransition = enter.transition()
-      .duration(duration)
-      .delay(function(d, i) { return i * delay; })
-      .attr("transform", function(d, i) { return "translate(0," + barHeight * i * 1.2 + ")"; });
-
-  // Transition entering text.
-  enterTransition.select("text")
-      .style("fill-opacity", 1);
-
-  // Transition entering rects to the new x-scale.
-  enterTransition.select("rect")
-      .attr("width", function(d) { return x(d.value); })
-      .style("fill", function(d) { return color(!!d.children); });
-
-  // Transition exiting bars to fade out.
-  var exitTransition = exit.transition()
-      .duration(duration)
-      .style("opacity", 1e-6)
-      .remove();
-
-  // Transition exiting bars to the new x-scale.
-  exitTransition.selectAll("rect")
-      .attr("width", function(d) { return x(d.value); });
-
-  // Rebind the current node to the background.
-  svg.select(".background")
-      .datum(d)
-    .transition()
-      .duration(end);
-
-  d.index = i;
-}
-
-function up(d) {
-  if (!d.parent || this.__transition__) return;
-  var end = duration + d.children.length * delay;
-
-  // Mark any currently-displayed bars as exiting.
-  var exit = svg.selectAll(".enter")
-      .attr("class", "exit");
-
-  // Enter the new bars for the clicked-on data's parent.
-  var enter = bar(d.parent)
-      .attr("transform", function(d, i) { return "translate(0," + barHeight * i * 1.2 + ")"; })
-      .style("opacity", 1e-6);
-
-  // Color the bars as appropriate.
-  // Exiting nodes will obscure the parent bar, so hide it.
-  enter.select("rect")
-      .style("fill", function(d) { return color(!!d.children); })
-    .filter(function(p) { return p === d; })
-      .style("fill-opacity", 1e-6);
-
-  // Update the x-scale domain.
-  x.domain([0, d3.max(d.parent.children, function(d) { return d.value; })]).nice();
-
-  // Update the x-axis.
-  svg.selectAll(".x.axis").transition()
-      .duration(duration)
-      .call(xAxis);
-
-  // Transition entering bars to fade in over the full duration.
-  var enterTransition = enter.transition()
-      .duration(end)
-      .style("opacity", 1);
-
-  // Transition entering rects to the new x-scale.
-  // When the entering parent rect is done, make it visible!
-  enterTransition.select("rect")
-      .attr("width", function(d) { return x(d.value); })
-      .each("end", function(p) { if (p === d) d3.select(this).style("fill-opacity", null); });
-
-  // Transition exiting bars to the parent's position.
-  var exitTransition = exit.selectAll("g").transition()
-      .duration(duration)
-      .delay(function(d, i) { return i * delay; })
-      .attr("transform", stack(d.index));
-
-  // Transition exiting text to fade out.
-  exitTransition.select("text")
-      .style("fill-opacity", 1e-6);
-
-  // Transition exiting rects to the new scale and fade to parent color.
-  exitTransition.select("rect")
-      .attr("width", function(d) { return x(d.value); })
-      .style("fill", color(true));
-
-  // Remove exiting nodes when the last child has finished transitioning.
-  exit.transition()
-      .duration(end)
-      .remove();
-
-  // Rebind the current parent to the background.
-  svg.select(".background")
-      .datum(d.parent)
-    .transition()
-      .duration(end);
-}
-
-// Creates a set of bars for the given data node, at the specified index.
-function bar(d) {
-  var bar = svg.insert("g", ".y.axis")
-      .attr("class", "enter")
-      .attr("transform", "translate(0,5)")
-    .selectAll("g")
-      .data(d.children)
-    .enter().append("g")
-      .style("cursor", function(d) { return !d.children ? null : "pointer"; })
-      .on("click", down);
-
-  bar.append("text")
-      .attr("x", -6)
-      .attr("y", barHeight / 2)
-      .attr("dy", ".35em")
-      .style("text-anchor", "end")
-      .text(function(d) { return d.name; });
-
-  bar.append("rect")
-      .attr("width", function(d) { return x(d.value); })
-      .attr("height", barHeight);
-
-  return bar;
-}
-
-// A stateful closure for stacking bars horizontally.
-function stack(i) {
-  var x0 = 0;
-  return function(d) {
-    var tx = "translate(" + x0 + "," + barHeight * i * 1.2 + ")";
-    x0 += x(d.value);
-    return tx;
-  };
+; // THIS IS WHAT THE CONTENTS OF THE DATA WOULD GO INTO
+function barGraph(myjson, maxAvg){
+  var margin = {top: 30, right: 120, bottom: 0, left: 120},
+      width = 960 - margin.left - margin.right,
+      height = 500 - margin.top - margin.bottom;
+
+  var x = d3.scale.linear()
+      .range([0, width]);
+
+  var barHeight = 40;
+
+  var color = d3.scale.ordinal()
+  .range(["steelblue", "#ccc"]);    // TODO: CHANGE #CCC TO A MORE OPAQUE VER OF THE FIRST COLOR
+
+  var duration = 750,
+      delay = 25;
+
+  var partition = d3.layout.partition()
+      .value(function(d) {
+        return d.size;
+  });
+
+  var xAxis = d3.svg.axis()
+      .scale(x)
+      .orient("top");
+
+  var svg = d3.select("body").append("svg")
+      .attr("width", width + margin.left + margin.right)
+      .attr("height", height + margin.top + margin.bottom)
+    .append("g")
+      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+  svg.append("rect")
+      .attr("class", "background")
+      .attr("width", width)
+      .attr("height", height)
+      .on("click", up);
+
+  svg.append("g")
+      .attr("class", "x axis");
+
+  svg.append("g")
+      .attr("class", "y axis")
+    .append("line")
+      .attr("y1", "100%");
+
+      populate();
+
+  function populate(){
+    partition.nodes(myjson);
+    x.domain([0, maxAvg]).nice();
+    down(myjson, 0);
+  }
+
+  function down(d, i) {
+    if (!d.children || this.__transition__) return;
+    var end = duration + d.children.length * delay;
+    // Mark any currently-displayed bars as exiting.
+    var exit = svg.selectAll(".enter")
+        .attr("class", "exit");
+
+    // Entering nodes immediately obscure the clicked-on bar, so hide it.
+    exit.selectAll("rect").filter(function(p) { return p === d; })
+        .style("fill-opacity", 1e-6);
+
+
+    // Enter the new bars for the clicked-on data.
+    // Per above, entering bars are immediately visible.
+    var enter = bar(d)
+        .attr("transform", stack(i))
+        .style("opacity", 1);
+
+    // Have the text fade-in, even though the bars are visible.
+    // Color the bars as parents; they will fade to children if appropriate.
+    enter.select("text").style("fill-opacity", 1e-6);
+    enter.select("rect").style("fill", color(true));
+
+    // Update the x-scale domain.
+    x.domain([0, d3.max(d.children, function(d) { return d.size; })]).nice();
+
+    // Update the x-axis.
+    svg.selectAll(".x.axis").transition()
+        .duration(duration)
+        .call(xAxis);
+
+    // Transition entering bars to their new position.
+    var enterTransition = enter.transition()
+        .duration(duration)
+        .delay(function(d, i) { return i * delay; })
+        .attr("transform", function(d, i) { return "translate(0," + barHeight * i * 1.2 + ")"; });
+
+    // Transition entering text.
+    enterTransition.select("text")
+        .style("fill-opacity", 1);
+
+    // Transition entering rects to the new x-scale.
+    enterTransition.select("rect")
+        .attr("width", function(d) { return x(d.size); })
+        .style("fill", function(d) { return color(!!d.children); });
+
+    // Transition exiting bars to fade out.
+    var exitTransition = exit.transition()
+        .duration(duration)
+        .style("opacity", 1e-6)
+        .remove();
+
+    // Transition exiting bars to the new x-scale.
+    exitTransition.selectAll("rect")
+        .attr("width", function(d) { return x(d.size); });
+
+    // Rebind the current node to the background.
+    svg.select(".background")
+        .datum(d)
+      .transition()
+        .duration(end);
+      
+        d.index = i;
+    
+  }
+
+  function up(d) {
+    if (!d.parent || this.__transition__) return;
+    console.log(d)
+    var end = duration + d.parent.children.length;
+
+    // Mark any currently-displayed bars as exiting.
+    var exit = svg.selectAll(".enter")
+        .attr("class", "exit");
+
+    // Enter the new bars for the clicked-on data's parent.
+    var enter = bar(d.parent)
+        .attr("transform", function(d, i) { return "translate(0," + barHeight * i * 1.2 + ")"; })
+        .style("opacity", 1e-6);
+
+    // Color the bars as appropriate.
+    // Exiting nodes will obscure the parent bar, so hide it.
+    enter.select("rect")
+        .style("fill", function(d) { return color(!!d.children); })
+      .filter(function(p) { return p === d; })
+        .style("fill-opacity", 1e-6);
+
+    // Update the x-scale domain.
+    x.domain([0, d3.max(d.parent.children, function(d) { return d.size; })]).nice();
+
+    // Update the x-axis.
+    svg.selectAll(".x.axis").transition()
+        .duration(duration)
+        .call(xAxis);
+
+    // Transition entering bars to fade in over the full duration.
+    var enterTransition = enter.transition()
+        .duration(end)
+        .style("opacity", 1);
+
+    // Transition entering rects to the new x-scale.
+    // When the entering parent rect is done, make it visible!
+    enterTransition.select("rect")
+        .attr("width", function(d) { return x(d.size); })
+        .each("end", function(p) { if (p === d) d3.select(this).style("fill-opacity", null); });
+
+    // Transition exiting bars to the parent's position.
+    var exitTransition = exit.selectAll("g").transition()
+        .duration(duration)
+        .delay(function(d, i) { return i * delay; })
+        .attr("transform", stack(d.index));
+
+    // Transition exiting text to fade out.
+    exitTransition.select("text")
+        .style("fill-opacity", 1e-6);
+
+    // Transition exiting rects to the new scale and fade to parent color.
+    exitTransition.select("rect")
+        .attr("width", function(d) { return x(d.size); })
+        .style("fill", color(true));
+
+    // Remove exiting nodes when the last child has finished transitioning.
+    exit.transition()
+        .duration(end)
+        .remove();
+
+    // Rebind the current parent to the background.
+    svg.select(".background")
+        .datum(d.parent)
+      .transition()
+
+  }
+
+  // Creates a set of bars for the given data node, at the specified index.
+  function bar(d) {
+    var bar = svg.insert("g", ".y.axis")
+        .attr("class", "enter")
+        .attr("transform", "translate(0,5)")
+      .selectAll("g")
+        .data(d.children)
+      .enter().append("g")
+        .style("cursor", function(d) { return !d.children ? null : "pointer"; })
+        .on("click", down);
+
+    bar.append("text")
+        .attr("x", -6)
+        .attr("y", barHeight / 2)
+        .attr("dy", ".35em")
+        .style("text-anchor", "end")
+        .text(function(d) { return d.name; });
+
+    bar.append("rect")
+        .attr("width", function(d) { return x(d.size); })
+        .attr("height", barHeight);
+
+    return bar;
+  }
+
+
+  // A stateful closure for stacking bars horizontally.
+  function stack(i) {
+    var x0 = 0;
+    return function(d) {
+      var tx = "translate(" + x0 + "," + barHeight * i * 1.2 + ")";
+      x0 += x(d.size);
+      return tx;
+    };
+  }
 }
-  
-  
-  
-  
-  
 </script>
 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
@@ -491,7 +495,7 @@ <h2>Create A Bar Chart With D3 JavaScript</h2>
     var pie = d3.layout.pie()
             .sort(null)
             .value(function(d) {
-                return d.value;
+                return d.size;
             });
 
     var arc = d3.svg.arc()
@@ -625,7 +629,7 @@ <h2>Create A Bar Chart With D3 JavaScript</h2>
                 .append("text")
                 .attr("dy", ".35em")
                 .text(function(d) {
-                    return (d.data.label+": "+d.value);
+                    return (d.data.label+": "+d.size);
                 });
 
         function midAngle(d){
@@ -655,7 +659,7 @@ <h2>Create A Bar Chart With D3 JavaScript</h2>
                     };
                 })
                 .text(function(d) {
-                    return (d.data.label+": "+d.value);
+                    return (d.data.label+": "+d.size);
                 });
 
 
@@ -879,8 +883,63 @@ <h2>Create A Bar Chart With D3 JavaScript</h2>
 
     function createBarChart(data) {
         console.log('received bar query response');
-        console.log('Creating a bar graph with: ' + JSON.stringify(data));//data contains the message contents
-        //call function to create chart
+        console.log(data);
+        var childData = []
+        data.forEach(function (d){
+          if(d.avg_hotttnesss.value != null){
+            var obj = {name: d.key, size: (d.avg_hotttnesss.value) * 100}
+            childData.push(obj);
+          }
+        });
+        console.log('child data: ');
+        console.log(childData)
+        
+        var currentDecade = 1920
+        var sum = 0;
+        var count = 1;
+        var totalSum = 0;
+        
+        var parentData = [];
+        var tempChild = [];
+        var maxAvg = -1;
+
+        childData.forEach(function(d){
+          if(d.name != 0){
+            if(d.name > (currentDecade + 9)){
+              if(count > 1){
+                var obj = {name: currentDecade, size: (sum / count), children: tempChild};
+                totalSum += (sum / count);
+                parentData.push(obj)
+                if((sum / count) > maxAvg){
+                  maxAvg = sum / count;
+                }
+                sum = 0;
+                count = 1;
+                tempChild = [];
+              }
+              currentDecade = Math.floor(d.name / 10) * 10;
+            }
+            tempChild.push(d);
+            sum += d.size;
+            count ++;
+          }
+          
+
+        });
+        var obj = {name: currentDecade, size: sum}
+        totalSum += sum;
+        parentData.push(obj)
+        
+        // this is an object array
+        console.log('parentdata')
+        console.log(parentData)
+        console.log(currentDecade)
+        
+        var finalData = {name: "barChart", size: (totalSum / parentData.length), children: parentData}
+        
+        barGraph(finalData, maxAvg);
+        
+        
     }
 
 
diff --git a/server.js b/server.js
index 490dac8..ff8d6f5 100644
--- a/server.js
+++ b/server.js
@@ -70,9 +70,6 @@ var server = http.createServer(function (req, res){
   case '/index.html':
     sendFile(res, 'index.html')
     break
-  case '/index2.html':
-    sendFile(res, 'index2.html')
-    break
   case '/README.md':
     sendFile(res, 'README.md', 'text/md')
     break
@@ -101,7 +98,6 @@ function sendFile(res, filename, contentType){
 
 
 // SAMPLE FUNCTIONS START HERE:
-
 // NOTE: all min/max years are inclusive (for exclusive do gte-->gt and lte-->lt)
 // for most of these, also consider doing when the year is 0 (that's default/no year)
 function sampleScatterPlotByYears(min_year, max_year){
@@ -110,7 +106,7 @@ function sampleScatterPlotByYears(min_year, max_year){
     type: 'song',
     body: {
       _source: [
-        "song_hotttnesss",   // categories here
+        "song_hotttnesss",   // categories here, it's artist_hottnesss and song_hotttnesss
         "artist_familiarity"    
         // consider including artist name + song name so we can mouse over things maybe
       ],
@@ -131,7 +127,7 @@ function sampleScatterPlotByYears(min_year, max_year){
   })
 }
 
-function barGraphByDecades(){
+function barGraphByYears(){
   client.search({
     index: 'million_songs',
     type: 'song',
@@ -148,7 +144,7 @@ function barGraphByDecades(){
         by_year: {
           histogram: {
             field: "year",
-            interval: 10,     // 10 years
+            interval: 1,     // 10 years
             min_doc_count: 1  // don't return results unless there's at least 1 thing there
           }, 
           aggs: {
@@ -163,7 +159,7 @@ function barGraphByDecades(){
     }
   }).then(function (resp){
     console.log(resp)
-    barYearQueryEmitter(resp);
+    barYearQueryEmitter(resp.aggregations.by_year.buckets);
   }, function (err){
     console.trace(err.message);
   }); 
@@ -221,7 +217,7 @@ function topTitleWords(min_year, max_year){
 
 function barYearQuery() {
   console.log('recieved a bar year request');
-  barGraphByDecades();
+  barGraphByYears();
 }
 
 function barYearQueryEmitter(result) {