vaibhavb/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Another stacked graph!

  
## consumption.csv

          
            country
            recreation
            clothing
            household
            alcohol
            electronics
            healthcare

            
              Canada
              2238
              937
              2008
              904
              359
              5257

            
              USA
              2883
              1406
              1495
              673
              1406
              8233

            
              Sweden
              2642
              1094
              1213
              780
              368
              4708

            
              England
              3621
              1512
              1648
              1031
              764
              3495

            
              Switzerland
              2582
              1159
              1423
              1120
              395
              7699

            
              Norway
              4242
              2027
              2027
              1379
              794
              8039

            
              Finland
              2555
              996
              1277
              1090
              413
              3955

            
              Denmark
              2940
              1187
              1680
              968
              548
              6253

            
              Germany
              2071
              1042
              1042
              778
              365
              4654

            
              Brazil
              82
              130
              82
              136
              27
              990

            
              Peru
              53
              128
              82
              46
              7
              258

            
              Colombia
              120
              91
              120
              113
              18
              407

            
              Nigeria
              16
              486
              28
              17
              3
              67

            
              Egypt
              29
              83
              56
              29
              7
              125

            
              Pakistan
              1
              35
              21
              15
              1
              28

            
              China
              26
              72
              43
              24
              9
              219

            
              Thailand
              140
              143
              116
              114
              46
              179

            
              Indonesia
              23
              48
              70
              68
              6
              84

            
              Australia
              2734
              773
              1309
              936
              568
              5174

            
              India
              10
              25
              18
              12
              3
              51

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

body {
  font-family: sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

.axis path {
  display: none;
}

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

.group-label {
  font-weight: bold;
  text-anchor: end;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

</style>
<form>
  <label><input type="radio" name="mode" value="multiples" checked> Multiples</label>
  <label><input type="radio" name="mode" value="stacked"> Stacked</label>
</form>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 10, right: 20, bottom: 20, left: 60},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var y0 = d3.scale.ordinal()
    .rangeRoundBands([height, 0], .2);

var y1 = d3.scale.linear();

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, 0);

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

var nest = d3.nest()
  .key(function (d) { return d.group;});

var stack = d3.layout.stack()
    .values(function(d) { return d.values; })
    .x(function(d) { return d.country; })
    .y(function(d) { return d.value; })
    .out(function(d, y0) { d.valueOffset = y0; });

var color = d3.scale.category10();

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("consumption.csv", function(error, data) {

  // massage the data
  var newdata = new Array();
  data.forEach(function(d) {
    ["recreation", "clothing", "alcohol", "household", "healthcare",
        "electronics"].forEach(function(key){
      var entry = new Object();
      entry.country = d.country;
      entry.group = key;
      entry.value = +d[key];
      newdata.push(entry);
    });
  });
  data = newdata;

  var dataByGroup = nest.entries(data);

  stack(dataByGroup);
  x.domain(dataByGroup[0].values.map(function(d) { return d.country; }));
  y0.domain(dataByGroup.map(function(d) { return d.key; }));
  y1.domain([0, d3.max(data, function(d) { return d.value; })]).range([y0.rangeBand(), 0]);

  var group = svg.selectAll(".group")
      .data(dataByGroup)
    .enter().append("g")
      .attr("class", "group")
      .attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });

  group.append("text")
      .attr("class", "group-label")
      .attr("x", -6)
      .attr("y", function(d) { return y1(d.values[0].value / 2); })
      .attr("dy", ".35em")
      .text(function(d) { return d.key; });

  group.selectAll("rect")
      .data(function(d) { return d.values; })
    .enter().append("rect")
      .style("fill", function(d) { return color(d.group); })
      .attr("x", function(d) { return x(d.country); })
      .attr("y", function(d) { return y1(d.value); })
      .attr("width", x.rangeBand())
      .attr("height", function(d) { return y0.rangeBand() - y1(d.value); });

  group.filter(function(d, i) { return !i; }).append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + y0.rangeBand() + ")")
      .call(xAxis);

  d3.selectAll("input").on("change", change);

  var timeout = setTimeout(function() {
    d3.select("input[value=\"stacked\"]").property("checked", true).each(change);
  }, 2000);

  function change() {
    clearTimeout(timeout);
    if (this.value === "multiples") transitionMultiples();
    else transitionStacked();
  }

  function transitionMultiples() {
    var t = svg.transition().duration(750),
        g = t.selectAll(".group").attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });
    g.selectAll("rect").attr("y", function(d) { return y1(d.value); });
    g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2); })
  }

  function transitionStacked() {
    var t = svg.transition().duration(750),
        g = t.selectAll(".group").attr("transform", "translate(0," + y0(y0.domain()[0]) + ")");
    g.selectAll("rect").attr("y", function(d) { return y1(d.value + d.valueOffset); });
    g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2 + d.values[0].valueOffset); })
  }
});

</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
country	recreation	clothing	household	alcohol	electronics	healthcare
Canada	2238	937	2008	904	359	5257
USA	2883	1406	1495	673	1406	8233
Sweden	2642	1094	1213	780	368	4708
England	3621	1512	1648	1031	764	3495
Switzerland	2582	1159	1423	1120	395	7699
Norway	4242	2027	2027	1379	794	8039
Finland	2555	996	1277	1090	413	3955
Denmark	2940	1187	1680	968	548	6253
Germany	2071	1042	1042	778	365	4654
Brazil	82	130	82	136	27	990
Peru	53	128	82	46	7	258
Colombia	120	91	120	113	18	407
Nigeria	16	486	28	17	3	67
Egypt	29	83	56	29	7	125
Pakistan	1	35	21	15	1	28
China	26	72	43	24	9	219
Thailand	140	143	116	114	46	179
Indonesia	23	48	70	68	6	84
Australia	2734	773	1309	936	568	5174
India	10	25	18	12	3	51
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: sans-serif;
	margin: auto;
	position: relative;
	width: 960px;
	}

	text {
	font: 10px sans-serif;
	}

	.axis path {
	display: none;
	}

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

	.group-label {
	font-weight: bold;
	text-anchor: end;
	}

	form {
	position: absolute;
	right: 10px;
	top: 10px;
	}

	</style>
	<form>
	<label><input type="radio" name="mode" value="multiples" checked> Multiples</label>
	<label><input type="radio" name="mode" value="stacked"> Stacked</label>
	</form>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 10, right: 20, bottom: 20, left: 60},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var y0 = d3.scale.ordinal()
	.rangeRoundBands([height, 0], .2);

	var y1 = d3.scale.linear();

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1, 0);

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

	var nest = d3.nest()
	.key(function (d) { return d.group;});

	var stack = d3.layout.stack()
	.values(function(d) { return d.values; })
	.x(function(d) { return d.country; })
	.y(function(d) { return d.value; })
	.out(function(d, y0) { d.valueOffset = y0; });

	var color = d3.scale.category10();

	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("consumption.csv", function(error, data) {

	// massage the data
	var newdata = new Array();
	data.forEach(function(d) {
	["recreation", "clothing", "alcohol", "household", "healthcare",
	"electronics"].forEach(function(key){
	var entry = new Object();
	entry.country = d.country;
	entry.group = key;
	entry.value = +d[key];
	newdata.push(entry);
	});
	});
	data = newdata;

	var dataByGroup = nest.entries(data);

	stack(dataByGroup);
	x.domain(dataByGroup[0].values.map(function(d) { return d.country; }));
	y0.domain(dataByGroup.map(function(d) { return d.key; }));
	y1.domain([0, d3.max(data, function(d) { return d.value; })]).range([y0.rangeBand(), 0]);

	var group = svg.selectAll(".group")
	.data(dataByGroup)
	.enter().append("g")
	.attr("class", "group")
	.attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });

	group.append("text")
	.attr("class", "group-label")
	.attr("x", -6)
	.attr("y", function(d) { return y1(d.values[0].value / 2); })
	.attr("dy", ".35em")
	.text(function(d) { return d.key; });

	group.selectAll("rect")
	.data(function(d) { return d.values; })
	.enter().append("rect")
	.style("fill", function(d) { return color(d.group); })
	.attr("x", function(d) { return x(d.country); })
	.attr("y", function(d) { return y1(d.value); })
	.attr("width", x.rangeBand())
	.attr("height", function(d) { return y0.rangeBand() - y1(d.value); });

	group.filter(function(d, i) { return !i; }).append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + y0.rangeBand() + ")")
	.call(xAxis);

	d3.selectAll("input").on("change", change);

	var timeout = setTimeout(function() {
	d3.select("input[value=\"stacked\"]").property("checked", true).each(change);
	}, 2000);

	function change() {
	clearTimeout(timeout);
	if (this.value === "multiples") transitionMultiples();
	else transitionStacked();
	}

	function transitionMultiples() {
	var t = svg.transition().duration(750),
	g = t.selectAll(".group").attr("transform", function(d) { return "translate(0," + y0(d.key) + ")"; });
	g.selectAll("rect").attr("y", function(d) { return y1(d.value); });
	g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2); })
	}

	function transitionStacked() {
	var t = svg.transition().duration(750),
	g = t.selectAll(".group").attr("transform", "translate(0," + y0(y0.domain()[0]) + ")");
	g.selectAll("rect").attr("y", function(d) { return y1(d.value + d.valueOffset); });
	g.select(".group-label").attr("y", function(d) { return y1(d.values[0].value / 2 + d.values[0].valueOffset); })
	}
	});

	</script>