horizontal bar chart using d3js

how to create horizontal bar chart using d3js charting library

by Dhanesh Mane

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.js"></script>
<!-- horizontal bar chart -->
<div id="chart">  </div>

CSS

body{
  font-family:sans-serif;
  background:#fff;
  }

.bar--right {;
  fill: red;
  fill-opacity: 0.6;
}
.bar:hover {
  fill-opacity: 0.8;
}

.bar--left {
  fill: blue;
  fill-opacity: 0.6;
}

.axis text {
  font: 10px sans-serif;
}
g.y text{
 // fill:red;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.tick line{
  opacity: 0.3;
}
.toolTip {
  position: absolute;
  display: none;
  color:white;
  min-width: 80px;
  height: 20px;
  font-size:11px;  
  background: none repeat scroll 0 0 black;
  padding: 1px;
  text-align: center;
}

JavaScript

var data = [{
			"name": "Rohit",
			"value": 120
		}, {
			"name": "Sanket",
			"value": 116
		}, {
			"name": "Vivek",
			"value": 109
		}, {
			"name": "Richa",
			"value": 94
		}, {
			"name": "Ricky",
			"value": 90
		}, {
			"name": "soniya",
			"value": 84
		}, {
			"name": "Nilesh",
			"value": 107
		}, {
			"name": "Ronit",
			"value": 66
		}];
(function(holder,data){

  var margin = {top: 30, right: 10, bottom: 40, left: 60},
			width = 523 - margin.left - margin.right,
			height = 300 - margin.top - margin.bottom;

		var yaxisPoint = 100; // this is the point from where we need y axis

		var x = d3.scale.linear()
			.range([0, width]);

		var y = d3.scale.ordinal()
			.rangeRoundBands([0, height], 0.1);

		x.domain(d3.extent(data, function(d) { return d.value; })).nice();
		y.domain(data.map(function(d) { return d.name; }));

		var xAxis = d3.svg.axis()
			.scale(x)
			.orient('top');

		var yAxis = d3.svg.axis()
			.scale(y)
			.orient('left')
			.tickSize(0)
			.tickPadding(6)
			.innerTickSize(x(x.domain()[1]));

		var tooltip = d3.select(holder).append('div').attr('class', 'toolTip');

		var svg = d3.select(holder).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 + ')');


		svg.selectAll('.bar')
			.data(data)
			.enter().append('rect')
			.attr('class', function(d) { return 'bar bar--' + (d.value < yaxisPoint ? 'left' : 'right'); })
			.attr('x', function(d) { return x(Math.min(yaxisPoint, d.value)); })
			.attr('y', function(d) { return y(d.name); })
			.attr('width', function(d) { return Math.abs(x(d.value) - x(yaxisPoint)); })
			.attr('height', y.rangeBand())
			.on('mousemove', function(d){
				tooltip
					.style('left', d3.event.pageX  + 'px')
					.style('top', d3.event.pageY+ 'px')
					.style('display', 'inline-block')
					.html((d.name) + ' - '+...