D3-BarChart

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Barchart</title>
		<script src="https://d3js.org/d3.v4.min.js"></script>
        <style>
            .container{
                letter-spacing: 2px;
                margin-left: 200px;
                margin-top: 30px;
                font-weight: bold;
            }
            .toolTip {
              position: absolute;
              display: none;
              font-size: 12px;
              font-weight: bold;
              min-width: 80px;
              height: auto;
              background: rgba(0, 0, 0, 0.8);
              padding: 12px;
              color: #fff;
              border-radius: 2px;
              text-align: center;
            }
              #graphic-container{
                font-size: 8px;
                position:absolute;
                margin-top: 480px;
                margin-left: 230px;
            }
        </style>
	</head>
	<body>
        <div class="container">
            Total Cars in 2009-2012
        </div>
          <div id="graphic-container">
            Do not be hesitated to play with interaction!
        </div>
		<script type="text/javascript">
            var car_years;
            var width = 500;
            var height = 500;
            var barPadding = 5;
            var padding = 50;
            var svg = d3.select("body").append("svg").attr("width",width).attr("height",height); 
            var tooltip = d3.select("body").append("div").attr("class", "toolTip");
            d3.csv("cars.csv",function(dataset){
                 car_years = d3.nest()
                    .key(function(d) { return d.Year; })
                    .rollup(function(v) { return v.length;})
                    .object(dataset);

var dataset = Object.values(car_years);
            var year = Object.keys(car_years);

var yScale = d3.scaleLinear().domain([0,d3.max(dataset,function(d){ return d; })]).range([height-padding,padding]);
            var xScale = d3.scaleLinear().domain([0,year.length]).range([0,width]);
            var yAxis = d3.axisLeft(yScale);
            svg.append("g").attr("class","axis").attr("transform","translate(" + padding + ",0)").call(yAxis)
                .append("text")
                .attr("transform", "rotate(-90)")
                .attr("x",-height/2+padding)
                .attr("y", 0-padding+barPadding)
                .attr("dy", "0.71em")
                .attr("text-anchor", "end")
                .attr("fill", "#5D6971")
                .text("Number of Cars");

var xAxis = d3.axisBottom(xScale).tickValues([0.3,1.27,2.27,3.27]).tickFormat(function(d,i){ return Object.keys(car_years)[i]});
            svg.append("g").attr("class","axis").attr("transform","translate("+padding+"," +(height-padding)+")").call(xAxis);
 });
		</script>
         
	</body>
   
</html>

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