diff --git a/charts/chart-boilerplate.html b/charts/chart-boilerplate.html
index 5def79b..6841ff9 100644
--- a/charts/chart-boilerplate.html
+++ b/charts/chart-boilerplate.html
@@ -1,5 +1,6 @@
  <html>
 <head>
+  <meta charset="utf-8">
   <title></title>
   <style>
 
@@ -45,6 +46,7 @@
     .chart {
       flex: 6;
       min-height: 4rem;
+      overflow: scroll;
     }
 
     @media (max-width: 48em) {
@@ -52,9 +54,16 @@
         flex-direction: column;
       }
     }
-    .area {
+    .bar.positive {
       fill: steelblue;
-      clip-path: url(#clip);
+    }
+
+    .bar.negative {
+      fill: brown;
+    }
+
+    .axis text {
+      font: 10px sans-serif;
     }
 
     .axis path,
@@ -64,11 +73,6 @@
       shape-rendering: crispEdges;
     }
 
-    .brush .extent {
-      stroke: #fff;
-      fill-opacity: .125;
-      shape-rendering: crispEdges;
-    }
   </style>
 
 </head>
@@ -80,7 +84,6 @@ <h1>Chart Experiment Boilerplate</h1>
     </div>
     <div class="wrapper">
       <div class="chart" id="chart">
-      <svg id="charts" width="100%" height="100%" viewBox="0 0 640 480"></svg>
       </div>
       <div class="sidebar" id="sidebar">
         <h2>Metadata</h2>
@@ -92,10 +95,12 @@ <h2>Metadata</h2>
   <script src="../bower_components/underscore/underscore.js"></script>
   <script src="../bower_components/d3/d3.js"></script>
   <script src="http://d3js.org/d3.v3.min.js"></script>
+  <script src="../bower_components/d3-tip/index.js"></script>
 
   <!-- makes global billDetails var -->
   <script src="../data/bill-details.js"></script>
-  <script src="./sp500.csv"></script>
+
+  <script src="../data/votes_month.json"></script>
 
   <!-- makes global billSubjects var -->
   <script src="../data/bill-subjects.js"></script>
@@ -116,110 +121,110 @@ <h2>Metadata</h2>
 
     function init () {
 
-    var margin = {top: 10, right: 10, bottom: 100, left: 40},
-        margin2 = {top: 430, right: 10, bottom: 20, left: 40},
-        width = 960 - margin.left - margin.right,
-        height = 500 - margin.top - margin.bottom,
-        height2 = 500 - margin2.top - margin2.bottom;
-
-    var parseDate = d3.time.format("%b %Y").parse;
-
-    var x = d3.time.scale().range([0, width]),
-        x2 = d3.time.scale().range([0, width]),
-        y = d3.scale.linear().range([height, 0]),
-        y2 = d3.scale.linear().range([height2, 0]);
-
-    var xAxis = d3.svg.axis().scale(x).orient("bottom"),
-        xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
-        yAxis = d3.svg.axis().scale(y).orient("left");
-
-    var brush = d3.svg.brush()
-        .x(x2)
-        .on("brush", brushed);
-
-    var area = d3.svg.area()
-        .interpolate("monotone")
-        .x(function(d) { return x(d.date); })
-        .y0(height)
-        .y1(function(d) { return y(d.price); });
-
-    var area2 = d3.svg.area()
-        .interpolate("monotone")
-        .x(function(d) { return x2(d.date); })
-        .y0(height2)
-        .y1(function(d) { return y2(d.price); });
-
-    var svg = d3.select("#charts").append("svg")
-        .attr("width", $( "#charts" ).width())
-        .attr("height", $( "#charts" ).width());
-
-    svg.append("defs").append("clipPath")
-        .attr("id", "clip")
-      .append("rect")
-        .attr("width", width)
-        .attr("height", height);
-
-    var focus = svg.append("g")
-        .attr("class", "focus")
-        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+    var tip = d3.tip().attr('class', 'd3-tip').offset([-10, 0]).html (function(d) {return '<span>' + d.description + '</span>';});
+
+    var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ").parse;
 
-    var context = svg.append("g")
-        .attr("class", "context")
-        .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");
+    var parseDate2 = d3.time.format("%Y-%m-%d").parse;
 
-    d3.csv("./sp500.csv", type, function(error, data) {
-      x.domain(d3.extent(data.map(function(d) { return d.date; })));
-      y.domain([0, d3.max(data.map(function(d) { return d.price; }))]);
-      x2.domain(x.domain());
-      y2.domain(y.domain());
+    var margin = {top: 30, right: 10, bottom: 10, left: 10},
+        width = $("#chart").width(),
+        height = 500 - margin.top - margin.bottom;
+    
 
-      focus.append("path")
-          .datum(data)
-          .attr("class", "area")
-          .attr("d", area);
+    //Fix the scale
+    var x = d3.scale.linear()
+        .range([0, width])
 
-      focus.append("g")
+    var y = d3.scale.ordinal()
+        .rangeRoundBands([0, height], .4);
+
+    var makePos = function (x) {
+      return Math.abs(x);
+    }
+
+    var xAxis = d3.svg.axis()
+        .scale(x)
+        .tickFormat(makePos)
+        .orient("top");
+
+    var svg = d3.select("#chart").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 + ")");
+
+    var data;
+    var dataFix;
+
+
+
+    d3.json("../data/votes_month.json", function(error, json) {
+      data = json.results.votes;
+      
+      dataFix = data.reduce( function (acc, vote) {
+        return acc.concat([
+          {
+            yes: vote.democratic.yes * -1,
+            vote: vote
+          },{
+            yes: vote.republican.yes * 1,
+            vote: vote
+          }  
+        ]);
+      }, [] );
+      
+      x.domain(d3.extent(dataFix, function(d)
+        {
+          //d3.min(d.yes) or nothing
+        return (d.yes); }));
+      y.domain(data.map(function(d) {
+        return d.description; }));
+      
+
+      var tip = d3.tip().attr('class', 'd3-tip').offset([-10, 0]).html (function(data) {
+            return data;});
+
+      svg.selectAll(".bar")
+          .data(dataFix)
+        .enter().append("rect")
+          .attr("class", function(d) {
+            return d.yes < 0 ? "bar negative" : "bar positive"; })
+          .attr("x", function(d) { return x(Math.min(0, d.yes)); })
+          .attr("y", function(d) {
+           return y(d.vote.description); })
+          .attr("width", function(d) { return Math.abs(x(d.yes) - x(0)); })
+          .attr("height", y.rangeBand());
+
+      svg.call(tip)
+      svg.append("g")
           .attr("class", "x axis")
-          .attr("transform", "translate(0," + height + ")")
           .call(xAxis);
 
-      focus.append("g")
+      svg.append("g")
           .attr("class", "y axis")
-          .call(yAxis);
-
-      context.append("path")
-          .datum(data)
-          .attr("class", "area")
-          .attr("d", area2);
+        .append("line")
+          .attr("x1", x(0))
+          .attr("x2", x(0))
+          .attr("y2", height)
+          .on('mouseover', tip.show)
+          .on('mouseout', tip.hide);
 
-      context.append("g")
-          .attr("class", "x axis")
-          .attr("transform", "translate(0," + height2 + ")")
-          .call(xAxis2);
-
-      context.append("g")
-          .attr("class", "x brush")
-          .call(brush)
-        .selectAll("rect")
-          .attr("y", -6)
-          .attr("height", height2 + 7);
     });
 
-    function brushed() {
-      x.domain(brush.empty() ? x2.domain() : brush.extent());
-      focus.select(".area").attr("d", area);
-      focus.select(".x.axis").call(xAxis);
-    }
-
-    function type(d) {
-      d.date = parseDate(d.date);
-      d.price = +d.price;
-      return d;
-    }
     // code here.
 
-
     /*
+    return data.reduce( function( acc, item) {
+      return acc.concat( item.results)
+    }, [])
+
+    data = data.reduce( function( acc, item) {
+          if (acc){
+            return acc.concat( item.results)
+          }
+      }, [])
+   
 
       chart = d3
         .select( "#chart" )
diff --git a/charts/sp500.csv b/charts/sp500.csv
deleted file mode 100644
index 94f6312..0000000
--- a/charts/sp500.csv
+++ /dev/null
@@ -1,124 +0,0 @@
-date,price
-Jan 2000,1394.46
-Feb 2000,1366.42
-Mar 2000,1498.58
-Apr 2000,1452.43
-May 2000,1420.6
-Jun 2000,1454.6
-Jul 2000,1430.83
-Aug 2000,1517.68
-Sep 2000,1436.51
-Oct 2000,1429.4
-Nov 2000,1314.95
-Dec 2000,1320.28
-Jan 2001,1366.01
-Feb 2001,1239.94
-Mar 2001,1160.33
-Apr 2001,1249.46
-May 2001,1255.82
-Jun 2001,1224.38
-Jul 2001,1211.23
-Aug 2001,1133.58
-Sep 2001,1040.94
-Oct 2001,1059.78
-Nov 2001,1139.45
-Dec 2001,1148.08
-Jan 2002,1130.2
-Feb 2002,1106.73
-Mar 2002,1147.39
-Apr 2002,1076.92
-May 2002,1067.14
-Jun 2002,989.82
-Jul 2002,911.62
-Aug 2002,916.07
-Sep 2002,815.28
-Oct 2002,885.76
-Nov 2002,936.31
-Dec 2002,879.82
-Jan 2003,855.7
-Feb 2003,841.15
-Mar 2003,848.18
-Apr 2003,916.92
-May 2003,963.59
-Jun 2003,974.5
-Jul 2003,990.31
-Aug 2003,1008.01
-Sep 2003,995.97
-Oct 2003,1050.71
-Nov 2003,1058.2
-Dec 2003,1111.92
-Jan 2004,1131.13
-Feb 2004,1144.94
-Mar 2004,1126.21
-Apr 2004,1107.3
-May 2004,1120.68
-Jun 2004,1140.84
-Jul 2004,1101.72
-Aug 2004,1104.24
-Sep 2004,1114.58
-Oct 2004,1130.2
-Nov 2004,1173.82
-Dec 2004,1211.92
-Jan 2005,1181.27
-Feb 2005,1203.6
-Mar 2005,1180.59
-Apr 2005,1156.85
-May 2005,1191.5
-Jun 2005,1191.33
-Jul 2005,1234.18
-Aug 2005,1220.33
-Sep 2005,1228.81
-Oct 2005,1207.01
-Nov 2005,1249.48
-Dec 2005,1248.29
-Jan 2006,1280.08
-Feb 2006,1280.66
-Mar 2006,1294.87
-Apr 2006,1310.61
-May 2006,1270.09
-Jun 2006,1270.2
-Jul 2006,1276.66
-Aug 2006,1303.82
-Sep 2006,1335.85
-Oct 2006,1377.94
-Nov 2006,1400.63
-Dec 2006,1418.3
-Jan 2007,1438.24
-Feb 2007,1406.82
-Mar 2007,1420.86
-Apr 2007,1482.37
-May 2007,1530.62
-Jun 2007,1503.35
-Jul 2007,1455.27
-Aug 2007,1473.99
-Sep 2007,1526.75
-Oct 2007,1549.38
-Nov 2007,1481.14
-Dec 2007,1468.36
-Jan 2008,1378.55
-Feb 2008,1330.63
-Mar 2008,1322.7
-Apr 2008,1385.59
-May 2008,1400.38
-Jun 2008,1280
-Jul 2008,1267.38
-Aug 2008,1282.83
-Sep 2008,1166.36
-Oct 2008,968.75
-Nov 2008,896.24
-Dec 2008,903.25
-Jan 2009,825.88
-Feb 2009,735.09
-Mar 2009,797.87
-Apr 2009,872.81
-May 2009,919.14
-Jun 2009,919.32
-Jul 2009,987.48
-Aug 2009,1020.62
-Sep 2009,1057.08
-Oct 2009,1036.19
-Nov 2009,1095.63
-Dec 2009,1115.1
-Jan 2010,1073.87
-Feb 2010,1104.49
-Mar 2010,1140.45
