ypetya/data.csv

## data.csv

          
            State
            Under 5 Years
            5 to 13 Years
            14 to 17 Years
            18 to 24 Years
            25 to 44 Years
            45 to 64 Years
            65 Years and Over

            
              AL
              310504
              552339
              259034
              450818
              1231572
              1215966
              641667

            
              AK
              52083
              85640
              42153
              74257
              198724
              183159
              50277

            
              AZ
              515910
              828669
              362642
              601943
              1804762
              1523681
              862573

            
              AR
              202070
              343207
              157204
              264160
              754420
              727124
              407205

            
              CA
              2704659
              4499890
              2159981
              3853788
              10604510
              8819342
              4114496

            
              CO
              358280
              587154
              261701
              466194
              1464939
              1290094
              511094

            
              CT
              211637
              403658
              196918
              325110
              916955
              968967
              478007

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

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = d3.scaleBand().range([0, width]);

var x1 = d3.scaleBand();

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

var xAxis = d3.axisBottom()
    .scale(x0);

var yAxis = d3.axisLeft()
    .scale(y)
    .tickFormat(d3.format(".2s"));

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

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var yBegin;

var innerColumns = {
  "column1" : ["Under 5 Years","5 to 13 Years","14 to 17 Years"],
  "column2" : ["18 to 24 Years"],
  "column3" : ["25 to 44 Years"],
  "column4" : ["45 to 64 Years", "65 Years and Over"]
}

d3.csv("data.csv").then(
    function(data) {
  var columnHeaders = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
  data.forEach(function(d) {
    var yColumn = new Array();
    d.columnDetails = columnHeaders.map(function(name) {
      for (ic in innerColumns) {
        if($.inArray(name, innerColumns[ic]) >= 0){
          if (!yColumn[ic]){
            yColumn[ic] = 0;
          }
          yBegin = yColumn[ic];
          yColumn[ic] += +d[name];
          return {name: name, column: ic, yBegin: yBegin, yEnd: +d[name] + yBegin,};
        }
      }
    });
    d.total = d3.max(d.columnDetails, function(d) {
      return d.yEnd;
    });
  });

  x0.domain(data.map(function(d) { return d.State; }));
  x1.domain(d3.keys(innerColumns)).range([0, x0.bandwidth()]);

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

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".7em")
      .style("text-anchor", "end")
      .text("");

  var project_stackedbar = svg.selectAll(".project_stackedbar")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

  project_stackedbar.selectAll("rect")
      .data(function(d) { return d.columnDetails; })
    .enter().append("rect")
      .attr("width", x1.bandwidth())
      .attr("x", function(d) {
        return x1(d.column);
         })
      .attr("y", function(d) {
        return y(d.yEnd);
      })
      .attr("height", function(d) {
        return y(d.yBegin) - y(d.yEnd);
      })
      .style("fill", function(d) {
          return color(d.name);
      });

  var legend = svg.selectAll(".legend")
      .data(columnHeaders.slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

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

});

</script>
State	Under 5 Years	5 to 13 Years	14 to 17 Years	18 to 24 Years	25 to 44 Years	45 to 64 Years	65 Years and Over
AL	310504	552339	259034	450818	1231572	1215966	641667
AK	52083	85640	42153	74257	198724	183159	50277
AZ	515910	828669	362642	601943	1804762	1523681	862573
AR	202070	343207	157204	264160	754420	727124	407205
CA	2704659	4499890	2159981	3853788	10604510	8819342	4114496
CO	358280	587154	261701	466194	1464939	1290094	511094
CT	211637	403658	196918	325110	916955	968967	478007
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.bar {
	fill: steelblue;
	}

	.x.axis path {
	display: none;
	}

	</style>
	<body>
	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script>
	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x0 = d3.scaleBand().range([0, width]);

	var x1 = d3.scaleBand();

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

	var xAxis = d3.axisBottom()
	.scale(x0);

	var yAxis = d3.axisLeft()
	.scale(y)
	.tickFormat(d3.format(".2s"));

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

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var yBegin;

	var innerColumns = {
	"column1" : ["Under 5 Years","5 to 13 Years","14 to 17 Years"],
	"column2" : ["18 to 24 Years"],
	"column3" : ["25 to 44 Years"],
	"column4" : ["45 to 64 Years", "65 Years and Over"]
	}

	d3.csv("data.csv").then(
	function(data) {
	var columnHeaders = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));
	data.forEach(function(d) {
	var yColumn = new Array();
	d.columnDetails = columnHeaders.map(function(name) {
	for (ic in innerColumns) {
	if($.inArray(name, innerColumns[ic]) >= 0){
	if (!yColumn[ic]){
	yColumn[ic] = 0;
	}
	yBegin = yColumn[ic];
	yColumn[ic] += +d[name];
	return {name: name, column: ic, yBegin: yBegin, yEnd: +d[name] + yBegin,};
	}
	}
	});
	d.total = d3.max(d.columnDetails, function(d) {
	return d.yEnd;
	});
	});

	x0.domain(data.map(function(d) { return d.State; }));
	x1.domain(d3.keys(innerColumns)).range([0, x0.bandwidth()]);

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

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".7em")
	.style("text-anchor", "end")
	.text("");

	var project_stackedbar = svg.selectAll(".project_stackedbar")
	.data(data)
	.enter().append("g")
	.attr("class", "g")
	.attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });

	project_stackedbar.selectAll("rect")
	.data(function(d) { return d.columnDetails; })
	.enter().append("rect")
	.attr("width", x1.bandwidth())
	.attr("x", function(d) {
	return x1(d.column);
	})
	.attr("y", function(d) {
	return y(d.yEnd);
	})
	.attr("height", function(d) {
	return y(d.yBegin) - y(d.yEnd);
	})
	.style("fill", function(d) {
	return color(d.name);
	});

	var legend = svg.selectAll(".legend")
	.data(columnHeaders.slice().reverse())
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

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

	});

	</script>