EE2dev/README.md

## README.md

      
    Raw
  

              README.md
            
          
    This shows how to adjust Mike Bostock's example of grouped bars such that you can separately sort the bars within groups or the groups themselves.
To separately sort the bars within groups see the comments A1 - A3.
To sort the groups themselves see comment B1.

  
## 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="http://d3js.org/d3.v3.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.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

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

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

var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

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 + ")");

d3.csv("states.csv", function(error, data) {
  var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
  data.forEach(function(d) {
    d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
    // A1: add next line
    d.ages.sort(function(a, b) { return d3.ascending(a.value, b.value); });
  });

  // B1: substitute with next 3 lines x0.domain(data.map(function(d) { return d.State; }));
  var myStates = data.map(function(d) { return d.State; });
  myStates.sort(function(a, b) { return d3.ascending(a, b); });
  x0.domain(myStates);
  // A2: substitute with next line - x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
  x1.domain(d3.range(0, data[0].ages.length)).rangeRoundBands([0, x0.rangeBand()]);
  y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

  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", ".71em")
      .style("text-anchor", "end")
      .text("Population");

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

  state.selectAll("rect")
      .data(function(d) { return d.ages; })
    .enter().append("rect")
      .attr("width", x1.rangeBand())
      // A3: substitute with next line - .attr("x", function(d) { return x1(d.name); })
      .attr("x", function(d, i) { return x1(i); })
      .attr("y", function(d) { return y(d.value); })
      .attr("height", function(d) { return height - y(d.value); })
      .style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
      .data(ageNames.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>

## states.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

            
              CA
              2704659
              4499890
              2159981
              3853788
              10604510
              8819342
              4114496

            
              TX
              2027307
              3277946
              1420518
              2454721
              7017731
              5656528
              2472223

            
              NY
              1208495
              2141490
              1058031
              1999120
              5355235
              5120254
              2607672

            
              FL
              1140516
              1938695
              925060
              1607297
              4782119
              4746856
              3187797

            
              IL
              894368
              1558919
              725973
              1311479
              3596343
              3239173
              1575308

            
              PA
              737462
              1345341
              679201
              1203944
              3157759
              3414001
              1910571

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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="http://d3js.org/d3.v3.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.scale.ordinal()
	.rangeRoundBands([0, width], .1);

	var x1 = d3.scale.ordinal();

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

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

	var xAxis = d3.svg.axis()
	.scale(x0)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickFormat(d3.format(".2s"));

	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 + ")");

	d3.csv("states.csv", function(error, data) {
	var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
	data.forEach(function(d) {
	d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
	// A1: add next line
	d.ages.sort(function(a, b) { return d3.ascending(a.value, b.value); });
	});

	// B1: substitute with next 3 lines x0.domain(data.map(function(d) { return d.State; }));
	var myStates = data.map(function(d) { return d.State; });
	myStates.sort(function(a, b) { return d3.ascending(a, b); });
	x0.domain(myStates);
	// A2: substitute with next line - x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
	x1.domain(d3.range(0, data[0].ages.length)).rangeRoundBands([0, x0.rangeBand()]);
	y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);

	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", ".71em")
	.style("text-anchor", "end")
	.text("Population");

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

	state.selectAll("rect")
	.data(function(d) { return d.ages; })
	.enter().append("rect")
	.attr("width", x1.rangeBand())
	// A3: substitute with next line - .attr("x", function(d) { return x1(d.name); })
	.attr("x", function(d, i) { return x1(i); })
	.attr("y", function(d) { return y(d.value); })
	.attr("height", function(d) { return height - y(d.value); })
	.style("fill", function(d) { return color(d.name); });

	var legend = svg.selectAll(".legend")
	.data(ageNames.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
CA	2704659	4499890	2159981	3853788	10604510	8819342	4114496
TX	2027307	3277946	1420518	2454721	7017731	5656528	2472223
NY	1208495	2141490	1058031	1999120	5355235	5120254	2607672
FL	1140516	1938695	925060	1607297	4782119	4746856	3187797
IL	894368	1558919	725973	1311479	3596343	3239173	1575308
PA	737462	1345341	679201	1203944	3157759	3414001	1910571