nvcleemp · August 29, 2015 14:07
diff --git a/index.html b/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;
 }

 .x.axis path {
  display: none;
 }

 .legend line {
  stroke: #000;
  shape-rendering: crispEdges;
 }

 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script>

 function fromTo(d) {
    var i;
    var ft = [];
    for(i = 0; i < data.length - 1; i++){
        var datum = {from: d[i].group, to: d[i+1].group};
        var compFrom = {};
        d[i].composition.forEach(function (o) {compFrom[o.name] = {y0: o.y0, y1: o.y1};});
        var compTo = {};
        d[i+1].composition.forEach(function (o) {compTo[o.name] = {y0: o.y0, y1: o.y1};});
        datum.composition = color.domain().map(function(name){return {name: name, from: d[i].group, to: d[i+1].group, from0:  compFrom[name].y0, from1: compFrom[name].y1, to0: compTo[name].y0, to1: compTo[name].y1}});
        ft.push(datum);
    }
    return ft;
 }

 var margin = {top: 20, right: 150, bottom: 30, left: 90},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

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

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

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

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

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

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

 data = [{group : "G1", class1: 1, class2: 1, class3: 0, class4: 0},
        {group : "G2", class1: 2, class2: 1, class3: 0, class4: 0},
        {group : "G3", class1: 2, class2: 2, class3: 2, class4: 1},
        {group : "G4", class1: 3, class2: 17, class3: 43, class4: 2}]

 color.domain(d3.keys(data[0]).filter(function(key) { return key !== "group"; }));

 data.forEach(function(d) {
 	var y0 = 0;
 	d.composition = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
 	d.composition.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
 });

 data.sort(function(a, b) { return b.composition[0].y1 - a.composition[0].y1; });

 connections = fromTo(data);

 x.domain(data.map(function(d) { return d.group; }));

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

 svg.append("g")
 	.attr("class", "y axis")
 	.call(yAxis);


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

 group.selectAll("rect")
      .data(function(d) { return d.composition; })
    .enter().append("rect")
      .attr("x", x.rangeBand()/4)
      .attr("width", x.rangeBand()/2)
      .attr("y", function(d) { return y(d.y1); })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .style("fill", function(d) { return color(d.name); });

 var connectingLines = svg.selectAll(".conn").data(connections)
       .enter().append("g")
          .attr("class", "conn");

 var c = connectingLines.selectAll("line")
       .data(function(d) { return d.composition; })
     .enter();

    c.append("line")
        .style("stroke", "rgb(0,0,0)")
        .style("stroke-width", "1")
        .attr("x1", function(d) { return x(d.from) + 3*x.rangeBand()/4;})
        .attr("y1", function(d) { return y(d.from0);})
        .attr("x2", function(d) { return x(d.to) + x.rangeBand()/4;})
        .attr("y2", function(d) { return y(d.to0);});
    c.append("line")
        .style("stroke", "rgb(0,0,0)")
        .style("stroke-width", "1")
        .attr("x1", function(d) { return x(d.from) + 3*x.rangeBand()/4;})
        .attr("y1", function(d) { return y(d.from1);})
        .attr("x2", function(d) { return x(d.to) + x.rangeBand()/4;})
        .attr("y2", function(d) { return y(d.to1);});

 var legend = svg.select(".gr:last-child").selectAll(".legend")
      .data(function(d) { return d.composition; })
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d) { return "translate(" + x.rangeBand()/2 + "," + y((d.y0 + d.y1) / 2) + ")"; });

 legend.append("line")
      .attr("x2", 60);

 legend.append("text")
      .attr("x", 63)
      .attr("dy", ".35em")
      .text(function(d) { return d.name; });

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

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

	.x.axis path {
	display: none;
	}

	.legend line {
	stroke: #000;
	shape-rendering: crispEdges;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	function fromTo(d) {
	var i;
	var ft = [];
	for(i = 0; i < data.length - 1; i++){
	var datum = {from: d[i].group, to: d[i+1].group};
	var compFrom = {};
	d[i].composition.forEach(function (o) {compFrom[o.name] = {y0: o.y0, y1: o.y1};});
	var compTo = {};
	d[i+1].composition.forEach(function (o) {compTo[o.name] = {y0: o.y0, y1: o.y1};});
	datum.composition = color.domain().map(function(name){return {name: name, from: d[i].group, to: d[i+1].group, from0: compFrom[name].y0, from1: compFrom[name].y1, to0: compTo[name].y0, to1: compTo[name].y1}});
	ft.push(datum);
	}
	return ft;
	}

	var margin = {top: 20, right: 150, bottom: 30, left: 90},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

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

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

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

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

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

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

	data = [{group : "G1", class1: 1, class2: 1, class3: 0, class4: 0},
	{group : "G2", class1: 2, class2: 1, class3: 0, class4: 0},
	{group : "G3", class1: 2, class2: 2, class3: 2, class4: 1},
	{group : "G4", class1: 3, class2: 17, class3: 43, class4: 2}]

	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "group"; }));

	data.forEach(function(d) {
	var y0 = 0;
	d.composition = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
	d.composition.forEach(function(d) { d.y0 /= y0; d.y1 /= y0; });
	});

	data.sort(function(a, b) { return b.composition[0].y1 - a.composition[0].y1; });

	connections = fromTo(data);

	x.domain(data.map(function(d) { return d.group; }));

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

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis);


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

	group.selectAll("rect")
	.data(function(d) { return d.composition; })
	.enter().append("rect")
	.attr("x", x.rangeBand()/4)
	.attr("width", x.rangeBand()/2)
	.attr("y", function(d) { return y(d.y1); })
	.attr("height", function(d) { return y(d.y0) - y(d.y1); })
	.style("fill", function(d) { return color(d.name); });

	var connectingLines = svg.selectAll(".conn").data(connections)
	.enter().append("g")
	.attr("class", "conn");

	var c = connectingLines.selectAll("line")
	.data(function(d) { return d.composition; })
	.enter();

	c.append("line")
	.style("stroke", "rgb(0,0,0)")
	.style("stroke-width", "1")
	.attr("x1", function(d) { return x(d.from) + 3*x.rangeBand()/4;})
	.attr("y1", function(d) { return y(d.from0);})
	.attr("x2", function(d) { return x(d.to) + x.rangeBand()/4;})
	.attr("y2", function(d) { return y(d.to0);});
	c.append("line")
	.style("stroke", "rgb(0,0,0)")
	.style("stroke-width", "1")
	.attr("x1", function(d) { return x(d.from) + 3*x.rangeBand()/4;})
	.attr("y1", function(d) { return y(d.from1);})
	.attr("x2", function(d) { return x(d.to) + x.rangeBand()/4;})
	.attr("y2", function(d) { return y(d.to1);});

	var legend = svg.select(".gr:last-child").selectAll(".legend")
	.data(function(d) { return d.composition; })
	.enter().append("g")
	.attr("class", "legend")
	.attr("transform", function(d) { return "translate(" + x.rangeBand()/2 + "," + y((d.y0 + d.y1) / 2) + ")"; });

	legend.append("line")
	.attr("x2", 60);

	legend.append("text")
	.attr("x", 63)
	.attr("dy", ".35em")
	.text(function(d) { return d.name; });

	</script>
	</body>
	</html>