monte-hayward/data.tsv

## data.tsv

          
            group
            date
            value

            
              1
              2008-01
              10

            
              1
              2008-04
              8

            
              1
              2008-07
              14

            
              1
              2008-10
              9

            
              1
              2009-01
              10

            
              1
              2009-04
              8

            
              1
              2009-07
              14

            
              1
              2009-10
              9

            
              2
              2008-01
              3

            
              2
              2008-04
              3.5

            
              2
              2008-07
              5

            
              2
              2008-10
              11

            
              2
              2009-01
              3

            
              2
              2009-04
              3.5

            
              2
              2009-07
              4.5

            
              2
              2009-10
              10.5

            
              3
              2008-01
              10

            
              3
              2008-04
              8

            
              3
              2008-07
              14

            
              3
              2008-10
              9

            
              3
              2009-01
              10

            
              3
              2009-04
              8

            
              3
              2009-07
              14

            
              3
              2009-10
              9

            
              4
              2008-01
              3

            
              4
              2008-04
              3.5

            
              4
              2008-07
              5

            
              4
              2008-10
              11

            
              4
              2009-01
              3

            
              4
              2009-04
              3.5

            
              4
              2009-07
              4.5

            
              4
              2009-10
              10.5

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	body {
		font-family: "Helvetica Neue", Helvetica, Arial, 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>
</head>
<body>
<form>
  <label><input type="radio" name="mode" value="multiples" checked>Multiples</label>
  <label><input type="radio" name="mode" value="stacked" checked>Stacked</label>
</form>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
  var parseDate = d3.time.format('%Y-%m').parse,
    formatYear = d3.format('02d'),
    formatDate = function(d){
      return 'Q'
      + ( (d.getMonth() / 3 | 0) + 1)
      + formatYear(d.getFullYear() % 100);
    };
  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')
      .tickFormat(formatDate);

  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.date; } )
      .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.tsv('data.tsv', function(error, data){
    data.forEach(function(d){
      d.date = parseDate(d.date);
      d.value = +d.value;
    });

    var dataByGroup = nest.entries(data);

    stack(dataByGroup);
    x.domain(dataByGroup[0].values.map( function(d){ return d.date; }));
    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', '.35rem')
        .text (function(d){ return 'Group ' + 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.date); })
        .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>


</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
group	date	value
1	2008-01	10
1	2008-04	8
1	2008-07	14
1	2008-10	9
1	2009-01	10
1	2009-04	8
1	2009-07	14
1	2009-10	9
2	2008-01	3
2	2008-04	3.5
2	2008-07	5
2	2008-10	11
2	2009-01	3
2	2009-04	3.5
2	2009-07	4.5
2	2009-10	10.5
3	2008-01	10
3	2008-04	8
3	2008-07	14
3	2008-10	9
3	2009-01	10
3	2009-04	8
3	2009-07	14
3	2009-10	9
4	2008-01	3
4	2008-04	3.5
4	2008-07	5
4	2008-10	11
4	2009-01	3
4	2009-04	3.5
4	2009-07	4.5
4	2009-10	10.5
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	body {
	font-family: "Helvetica Neue", Helvetica, Arial, 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>
	</head>
	<body>
	<form>
	<label><input type="radio" name="mode" value="multiples" checked>Multiples</label>
	<label><input type="radio" name="mode" value="stacked" checked>Stacked</label>
	</form>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script>
	var parseDate = d3.time.format('%Y-%m').parse,
	formatYear = d3.format('02d'),
	formatDate = function(d){
	return 'Q'
	+ ( (d.getMonth() / 3 \| 0) + 1)
	+ formatYear(d.getFullYear() % 100);
	};
	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')
	.tickFormat(formatDate);

	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.date; } )
	.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.tsv('data.tsv', function(error, data){
	data.forEach(function(d){
	d.date = parseDate(d.date);
	d.value = +d.value;
	});

	var dataByGroup = nest.entries(data);

	stack(dataByGroup);
	x.domain(dataByGroup[0].values.map( function(d){ return d.date; }));
	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', '.35rem')
	.text (function(d){ return 'Group ' + 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.date); })
	.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>


	</body>
	</html>