tristang · March 28, 2012 01:32 · biovisualize · Dec 30, 2012
diff --git a/importance-dummy.json b/importance-dummy.json
 {
  "rows" : [
    {
      "attribute" : "Some attribute",
      "id" : "id_0",
      "very_important" : 0.2,
      "important" : 0.2,
      "not_very_important" : 0.2,
      "not_at_all_important" : 0.2,
      "do_not_know" : 0.2
    },
    {
      "attribute" : "Some attribute",
      "id" : "id_1",
      "very_important" : 0.2,
      "important" : 0.2,
      "not_very_important" : 0.2,
      "not_at_all_important" : 0.2,
      "do_not_know" : 0.2
    },
    {
      "attribute" : "Some attribute",
      "id" : "id_2",
      "very_important" : 0.2,
      "important" : 0.2,
      "not_very_important" : 0.2,
      "not_at_all_important" : 0.2,
      "do_not_know" : 0.2
    }
  ]
 }
diff --git a/index.html b/index.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="en">
  <head>
    <title>Cruises</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <!-- JS -->
    <script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/lib/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>

    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript">
      $(document).ready(function () {
        main();
      });
    </script>
    <style type="text/css">
      .labels {
        fill: #BDBDBD;
        font-size: 77%;
      }
    </style>
  </head>
  <body>
    <div id="vis"></div>
  </body>
 </html>
diff --git a/main.js b/main.js
 function main() {

  var outerW = 500;
  var outerH = 200;
  var padding = { t: 0, r: 250, b: 0, l: 0 };
  var w = outerW - padding.l - padding.r; // inner width
  var h = outerH - padding.t - padding.b; // inner height
  var colours = ["#08519C", "#3182BD", "#6BAED6", "#BDD7E7", "#EFF3FF"]; // ColorBrewer Blues
  var data; // stacked data
  var vis, layers, bars, labels; // selections

  // scales
  var x0 = function (d) { return d.y0 * w; }; // lower bound
  var x1 = function (d) { return (d.y0 + d.y) * w; } // upper bound
  var y = function (d) { return d.x * h / 3; };

  d3.json("importance-dummy.json", function (json) {
    data = d3.layout.stack()(pivot(json.rows)); // compute baselines

    vis = d3.select("#vis")
        .append("svg:svg")
        .attr("width", outerW)
        .attr("height", outerH);

    layers = vis.selectAll("g.layer")
        .data(data, function (d) { return d[0].id; }) // key function
      .enter().append("svg:g")
        .attr("class", function (d) { return "layer," + d[0].id; })
        .style("fill", function (d, i) { return colours[i]; })
        .on("click", orderLayers);

    bars = layers.selectAll("rect")
        .data(function (d) { return d; }) // identity function
      .enter().append("svg:rect")
        .attr("x", x0)
        .attr("y", function (d) { return y(d); })
        .attr("width", function (d) { return x1(d) - x0(d); })
        .attr("height", y({ x: 0.8 }));

    labels = vis.append("svg:g")
        .attr("class", "labels")
      .selectAll("text")
        .data(json.rows)
      .enter().append("svg:text")
        .attr("x", w + 2)
        .attr("y", function (d, i) { return y({ x: i }) + y({ x: 0.6 }); })
        .text(function (d) { return d.attribute; });
  });

  function orderLayers(d, i) {

    // reorder
    for (var j = 0; j < i; j++) {
      data.push(data.shift());
    }
    data = d3.layout.stack()(data); // recompute baselines

    layers.data(data, function (d) { return d[0].id; }) // key function
        .on("click", orderLayers);

    bars.data(function (d) { return d; }) // identity function
        .transition()
        .attr("x", x0);
  }

  function pivot(rows) {
    var pivoted = [[], [], [], [], []];
    for (var i = 0; i < rows.length; i++) {
      pivoted[0].push({ id: "very_important", x: i, y: 0.05 });
      pivoted[1].push({ id: "important", x: i, y: 0.10 });
      pivoted[2].push({ id: "not_very_important", x: i, y: 0.15 });
      pivoted[3].push({ id: "not_at_all_important", x: i, y: 0.20 });
      pivoted[4].push({ id: "do_not_know", x: i, y: 0.50 });
    }
    return pivoted;
  }
 }
	{
	"rows" : [
	{
	"attribute" : "Some attribute",
	"id" : "id_0",
	"very_important" : 0.2,
	"important" : 0.2,
	"not_very_important" : 0.2,
	"not_at_all_important" : 0.2,
	"do_not_know" : 0.2
	},
	{
	"attribute" : "Some attribute",
	"id" : "id_1",
	"very_important" : 0.2,
	"important" : 0.2,
	"not_very_important" : 0.2,
	"not_at_all_important" : 0.2,
	"do_not_know" : 0.2
	},
	{
	"attribute" : "Some attribute",
	"id" : "id_2",
	"very_important" : 0.2,
	"important" : 0.2,
	"not_very_important" : 0.2,
	"not_at_all_important" : 0.2,
	"do_not_know" : 0.2
	}
	]
	}
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html lang="en">
	<head>
	<title>Cruises</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<!-- JS -->
	<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/lib/jquery/jquery.min.js"></script>
	<script type="text/javascript" src="https://raw.github.com/mbostock/d3/master/d3.v2.min.js"></script>

	<script type="text/javascript" src="main.js"></script>
	<script type="text/javascript">
	$(document).ready(function () {
	main();
	});
	</script>
	<style type="text/css">
	.labels {
	fill: #BDBDBD;
	font-size: 77%;
	}
	</style>
	</head>
	<body>
	<div id="vis"></div>
	</body>
	</html>
	function main() {

	var outerW = 500;
	var outerH = 200;
	var padding = { t: 0, r: 250, b: 0, l: 0 };
	var w = outerW - padding.l - padding.r; // inner width
	var h = outerH - padding.t - padding.b; // inner height
	var colours = ["#08519C", "#3182BD", "#6BAED6", "#BDD7E7", "#EFF3FF"]; // ColorBrewer Blues
	var data; // stacked data
	var vis, layers, bars, labels; // selections

	// scales
	var x0 = function (d) { return d.y0 * w; }; // lower bound
	var x1 = function (d) { return (d.y0 + d.y) * w; } // upper bound
	var y = function (d) { return d.x * h / 3; };

	d3.json("importance-dummy.json", function (json) {
	data = d3.layout.stack()(pivot(json.rows)); // compute baselines

	vis = d3.select("#vis")
	.append("svg:svg")
	.attr("width", outerW)
	.attr("height", outerH);

	layers = vis.selectAll("g.layer")
	.data(data, function (d) { return d[0].id; }) // key function
	.enter().append("svg:g")
	.attr("class", function (d) { return "layer," + d[0].id; })
	.style("fill", function (d, i) { return colours[i]; })
	.on("click", orderLayers);

	bars = layers.selectAll("rect")
	.data(function (d) { return d; }) // identity function
	.enter().append("svg:rect")
	.attr("x", x0)
	.attr("y", function (d) { return y(d); })
	.attr("width", function (d) { return x1(d) - x0(d); })
	.attr("height", y({ x: 0.8 }));

	labels = vis.append("svg:g")
	.attr("class", "labels")
	.selectAll("text")
	.data(json.rows)
	.enter().append("svg:text")
	.attr("x", w + 2)
	.attr("y", function (d, i) { return y({ x: i }) + y({ x: 0.6 }); })
	.text(function (d) { return d.attribute; });
	});

	function orderLayers(d, i) {

	// reorder
	for (var j = 0; j < i; j++) {
	data.push(data.shift());
	}
	data = d3.layout.stack()(data); // recompute baselines

	layers.data(data, function (d) { return d[0].id; }) // key function
	.on("click", orderLayers);

	bars.data(function (d) { return d; }) // identity function
	.transition()
	.attr("x", x0);
	}

	function pivot(rows) {
	var pivoted = [[], [], [], [], []];
	for (var i = 0; i < rows.length; i++) {
	pivoted[0].push({ id: "very_important", x: i, y: 0.05 });
	pivoted[1].push({ id: "important", x: i, y: 0.10 });
	pivoted[2].push({ id: "not_very_important", x: i, y: 0.15 });
	pivoted[3].push({ id: "not_at_all_important", x: i, y: 0.20 });
	pivoted[4].push({ id: "do_not_know", x: i, y: 0.50 });
	}
	return pivoted;
	}
	}