eoiny · April 7, 2016 15:46
diff --git a/README.md b/README.md
diff --git a/bars.js b/bars.js
 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");

  data.forEach(function(d,i) {
    d.xPos = formatMth(d.date);
  });

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


diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="bars.js" type="text/javascript"></script>
  <style>
    .bar {
  fill: steelblue;
 }

 .year {
  font-family:Georgia,serif;
  font-size:22px;
  fill: #ccc;
  opacity:0.45;
  shape-rendering: crispEdges;
 }

 .axis {
  font: 8px sans-serif;
  stroke-width: 0.4px;
 }

 .axis path,
 .axis line {
  fill: none;
  stroke: #ccc;
  shape-rendering: crispEdges;
  stroke-width: 0.6px;
 }

 .tick text{
  font: 10px sans-serif;
  stroke: #ccc;
  shape-rendering: crispEdges;
 }

 .x.axis path {
  display: none;
 }


 .annotation {
  font-family:Helvetica,sans-serif;
  font-size:12px;
  fill: red;
  opacity:0.85;
  shape-rendering: crispEdges;
 }
  </style>
 </head>

 <body>
  <body onload="createViz()">


 <div id="chart"></div>
 </body>
diff --git a/test.csv b/test.csv
	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");

	data.forEach(function(d,i) {
	d.xPos = formatMth(d.date);
	});

	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;
	}
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="bars.js" type="text/javascript"></script>
	<style>
	.bar {
	fill: steelblue;
	}

	.year {
	font-family:Georgia,serif;
	font-size:22px;
	fill: #ccc;
	opacity:0.45;
	shape-rendering: crispEdges;
	}

	.axis {
	font: 8px sans-serif;
	stroke-width: 0.4px;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
	stroke-width: 0.6px;
	}

	.tick text{
	font: 10px sans-serif;
	stroke: #ccc;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}


	.annotation {
	font-family:Helvetica,sans-serif;
	font-size:12px;
	fill: red;
	opacity:0.85;
	shape-rendering: crispEdges;
	}
	</style>
	</head>

	<body>
	<body onload="createViz()">


	<div id="chart"></div>
	</body>