function createViz() {
  d3.csv("test.csv",type, function (error, data) {
    if (error) throw error;

    dataViz(data)
  });
}

function dataViz(data) {

  //content for annotations
  var annotations = [
    {key:1986, xPos : "08-25", yPos : 75, note: "Note1!!"},
    {key:1986, xPos : "03-17", yPos : 30, note: "St P's Day!!"},
    {key:1995, xPos : "06-17", yPos : 40, note: "Note!"},
    {key:1995, xPos : "06-17", yPos : 40, note: "Note!"},
    {key:1995, xPos : "06-17", yPos : 40, note: "Note!"},
    {key:1996, xPos : "06-17", yPos : 40, note: "Note!"},
    {key:2015, xPos : "12-24", yPos : 40, note: "Xmas!"},
    {key:2015, xPos : "03-17", yPos : 40, note: "St P's Day!!!"},
    {key:2015, xPos : "06-17", yPos : 40, note: "Note!"},
    {key:2015, xPos : "06-17", yPos : 40, note: "Note!"}
  ];

  var annotationsPerYear = d3.nest()
    .key(function(d) { return d.key;})
    .entries(annotations);

  // Parse the date / time
  var  formatMth = d3.time.format("%m-%d"),
    formatYear = d3.time.format("%Y");

  //approach 1. - add the annotations to the bar chart data
  data.forEach(function(d,i) {
    d.xPos = formatMth(d.date);
    d.notes = (annotationsPerYear[i]);
  });

  var margin = {top: 5, right: 10, bottom: 5, left: 10},
    width = 960 - margin.left - margin.right,
    height = 100 - margin.top - margin.bottom;

  //this works as an x domain with range bands
  var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.2);
  var y = d3.scale.linear().range([0,height]);

  var dataPerYear = d3.nest()
    .key(function(d) { return formatYear(d.date);})
    .entries(data);

  //this works as an x domain with range bands
  x.domain(data.map(function(d) { return d.xPos; }));
  y.domain([0, d3.max(data, function(d) { return d.bars; })]);

  var svg = d3.select("#chart").selectAll("svg")
    .data(dataPerYear)
    .enter().append("svg")
    .attr("class", "charts")
    .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("text")
    .attr("class", "year")
    .attr("transform", "rotate(-90)")
    .attr("y", 100)
    .attr("x",0 - (height / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text(function(d) { return d.key; });

  svg.selectAll(".bar")
    .data(function(d) {return d.values;})
    .enter().append("rect")
    .attr("class", "bar")
    .attr("x", function(d) { return x(formatMth(d.date)); })
    .attr("y", 0)
    .attr("width", x.rangeBand())
    .attr("height", 0)
    .transition()
    .duration(1000)
    .ease("quad")
    .attr("height", function(d) { return y(d.bars); });
}


function type(d) {
  var format = d3.time.format("%d-%b-%Y");
  d.bars = +d.bars;
  d.date = format.parse(d.date);
  return d;
}