2 Level Diverging Bar Chart - 1 Data Set Implementation

2 Level Diverging Bar Chart, can only use one dataset

forked from lelandlee's block: 2 Level Diverging Bar Chart - 1 Data Set Implementation

<!DOCTYPE html>
<html lang="en">
  <head>
		<meta charset="utf-8">
		<title>2 Level Diverging Bar Chart - 1 DataSet Implimentation</title>
		<script src="https://d3js.org/d3.v3.min.js"></script>
  </head>

<body>
		<div id="chart"></div> 
		<script>
     	var dataSet = [
     		{ key: 1, val1: 5, val2: 10},
     		{ key: 2, val1: 7, val2: 11},
     		{ key: 3, val1: 9, val2: 13},
     		{ key: 4, val1: 13, val2: 14},
     		{ key: 5, val1: 14, val2: 15},
     		{ key: 6, val1: 15, val2: 25},
     		{ key: 7, val1: 21, val2: 24},
     		{ key: 8, val1: 18, val2: 18},
     		{ key: 9, val1: 5, val2: 21},
     		{ key: 10, val1: 11, val2: 17},
     		{ key: 11, val1: 25, val2: 14},
     		{ key: 12, val1: 5, val2: 10},
     		{ key: 13, val1: 5, val2: 10},
     		{ key: 14, val1: 5, val2: 12},
     		{ key: 15, val1: 12, val2: 12},
     		{ key: 16, val1: 11, val2: 15},
     		{ key: 17, val1: 9, val2: 10},
     		{ key: 18, val1: 6, val2: 17},
     		{ key: 19, val1: 3, val2: 21},
     		{ key: 20, val1: 5, val2: 8},
     		{ key: 21, val1: 5, val2: 12},
     		{ key: 22, val1: 7, val2: 10},
     		{ key: 23, val1: 10, val2: 14},
     		{ key: 24, val1: 12, val2: 10},
     		{ key: 25, val1: 5, val2: 9}
     	];
			var w = 700;
				h = 450;
				barPadding = 1;
			var svg = d3.select("#chart").append("svg")
				.attr({
					width: w,
					height: h
				});

var key = function(d) { return d.key; };

var maxRange = d3.max(dataSet, function(d) { return d.val1/2}) + d3.max(dataSet, function(d) { return d.val2/2});

var xScale = d3.scale.ordinal()
				.domain(d3.range(dataSet.length))
				.rangeRoundBands([0, w], 0.05);//calculate even bands + add spacing

var yScale = d3.scale.linear()
				.domain([0, maxRange])
				.range([0, h]);
			
			function color1(d){ return "rgb(150," + d * 10 + "," + d * 15 + ")"; };
			function color2(d){ return "rgb("+(256 - d*2)+"," + d * 12 + "," + d * 5 + ")"; };

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