DimsumPanda/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.axis path {
  /*display: none;*/
}

</style>
<body>

<div id="stackedbars">
  <h1>Segments</h1>
  <svg id="stacked" width="600" height="500"></svg></div>
</body>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("#stacked"),
    margin = {top: 20, right: 180, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // var margin = {top: 20, right: 150, bottom: 50, left: 40},
    //     width = 600 - margin.left - marginStacked.right,
    //     height = 500 - margin.top - marginStacked.bottom;
    //
    //
    // var svg = d3.select("#stacked").append("svg")
    //     .attr("width", widthStacked + marginStacked.left + marginStacked.right)
    //     .attr("height", heightStacked + marginStacked.top + marginStacked.bottom)
    //   .append("g")
    //     .attr("transform", "translate(" + marginStacked.left + "," + marginStacked.top + ")");

var x = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.3)
    .align(0.3);

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

var z = d3.scaleOrdinal(d3.schemeCategory20);
    // .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var stack = d3.stack();

d3.csv("segments_table2.csv", type, function(error, data) {
  if (error) throw error;

  data.sort(function(a, b) { return b.total - a.total; });

  x.domain(data.map(function(d) { return d.ethnicity; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
  z.domain(data.columns.slice(1));

  g.selectAll(".serie")
    .data(stack.keys(data.columns.slice(1))(data))
    .enter().append("g")
      .attr("class", "serie")
      .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.ethnicity); })
      .attr("y", function(d) { return y(d[1]); })
      .attr("height", function(d) { return y(d[0]) - y(d[1]); })
      .attr("width", x.bandwidth());

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, "s"))
    .append("text")
      .attr("x", 2)
      .attr("y", y(y.ticks(10).pop()))
      .attr("dy", "0.35em")
      .attr("text-anchor", "start")
      .attr("fill", "#000")
      .text("Population");

  var legend = g.selectAll(".legend")
    .data(data.columns.slice(1).reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
      .style("font", "10px sans-serif");

  legend.append("rect")
      .attr("x", width + 18)
      .attr("width", 18)
      .attr("height", 18)
      .attr("fill", z);

  legend.append("text")
      .attr("x", width + 44)
      .attr("y", 9)
      .attr("dy", ".35em")
      .attr("text-anchor", "start")
      .text(function(d) { return d; });
});

function type(d, i, columns) {
  for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
  d.total = t;
  return d;
}
</script>
</body>
</html>

## segments_table2.csv

          
            ethnicity
            F Under 25
            F Over 75
            F 25 to 50
            F 50 to 75
            M Under 25
            M Over 75
            M 25 to 50
            M 50 to 75

            
              Asian
              327
              296
              332
              309
              306
              330
              307
              323

            
              Black
              294
              302
              330
              305
              295
              363
              322
              292

            
              Hispanic
              315
              351
              307
              323
              312
              324
              297
              306

            
              White
              311
              298
              303
              306
              308
              286
              282
              338
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.bar {
	fill: steelblue;
	}

	.axis path {
	/display: none;/
	}

	</style>
	<body>

	<div id="stackedbars">
	<h1>Segments</h1>
	<svg id="stacked" width="600" height="500"></svg></div>
	</body>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script>

	var svg = d3.select("#stacked"),
	margin = {top: 20, right: 180, bottom: 30, left: 40},
	width = +svg.attr("width") - margin.left - margin.right,
	height = +svg.attr("height") - margin.top - margin.bottom,
	g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	// var margin = {top: 20, right: 150, bottom: 50, left: 40},
	// width = 600 - margin.left - marginStacked.right,
	// height = 500 - margin.top - marginStacked.bottom;
	//
	//
	// var svg = d3.select("#stacked").append("svg")
	// .attr("width", widthStacked + marginStacked.left + marginStacked.right)
	// .attr("height", heightStacked + marginStacked.top + marginStacked.bottom)
	// .append("g")
	// .attr("transform", "translate(" + marginStacked.left + "," + marginStacked.top + ")");

	var x = d3.scaleBand()
	.rangeRound([0, width])
	.padding(0.3)
	.align(0.3);

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

	var z = d3.scaleOrdinal(d3.schemeCategory20);
	// .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

	var stack = d3.stack();

	d3.csv("segments_table2.csv", type, function(error, data) {
	if (error) throw error;

	data.sort(function(a, b) { return b.total - a.total; });

	x.domain(data.map(function(d) { return d.ethnicity; }));
	y.domain([0, d3.max(data, function(d) { return d.total; })]).nice();
	z.domain(data.columns.slice(1));

	g.selectAll(".serie")
	.data(stack.keys(data.columns.slice(1))(data))
	.enter().append("g")
	.attr("class", "serie")
	.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.ethnicity); })
	.attr("y", function(d) { return y(d[1]); })
	.attr("height", function(d) { return y(d[0]) - y(d[1]); })
	.attr("width", x.bandwidth());

	g.append("g")
	.attr("class", "axis axis--x")
	.attr("transform", "translate(0," + height + ")")
	.call(d3.axisBottom(x));

	g.append("g")
	.attr("class", "axis axis--y")
	.call(d3.axisLeft(y).ticks(10, "s"))
	.append("text")
	.attr("x", 2)
	.attr("y", y(y.ticks(10).pop()))
	.attr("dy", "0.35em")
	.attr("text-anchor", "start")
	.attr("fill", "#000")
	.text("Population");

	var legend = g.selectAll(".legend")
	.data(data.columns.slice(1).reverse())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; })
	.style("font", "10px sans-serif");

	legend.append("rect")
	.attr("x", width + 18)
	.attr("width", 18)
	.attr("height", 18)
	.attr("fill", z);

	legend.append("text")
	.attr("x", width + 44)
	.attr("y", 9)
	.attr("dy", ".35em")
	.attr("text-anchor", "start")
	.text(function(d) { return d; });
	});

	function type(d, i, columns) {
	for (i = 1, t = 0; i < columns.length; ++i) t += d[columns[i]] = +d[columns[i]];
	d.total = t;
	return d;
	}
	</script>
	</body>
	</html>
ethnicity	F Under 25	F Over 75	F 25 to 50	F 50 to 75	M Under 25	M Over 75	M 25 to 50	M 50 to 75
Asian	327	296	332	309	306	330	307	323
Black	294	302	330	305	295	363	322	292
Hispanic	315	351	307	323	312	324	297	306
White	311	298	303	306	308	286	282	338