README.md

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    2 Level Diverging Bar Chart, can only use one dataset

  

  

## index.html
<!-- Implementation via individual variables, rather than classes, less flexible, can only use 1 dataset-->

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

  <style type="text/css">
		#chart {
			border: 2px dashed black;
		}
		/*styling of the text here instead of text.attr */
		text {
			font-family: sans-serif;
			font-size: 11px;
			fill: black;
			text-anchor: middle;
		}
  </style>

  <body>
		<div id="chart"></div> <!-- div where the chart is located -->
		<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 + ")"; };

			var bars = svg.selectAll("rect")
				.data(dataSet, key)
				.enter();
			bars.append("rect")
				.attr({
					"class": "valueTop", //assign a class, so can modift easier
					x: function(d, i) { return xScale(i); },
					y: function(d) { return h - yScale(d.val1)/2 - h/2; },
					width: xScale.rangeBand(),
					height: function(d){ return yScale(d.val1) / 2; },
					fill: function(d){ return color1(d.val1); }
				});
			bars.append("rect")
				.attr({
					"class": "valueBottom",
					x: function(d, i) { return xScale(i); },
					y: function(d) { return h/2; },
					width: xScale.rangeBand(),
					height: function(d){ return yScale(d.val2) / 2; },
					fill: function(d){ return color2(d.val2); }
				});

			var texts = svg.selectAll("text")
				.data(dataSet)
				.enter();
			texts.append("text") //top
				.text(function(d) { return d.val1; })
				.attr({
					"class": "valueTop",
					x: function(d,i) { return xScale(i) + xScale.rangeBand() / 2 },
					y: function(d) { return h - yScale(d.val1)/2 - h/2 + 14; },
				});
			texts.append("text") //bottom
				.text(function(d) { return d.val2; })
				.attr({
					"class": "valueBottom",
					x: function(d,i) { return xScale(i) + xScale.rangeBand() / 2 },
					y: function(d) { return h + yScale(d.val2)/2 - h/2 - 7; },
				});
		</script>
  </body>
</html>

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png