lsquaredleland/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="https://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
	<!-- 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="https://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 - d2)+"," + 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>