Stacked-to-Grouped Bars

config.json

{"description":"Stacked-to-Grouped Bars","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"index.html":{"default":true,"vim":false,"emacs":false,"fontSize":12},"data.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/oKiWqYR.png"}

data.json

[
	{
		"y1": "0.44841531",
		"y2": "0.131389432",
		"y3": "0.163227159",
		"y4": "0.201189963"
	},
	{
		"y1": "0.750727745",
		"y2": "0.195120434",
		"y3": "0.133490354",
		"y4": "0.186217493"
	},
	{
		"y1": "1.001580247",
		"y2": "0.163735405",
		"y3": "0.127338962",
		"y4": "0.210334843"
	},
	{
		"y1": "1.415201406",
		"y2": "0.184339201",
		"y3": "0.111216272",
		"y4": "0.145376814"
	},
	{
		"y1": "1.793635155",
		"y2": "0.15099838",
		"y3": "0.152541636",
		"y4": "0.195802439"
	},
	{
		"y1": "2.159620035",
		"y2": "0.109805811",
		"y3": "0.143653444",
		"y4": "0.310508776"
	},
	{
		"y1": "2.290753176",
		"y2": "0.102780448",
		"y3": "0.193161446",
		"y4": "0.510523108"
	},
	{
		"y1": "2.346458024",
		"y2": "0.190501329",
		"y3": "0.154381418",
		"y4": "0.842343619"
	},
	{
		"y1": "2.522653483",
		"y2": "0.188226575",
		"y3": "0.113568462",
		"y4": "1.232657558"
	},
	{
		"y1": "3.206318845",
		"y2": "0.184279183",
		"y3": "0.131395377",
		"y4": "1.722660902"
	},
	{
		"y1": "2.058630628",
		"y2": "0.128588955",
		"y3": "0.175218299",
		"y4": "2.294246347"
	},
	{
		"y1": "2.070074592",
		"y2": "0.17498964",
		"y3": "0.184408039",
		"y4": "2.711879503"
	},
	{
		"y1": "2.278725245",
		"y2": "0.175062681",
		"y3": "0.139201597",
		"y4": "3.039728996"
	},
	{
		"y1": "2.682678195",
		"y2": "0.180443233",
		"y3": "0.16913283",
		"y4": "2.979092971"
	},
	{
		"y1": "3.293884274",
		"y2": "0.179814097",
		"y3": "0.137543142",
		"y4": "2.810152513"
	},
	{
		"y1": "3.818541618",
		"y2": "0.158913045",
		"y3": "0.156731945",
		"y4": "2.336890569"
	},
	{
		"y1": "4.216437585",
		"y2": "0.155382265",
		"y3": "0.134853004",
		"y4": "1.82556176"
	},
	{
		"y1": "4.410267233",
		"y2": "0.150630042",
		"y3": "0.118845355",
		"y4": "1.313239871"
	},
	{
		"y1": "4.233119727",
		"y2": "0.182078757",
		"y3": "0.113587729",
		"y4": "0.853753638"
	},
	{
		"y1": "3.782092597",
		"y2": "0.142007402",
		"y3": "0.107947121",
		"y4": "0.551263258"
	},
	{
		"y1": "3.124456846",
		"y2": "0.167510901",
		"y3": "0.124008154",
		"y4": "0.345170368"
	},
	{
		"y1": "2.39278551",
		"y2": "0.134200046",
		"y3": "0.158270146",
		"y4": "0.350756793"
	},
	{
		"y1": "1.726383771",
		"y2": "0.10081808",
		"y3": "0.209598853",
		"y4": "0.545526664"
	},
	{
		"y1": "1.158148458",
		"y2": "0.135998914",
		"y3": "0.343834132",
		"y4": "1.717824034"
	},
	{
		"y1": "0.800413076",
		"y2": "0.192827852",
		"y3": "0.426648595",
		"y4": "4.10521431"
	},
	{
		"y1": "0.466894576",
		"y2": "0.181163722",
		"y3": "0.711710817",
		"y4": "5.925677179"
	},
	{
		"y1": "0.297624673",
		"y2": "0.113449057",
		"y3": "1.050653843",
		"y4": "5.216585069"
	},
	{
		"y1": "0.228974481",
		"y2": "0.103466633",
		"y3": "1.393012109",
		"y4": "2.784508615"
	},
	{
		"y1": "0.300606061",
		"y2": "0.195931431",
		"y3": "1.86128266",
		"y4": "0.917004351"
	},
	{
		"y1": "0.341498145",
		"y2": "0.142756664",
		"y3": "2.176656545",
		"y4": "0.314107222"
	},
	{
		"y1": "0.391329302",
		"y2": "0.197113268",
		"y3": "2.546383918",
		"y4": "0.184784466"
	},
	{
		"y1": "0.646584189",
		"y2": "0.155972309",
		"y3": "2.918462474",
		"y4": "0.144472295"
	},
	{
		"y1": "0.897800187",
		"y2": "0.146030107",
		"y3": "3.456124051",
		"y4": "0.104122947"
	},
	{
		"y1": "1.148083643",
		"y2": "0.200434728",
		"y3": "4.112952281",
		"y4": "0.128645056"
	},
	{
		"y1": "1.593710166",
		"y2": "0.266910169",
		"y3": "4.817265528",
		"y4": "0.436058082"
	},
	{
		"y1": "1.98177582",
		"y2": "0.316079481",
		"y3": "5.199071661",
		"y4": "1.11628535"
	},
	{
		"y1": "2.421729219",
		"y2": "0.376777361",
		"y3": "4.930727592",
		"y4": "0.642864685"
	},
	{
		"y1": "2.658043019",
		"y2": "0.494795463",
		"y3": "4.032726165",
		"y4": "0.200862514"
	},
	{
		"y1": "2.891429933",
		"y2": "0.651157065",
		"y3": "2.789173224",
		"y4": "0.140608978"
	},
	{
		"y1": "2.87108487",
		"y2": "0.84903721",
		"y3": "1.764198216",
		"y4": "0.103313549"
	},
	{
		"y1": "2.696280615",
		"y2": "0.999177715",
		"y3": "0.910645333",
		"y4": "0.178917273"
	},
	{
		"y1": "2.445645962",
		"y2": "1.128325766",
		"y3": "0.469539248",
		"y4": "0.126848766"
	},
	{
		"y1": "2.034057349",
		"y2": "1.252636003",
		"y3": "0.234183614",
		"y4": "0.14552864"
	},
	{
		"y1": "1.684124904",
		"y2": "1.371376546",
		"y3": "0.23213771",
		"y4": "0.111225996"
	},
	{
		"y1": "1.289320957",
		"y2": "1.342357786",
		"y3": "0.200894788",
		"y4": "0.156165805"
	},
	{
		"y1": "0.921861603",
		"y2": "1.224184022",
		"y3": "0.176985305",
		"y4": "0.155579813"
	},
	{
		"y1": "0.62577885",
		"y2": "1.132514046",
		"y3": "0.195789642",
		"y4": "0.209574918"
	},
	{
		"y1": "0.430979873",
		"y2": "0.913704496",
		"y3": "0.170437431",
		"y4": "0.216571021"
	},
	{
		"y1": "0.351087735",
		"y2": "0.767489685",
		"y3": "0.114379933",
		"y4": "0.242035052"
	},
	{
		"y1": "0.209677496",
		"y2": "0.62191466",
		"y3": "0.188048818",
		"y4": "0.323813472"
	},
	{
		"y1": "0.216411543",
		"y2": "0.47569964",
		"y3": "0.112342445",
		"y4": "0.395164703"
	},
	{
		"y1": "0.18471362",
		"y2": "0.344551185",
		"y3": "0.123344361",
		"y4": "0.564713283"
	},
	{
		"y1": "0.132134088",
		"y2": "0.291868174",
		"y3": "0.199381299",
		"y4": "0.808375355"
	},
	{
		"y1": "0.151899272",
		"y2": "0.220830519",
		"y3": "0.134587091",
		"y4": "1.097466222"
	},
	{
		"y1": "0.18635067",
		"y2": "0.154454641",
		"y3": "0.108180591",
		"y4": "1.400464408"
	},
	{
		"y1": "0.10641579",
		"y2": "0.168262812",
		"y3": "0.103499313",
		"y4": "1.673994257"
	},
	{
		"y1": "0.117350128",
		"y2": "0.148118363",
		"y3": "0.174638185",
		"y4": "1.758260809"
	},
	{
		"y1": "0.1398982",
		"y2": "0.178701391",
		"y3": "0.142214427",
		"y4": "1.888467324"
	}
]

index.html

<form>
  <label><input type="radio" name="mode" value="grouped"> Grouped</label>
  <label><input type="radio" name="mode" value="stacked" checked> Stacked</label>
</form>

inlet.js

//assign data.json to variable
var data = tributary.data;
//console.log(data);

//from http://bl.ocks.org/mbostock/3943967

var n = 4, // number of layers
    m = 58, // number of samples per layer
    stack = d3.layout.stack(),
    layers = stack(d3.range(n).map(function() { return bumpLayer(m, 0.1); })),
    yGroupMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y; }); }),
    yStackMax = d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); });
	//console.log(bumpLayer(m, 0.1));

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

var x = d3.scale.ordinal()
    .domain(d3.range(m))
    .rangeRoundBands([0, width], 0.08);

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

var color = d3.scale.linear()
    .domain([0, n - 1])
    .range(["#aad", "#556"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .tickSize(0)
    .tickPadding(6)
    .orient("bottom");

var svg = d3.select("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 layer = svg.selectAll(".layer")
    .data(layers)
  .enter().append("g")
    .attr("class", "layer")
    .style("fill", function(d, i) { return color(i); });

var rect = layer.selectAll("rect")
    .data(function(d) { return d; })
  .enter().append("rect")
    .attr("x", function(d) { return x(d.x); })
    .attr("y", height)
    .attr("width", x.rangeBand())
    .attr("height", 0);

rect.transition()
    .delay(function(d, i) { return i * 10; })
    .attr("y", function(d) { return y(d.y0 + d.y); })
    .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); });

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

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

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

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

function transitionGrouped() {
  y.domain([0, yGroupMax]);

  rect.transition()
      .duration(500)
      .delay(function(d, i) { return i * 10; })
      .attr("x", function(d, i, j) { return x(d.x) + x.rangeBand() / n * j; })
      .attr("width", x.rangeBand() / n)
    .transition()
      .attr("y", function(d) { return y(d.y); })
      .attr("height", function(d) { return height - y(d.y); });
}

function transitionStacked() {
  y.domain([0, yStackMax]);

  rect.transition()
      .duration(500)
      .delay(function(d, i) { return i * 10; })
      .attr("y", function(d) { return y(d.y0 + d.y); })
      .attr("height", function(d) { return y(d.y0) - y(d.y0 + d.y); })
    .transition()
      .attr("x", function(d) { return x(d.x); })
      .attr("width", x.rangeBand());
}

// Inspired by Lee Byron's test data generator.
function bumpLayer(n, o) {

  function bump(a) {
    var x = 1 / (0.1 + Math.random()),
        y = 2 * Math.random() - 0.5,
        z = 10 / (0.1 + Math.random());
    for (var i = 0; i < n; i++) {
      var w = (i / n - y) * z;
      a[i] += x * Math.exp(-w * w);
    }
  }

  var a = [], i;
  for (i = 0; i < n; ++i) a[i] = o + o * Math.random();
  for (i = 0; i < 5; ++i) bump(a);
  //console.log(a);
  //console.log(a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; }));
  return a.map(function(d, i) { return {x: i, y: Math.max(0, d)}; });
}

style.css

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

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

form {
  position: absolute;
  right: 20px;
  top: 70px;
}