Bar Graph

<!DOCTYPE html>
<meta charset="utf-8">

<head>
 <style>
/*Font Style*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:700|Exo+2:300,600);
 
/*Source: Eric Meyer's Reset CSS v2.0 - https://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
 
 
 /* PBO Report Template Colour Palette ----------
 By Usage Order (Top to Bottom)
 1--
  dark blue          		: #1A4581;
  very soft orange   		: #DAB97A;
  
 2---
  very dark blue            : #1C2654;
  dark moderate orange      : #AE8254;
  
 3--
  mauve    	      			: #8d6b81;
  dusty green     			: #95ab64;
  
4--
 desaturated blue    		: #6281C0;
 very soft orange    		: #EBCD95;
 
5- 
 dark grayish pink          : #4b333e;
 desaturated dusty green	: #628e5d;
 
6-
  grayish blue              : #bbc0e1;
  light grayish pink        : #efe1c8;
  
7 -
  dark grayish magenta      : #9b869f;
  graysih green         : #adc4a4;
  ____
  blue           : #2176C7;
  cyan           : #259286;
  green          : #738A05; */
 
body {
  font-family: "Exo 2", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 300;
  font-size: 1.2em;
  line-height: 1.2em;
  background: white;
  color: #475B62;
}
 
strong {
  font-weight: 600;
}

/*headers and titles*/
h1, h2, h3, h4, h5, h6 { 
  font-family: 'Roboto Slab', "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 700;
  color: #1C2654; /* very dark blue*/
  font-size: 1.75em;
  margin-bottom: .4em;
}
 
p {
  margin-bottom: .5em;
}
 
.container {
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top:10px;
}
 
@media all and (max-width: 500px) {
  h2 {
    padding-left: 10px;
    text-align: center;
  }
  .container {
    width: 100%;
  }
}
 
#graphic {
  margin: 0 auto;
}
 </style>
</head>

var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

// Parse the year/ time
var parseDate = d3.time.format("%Y").parse;

var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

var tempcolour;
var colours = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.value; })])
.range(['#1A4581', '#1C265', '#8D6B81', '#49b869f','#BBC0E1'])

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(d3.time.format("%Y"));

tooltip = d3.select.ordinal()
	.domain([0, d3.max(data, function(d) { return d.value; })])
	.style('position', 'aboslute')
	.style('padding', '0 10px')
	.style('background', 'white')
	.style('opacity', 50)

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);

tooltip.transition()
            .style('opacity', .9)

tooltip.html(d)
            .style('left', (d3.event.pageX - 35) + 'px')
            .style('top',  (d3.event.pageY - 30) + 'px')

tempColor = this.style.fill;
        d3.select(this)
            .style('opacity', .5)
            .style('fill', 'yellow')
    })

.on('mouseout', function(d) {
        d3.select(this)
            .style('opacity', 1)
            .style('fill', tempColor)
    });
	  
	barGraph.transition()
		.attr('height', function(d)) {
		return y(d.value);
		})
		.attr('y', function(d) {
			return height - y(d.value);
		})
		.delay(function(d,i) {
			return i*35;
		})
		.duration(3000)
		.ease('elastic')

d3.csv("data.csv", function(error, data) {

if (error) return console.error(error);
    data.forEach(function(d) {
        d.year = parseDate(d.year);
        d.value = +d.value;
    });
 
  x.domain(data.map(function(d) { return d.year; }));
  y.domain([0, d3.max(data, function(d) { return d.value; })]);

svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Value ($)");

});

</script>
<p><em>Fig 1</em> test paragraph</em></p>
  </div>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js