KeithNdhlovu · February 12, 2016 10:44
diff --git a/D3SideBySideBarGraph.html b/D3SideBySideBarGraph.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Bar Chart</title>
    <script type="text/javascript" src="javascript/d3.v2.min.js"></script>
    <style type="text/css">
    .chart {
      background: #00ccff;
      margin: 10px;
      padding-top: 10px; 
    }
    
    .chart .right {
      stroke: white;
      fill: indianred; 
    }
    .chart .left {
      stroke: white;
      fill: steelblue; 
    }
    .chart rect:hover {
      fill: #64707d; 
    }
    
    .chart text {
      fill: white; 
    }
    
    .chart text.name {
      fill: black; 
    }
    </style>
  </head>
  <body>
    <h1>Two sided horiztontal bar chart</h1>
    <script type="text/javascript">
      var randomNumbers = function() { 
        var numbers = [];
        for (var i = 0; i < 20; i++) {
          numbers.push(parseInt(Math.random() * 19) + 1);
        }
        return numbers;
      };
      var randomNames = function() { 
        var names = [];
        for (var i = 0; i < 20; i++) {
          names.push(String.fromCharCode(65 + Math.random() * 25) + String.fromCharCode(65 + Math.random() * 25) + String.fromCharCode(65 + Math.random() * 25));
        }
        return names;
      };
      var names = randomNames();
      var leftData = randomNumbers();  
      var rightData = randomNumbers();
      for (var i= 0; i< names.length; i++) {
        console.log(names[i] + " from: " + leftData[i] + " to: " + rightData[i]);  
      }
      var labelArea = 160;
      var chart,
          width = 400,
          bar_height = 20,
          height = bar_height * (names.length);
      var rightOffset = width + labelArea;
      var chart = d3.select("body")
        .append('svg')
        .attr('class', 'chart')
        .attr('width', labelArea + width + width)
        .attr('height', height);
      
      var xFrom = d3.scale.linear()
         .domain([0, d3.max(leftData)])
         .range([0, width]);
      var y = d3.scale.ordinal()
         .domain(names)
         .rangeBands([10, height]);
      var yPosByIndex = function(d, index){ return y(index); } 
      chart.selectAll("rect.left")
        .data(leftData)
        .enter().append("rect")
        .attr("x", function(pos) { return width - xFrom(pos); })
        .attr("y", yPosByIndex)
        .attr("class", "left")
        .attr("width", xFrom)
        .attr("height", y.rangeBand()); 
      chart.selectAll("text.leftscore")
        .data(leftData)
        .enter().append("text")
        .attr("x", function(d) { return width - xFrom(d); })
        .attr("y", function(d, z){ return y(z) + y.rangeBand()/2; } )
        .attr("dx", "20")
        .attr("dy", ".36em")
        .attr("text-anchor", "end")
        .attr('class', 'leftscore')
        .text(String);
      chart.selectAll("text.name")
        .data(names)
        .enter().append("text")
        .attr("x", (labelArea / 2) + width)
        .attr("y", function(d){ return y(d) + y.rangeBand()/2; } )
        .attr("dy", ".20em")
        .attr("text-anchor", "middle")
        .attr('class', 'name')
        .text(String);
      var xTo = d3.scale.linear()
         .domain([0, d3.max(rightData)])
         .range([0, width]);
      chart.selectAll("rect.right")
        .data(rightData)
        .enter().append("rect")
        .attr("x", rightOffset)
        .attr("y", yPosByIndex)
        .attr("class", "right")
        .attr("width", xTo)
        .attr("height", y.rangeBand()); 
      chart.selectAll("text.score")
        .data(rightData)
        .enter().append("text")
        .attr("x", function(d) { return xTo(d) +  rightOffset; })
        .attr("y", function(d,z){ return y(z) + y.rangeBand()/2; } )
        .attr("dx", -5)
        .attr("dy", ".36em")
        .attr("text-anchor", "end")
        .attr('class', 'score')
        .text(String);
    </script>
  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Bar Chart</title>
	<script type="text/javascript" src="javascript/d3.v2.min.js"></script>
	<style type="text/css">
	.chart {
	background: #00ccff;
	margin: 10px;
	padding-top: 10px;
	}

	.chart .right {
	stroke: white;
	fill: indianred;
	}
	.chart .left {
	stroke: white;
	fill: steelblue;
	}
	.chart rect:hover {
	fill: #64707d;
	}

	.chart text {
	fill: white;
	}

	.chart text.name {
	fill: black;
	}
	</style>
	</head>
	<body>
	<h1>Two sided horiztontal bar chart</h1>
	<script type="text/javascript">
	var randomNumbers = function() {
	var numbers = [];
	for (var i = 0; i < 20; i++) {
	numbers.push(parseInt(Math.random() * 19) + 1);
	}
	return numbers;
	};
	var randomNames = function() {
	var names = [];
	for (var i = 0; i < 20; i++) {
	names.push(String.fromCharCode(65 + Math.random() * 25) + String.fromCharCode(65 + Math.random() * 25) + String.fromCharCode(65 + Math.random() * 25));
	}
	return names;
	};
	var names = randomNames();
	var leftData = randomNumbers();
	var rightData = randomNumbers();
	for (var i= 0; i< names.length; i++) {
	console.log(names[i] + " from: " + leftData[i] + " to: " + rightData[i]);
	}
	var labelArea = 160;
	var chart,
	width = 400,
	bar_height = 20,
	height = bar_height * (names.length);
	var rightOffset = width + labelArea;
	var chart = d3.select("body")
	.append('svg')
	.attr('class', 'chart')
	.attr('width', labelArea + width + width)
	.attr('height', height);

	var xFrom = d3.scale.linear()
	.domain([0, d3.max(leftData)])
	.range([0, width]);
	var y = d3.scale.ordinal()
	.domain(names)
	.rangeBands([10, height]);
	var yPosByIndex = function(d, index){ return y(index); }
	chart.selectAll("rect.left")
	.data(leftData)
	.enter().append("rect")
	.attr("x", function(pos) { return width - xFrom(pos); })
	.attr("y", yPosByIndex)
	.attr("class", "left")
	.attr("width", xFrom)
	.attr("height", y.rangeBand());
	chart.selectAll("text.leftscore")
	.data(leftData)
	.enter().append("text")
	.attr("x", function(d) { return width - xFrom(d); })
	.attr("y", function(d, z){ return y(z) + y.rangeBand()/2; } )
	.attr("dx", "20")
	.attr("dy", ".36em")
	.attr("text-anchor", "end")
	.attr('class', 'leftscore')
	.text(String);
	chart.selectAll("text.name")
	.data(names)
	.enter().append("text")
	.attr("x", (labelArea / 2) + width)
	.attr("y", function(d){ return y(d) + y.rangeBand()/2; } )
	.attr("dy", ".20em")
	.attr("text-anchor", "middle")
	.attr('class', 'name')
	.text(String);
	var xTo = d3.scale.linear()
	.domain([0, d3.max(rightData)])
	.range([0, width]);
	chart.selectAll("rect.right")
	.data(rightData)
	.enter().append("rect")
	.attr("x", rightOffset)
	.attr("y", yPosByIndex)
	.attr("class", "right")
	.attr("width", xTo)
	.attr("height", y.rangeBand());
	chart.selectAll("text.score")
	.data(rightData)
	.enter().append("text")
	.attr("x", function(d) { return xTo(d) + rightOffset; })
	.attr("y", function(d,z){ return y(z) + y.rangeBand()/2; } )
	.attr("dx", -5)
	.attr("dy", ".36em")
	.attr("text-anchor", "end")
	.attr('class', 'score')
	.text(String);
	</script>
	</body>
	</html>