shilpavijay/Stacked Bar

## Stacked Bar
var h = 500;
var w = 800;

var svg = 	d3.select("body").append("svg")
			.attr("id","chart")
			.attr("width",w)
			.attr("height",h);

var num = 51;
var types = 4;
var margin = {
	top: 60,
	bottom: 80,
	left: 80,
	right: 80
};

var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;

var g = svg.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.scaleBand()
				.rangeRound([0,width])
				.paddingInner(0.15)
				.align(0.1)


var y = d3.scaleLinear()
				.rangeRound([height,0]);

// var colorScale = d3.scaleOrdinal(d3.schemeCategory20);

var z = d3.scaleOrdinal()
				.range(["#7ed39c","#70bc8b","#62a479","#548d68","#467557","#385e45","#2a4634"]);

d3.csv("data.csv", function(d,i,cols){
		for (i = 1, t = 0; i < cols.length; ++i) t += d[cols[i]] = +d[cols[i]];
	  d.total = t;
		// console.log(d)
	  return d;
},
function(error, data) {
  if (error) throw error;

	var keys = data.columns.slice(1);
	console.log(keys);
	data.sort(function(a,b){
		return b.total - a.total;
	});

	x.domain(data.map(function(d){
		return d.State;
	}));

	y.domain([0,d3.max(data, function(d){
		return d.total;
	})]).nice();

	z.domain(keys);

	g.append("g")
		.selectAll("g")
		.data(d3.stack().keys(keys)(data))
		.enter()
			.append("g")
			.attr("fill", function(d){
				return z(d.key);
			})
			.selectAll("rect")
			.data(function(d){ return d;})
			.enter()
				.append("rect")
				.attr("x", function(d){
						return x(d.data.State);
				})
				.attr("y", function(d){
						return y(d[1]);
				})
				.attr("height", function(d){
						return y(d[0]) - y(d[1]);
				})
				.attr("width", function(d){
						return x.bandwidth();
				})


  g.append("g")
	  .classed("axis", true)
		.attr("transform", "translate(0," + height + ")")
		.call(d3.axisBottom(x))

		g.append("g")
	      .classed("axis", true)
	      .call(d3.axisLeft(y).ticks(null, "s"))
	    .append("text")
	      .attr("x", 2)
	      .attr("y", y(y.ticks().pop()) + 0.5)
	      .attr("dy", "0.5em")
	      .attr("fill", "#000")
	      .attr("font-weight", "bold")
	      .attr("text-anchor", "start")
	      .text("Population")
				.attr("transform","translate(-55," + height/2 + ") rotate(-90)");


//Top right Legend
var legend = g.append("g")
							.attr("font-family","sans-serif")
							.attr("font-size", 10)
							.attr("text-anchor","end")
						.selectAll("g")
						.data(keys.slice().reverse())
						.enter()
							.append("g")
							.attr("transform", function(d,i){
								 return "translate(0," + i*20 + ")"
							});

		legend.append("rect")
      .attr("x", width - 19)
      .attr("width", 19)
      .attr("height", 19)
      .attr("fill", z);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9.5)
      .attr("dy", "0.32em")
      .text(function(d) { return d; });
});


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Stacked Bar</title>
	<link rel="stylesheet" href="main.css">
	<!-- <script  type="text/javascript" src="../d3.min.js"></script> -->
	<script type="text/javascript" src="https://d3js.org/d3.v4.min.js">

	</script>
</head>
<body>
<!--Place all DOM elements here -->
<!-- <h2>Stacked Bar</h2> -->
<!-- <script src="survey_data.js"></script>	 -->
<script src="stackedbar.js"></script>

</body>
</html>
	var h = 500;
	var w = 800;

	var svg = d3.select("body").append("svg")
	.attr("id","chart")
	.attr("width",w)
	.attr("height",h);

	var num = 51;
	var types = 4;
	var margin = {
	top: 60,
	bottom: 80,
	left: 80,
	right: 80
	};

	var width = w - margin.left - margin.right;
	var height = h - margin.top - margin.bottom;

	var g = svg.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var x = d3.scaleBand()
	.rangeRound([0,width])
	.paddingInner(0.15)
	.align(0.1)


	var y = d3.scaleLinear()
	.rangeRound([height,0]);

	// var colorScale = d3.scaleOrdinal(d3.schemeCategory20);

	var z = d3.scaleOrdinal()
	.range(["#7ed39c","#70bc8b","#62a479","#548d68","#467557","#385e45","#2a4634"]);

	d3.csv("data.csv", function(d,i,cols){
	for (i = 1, t = 0; i < cols.length; ++i) t += d[cols[i]] = +d[cols[i]];
	d.total = t;
	// console.log(d)
	return d;
	},
	function(error, data) {
	if (error) throw error;

	var keys = data.columns.slice(1);
	console.log(keys);
	data.sort(function(a,b){
	return b.total - a.total;
	});

	x.domain(data.map(function(d){
	return d.State;
	}));

	y.domain([0,d3.max(data, function(d){
	return d.total;
	})]).nice();

	z.domain(keys);

	g.append("g")
	.selectAll("g")
	.data(d3.stack().keys(keys)(data))
	.enter()
	.append("g")
	.attr("fill", function(d){
	return z(d.key);
	})
	.selectAll("rect")
	.data(function(d){ return d;})
	.enter()
	.append("rect")
	.attr("x", function(d){
	return x(d.data.State);
	})
	.attr("y", function(d){
	return y(d[1]);
	})
	.attr("height", function(d){
	return y(d[0]) - y(d[1]);
	})
	.attr("width", function(d){
	return x.bandwidth();
	})


	g.append("g")
	.classed("axis", true)
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x))

	g.append("g")
	.classed("axis", true)
	.call(d3.axisLeft(y).ticks(null, "s"))
	.append("text")
	.attr("x", 2)
	.attr("y", y(y.ticks().pop()) + 0.5)
	.attr("dy", "0.5em")
	.attr("fill", "#000")
	.attr("font-weight", "bold")
	.attr("text-anchor", "start")
	.text("Population")
	.attr("transform","translate(-55," + height/2 + ") rotate(-90)");


	//Top right Legend
	var legend = g.append("g")
	.attr("font-family","sans-serif")
	.attr("font-size", 10)
	.attr("text-anchor","end")
	.selectAll("g")
	.data(keys.slice().reverse())
	.enter()
	.append("g")
	.attr("transform", function(d,i){
	return "translate(0," + i*20 + ")"
	});

	legend.append("rect")
	.attr("x", width - 19)
	.attr("width", 19)
	.attr("height", 19)
	.attr("fill", z);

	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9.5)
	.attr("dy", "0.32em")
	.text(function(d) { return d; });
	});



	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Stacked Bar</title>
	<link rel="stylesheet" href="main.css">
	<!-- <script type="text/javascript" src="../d3.min.js"></script> -->
	<script type="text/javascript" src="https://d3js.org/d3.v4.min.js">

	</script>
	</head>
	<body>
	<!--Place all DOM elements here -->
	<!-- <h2>Stacked Bar</h2> -->
	<!-- <script src="survey_data.js"></script> -->
	<script src="stackedbar.js"></script>

	</body>
	</html>