PMeinshausen/CourseStructure.json

## README.mkd

      
    Raw
  

              README.mkd
            
          
    ###README for GOV 2001 Visualization
A space for draft visualizations of Gov 2001 course.
####Collapsible Indented Tree design
(Click on branches to collapse/unfold sub-branches)
This format requires hierarchical organization. It allows a collapsed view to convey more abstract structure. It also allows the branches to unfold for more detail.
This design can be developed further to allow for linked content and more attractive presentation of text/equations.
####Zoomable Treemap design
(See here for an example)
(Acknowledgment: Much of the code used here was written originally by Mike Bostocks and can be seen here http://bl.ocks.org/mbostock)

  
## CourseStructure.json
{
 "name": "Gov 2001: Advanced Quantitative Research Methodology",
 "children": [
  {
   "name": "Problem of Inference",
   "children": [
    {
     "name": "Probability",
     "children": [
      {"name": "P(y|M) = P(known|unknown)", "size": 10},
      {"name": "Goal of inverse probability: P(M|y) = P(unknown|known)", "size": 10},
      {"name": "Define: M = {M*, Θ}", "size": 10},
      {"name": "More limited goal: P(Θ|y, M*) ≡ P(Θ|y)", "size": 10}
     ]
    },
    {
     "name": "Interpretations of Inference",
     "children": [
      {
       "name": "Likelihood",
       "children": [
        {"name": "Θ is fixed and y is random", "size": 10},
        {"name": "k(y) ≡ P(Θ)/∫P(θ)P(y|θ)dθ", "size": 10}
        ]
      },
      {
       "name": "Bayesian",
       "children": [
        {"name": "http://projects.iq.harvard.edu/files/gov2001/files/inference_3.pdf", "size": 10}
        ]
      },
      {"name": "More Stuff", "size": 10},
      {"name": "Links", "size": 10},
      {"name": "Equations", "size": 10}
     ]
    }
   ]
 },
 {
   "name": "Sections",
     "children": [
      {"name": "Papers", "size": 10},
      {"name": "Videos", "size": 10}
      ]
 }
 ]
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="d3.v2.js"></script>
    <script src="http://d3js.org/d3.v2.js"></script>
    <style type="text/css">

    /*(_Acknowledgment: Much of the code used here was written originally by Mike Bostocks and can be seen here http://bl.ocks.org/mbostock_)*/

.node rect {
  cursor: pointer;
  fill: #fff;
  fill-opacity: .5;
  stroke: #3182bd;
  stroke-width: 1.5px;
}

.node text {
  font: 10px sans-serif;
  pointer-events: none;
}

path.link {
  fill: none;
  stroke: #9ecae1;
  stroke-width: 1.5px;
}

    </style>
</head>
<body>
    <div id="chart"></div>

<script type="text/javascript">

var w = 960,
    h = 800,
    i = 0,
    barHeight = 20,
    barWidth = w * .8,
    duration = 400,
    root;

var tree = d3.layout.tree()
    .size([h, 100]);

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

var vis = d3.select("#chart").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
  .append("svg:g")
    .attr("transform", "translate(20,30)");

d3.json("CourseStructure.json", function(json) {
  json.x0 = 0;
  json.y0 = 0;
  update(root = json);
});

function update(source) {

  // Compute the flattened node list. TODO use d3.layout.hierarchy.
  var nodes = tree.nodes(root);

  // Compute the "layout".
  nodes.forEach(function(n, i) {
    n.x = i * barHeight;
  });

  // Update the nodes…
  var node = vis.selectAll("g.node")
      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  var nodeEnter = node.enter().append("svg:g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
      .style("opacity", 1e-6);

  // Enter any new nodes at the parent's previous position.
  nodeEnter.append("svg:rect")
      .attr("y", -barHeight / 2)
      .attr("height", barHeight)
      .attr("width", barWidth)
      .style("fill", color)
      .on("click", click);

  nodeEnter.append("svg:text")
      .attr("dy", 3.5)
      .attr("dx", 5.5)
      .text(function(d) { return d.name; });

  // Transition nodes to their new position.
  nodeEnter.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
      .style("opacity", 1);

  node.transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
      .style("opacity", 1)
    .select("rect")
      .style("fill", color);

  // Transition exiting nodes to the parent's new position.
  node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
      .style("opacity", 1e-6)
      .remove();

  // Update the links…
  var link = vis.selectAll("path.link")
      .data(tree.links(nodes), function(d) { return d.target.id; });

  // Enter any new links at the parent's previous position.
  link.enter().insert("svg:path", "g")
      .attr("class", "link")
      .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
        return diagonal({source: o, target: o});
      })
    .transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition links to their new position.
  link.transition()
      .duration(duration)
      .attr("d", diagonal);

  // Transition exiting nodes to the parent's new position.
  link.exit().transition()
      .duration(duration)
      .attr("d", function(d) {
        var o = {x: source.x, y: source.y};
        return diagonal({source: o, target: o});
      })
      .remove();

  // Stash the old positions for transition.
  nodes.forEach(function(d) {
    d.x0 = d.x;
    d.y0 = d.y;
  });
}

// Toggle children on click.
function click(d) {
  if (d.children) {
    d._children = d.children;
    d.children = null;
  } else {
    d.children = d._children;
    d._children = null;
  }
  update(d);
}

function color(d) {
  return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
}

    </script>
  </body>
</html>
	{
	"name": "Gov 2001: Advanced Quantitative Research Methodology",
	"children": [
	{
	"name": "Problem of Inference",
	"children": [
	{
	"name": "Probability",
	"children": [
	{"name": "P(y\|M) = P(known\|unknown)", "size": 10},
	{"name": "Goal of inverse probability: P(M\|y) = P(unknown\|known)", "size": 10},
	{"name": "Define: M = {M*, Θ}", "size": 10},
	{"name": "More limited goal: P(Θ\|y, M*) ≡ P(Θ\|y)", "size": 10}
	]
	},
	{
	"name": "Interpretations of Inference",
	"children": [
	{
	"name": "Likelihood",
	"children": [
	{"name": "Θ is fixed and y is random", "size": 10},
	{"name": "k(y) ≡ P(Θ)/∫P(θ)P(y\|θ)dθ", "size": 10}
	]
	},
	{
	"name": "Bayesian",
	"children": [
	{"name": "http://projects.iq.harvard.edu/files/gov2001/files/inference_3.pdf", "size": 10}
	]
	},
	{"name": "More Stuff", "size": 10},
	{"name": "Links", "size": 10},
	{"name": "Equations", "size": 10}
	]
	}
	]
	},
	{
	"name": "Sections",
	"children": [
	{"name": "Papers", "size": 10},
	{"name": "Videos", "size": 10}
	]
	}
	]
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<script type="text/javascript" src="d3.v2.js"></script>
	<script src="http://d3js.org/d3.v2.js"></script>
	<style type="text/css">

	/(_Acknowledgment: Much of the code used here was written originally by Mike Bostocks and can be seen here http://bl.ocks.org/mbostock_)/

	.node rect {
	cursor: pointer;
	fill: #fff;
	fill-opacity: .5;
	stroke: #3182bd;
	stroke-width: 1.5px;
	}

	.node text {
	font: 10px sans-serif;
	pointer-events: none;
	}

	path.link {
	fill: none;
	stroke: #9ecae1;
	stroke-width: 1.5px;
	}

	</style>
	</head>
	<body>
	<div id="chart"></div>

	<script type="text/javascript">

	var w = 960,
	h = 800,
	i = 0,
	barHeight = 20,
	barWidth = w * .8,
	duration = 400,
	root;

	var tree = d3.layout.tree()
	.size([h, 100]);

	var diagonal = d3.svg.diagonal()
	.projection(function(d) { return [d.y, d.x]; });

	var vis = d3.select("#chart").append("svg:svg")
	.attr("width", w)
	.attr("height", h)
	.append("svg:g")
	.attr("transform", "translate(20,30)");

	d3.json("CourseStructure.json", function(json) {
	json.x0 = 0;
	json.y0 = 0;
	update(root = json);
	});

	function update(source) {

	// Compute the flattened node list. TODO use d3.layout.hierarchy.
	var nodes = tree.nodes(root);

	// Compute the "layout".
	nodes.forEach(function(n, i) {
	n.x = i * barHeight;
	});

	// Update the nodes…
	var node = vis.selectAll("g.node")
	.data(nodes, function(d) { return d.id \|\| (d.id = ++i); });

	var nodeEnter = node.enter().append("svg:g")
	.attr("class", "node")
	.attr("transform", function(d) { return "translate(" + source.y0 + "," + source.x0 + ")"; })
	.style("opacity", 1e-6);

	// Enter any new nodes at the parent's previous position.
	nodeEnter.append("svg:rect")
	.attr("y", -barHeight / 2)
	.attr("height", barHeight)
	.attr("width", barWidth)
	.style("fill", color)
	.on("click", click);

	nodeEnter.append("svg:text")
	.attr("dy", 3.5)
	.attr("dx", 5.5)
	.text(function(d) { return d.name; });

	// Transition nodes to their new position.
	nodeEnter.transition()
	.duration(duration)
	.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
	.style("opacity", 1);

	node.transition()
	.duration(duration)
	.attr("transform", function(d) { return "translate(" + d.y + "," + d.x + ")"; })
	.style("opacity", 1)
	.select("rect")
	.style("fill", color);

	// Transition exiting nodes to the parent's new position.
	node.exit().transition()
	.duration(duration)
	.attr("transform", function(d) { return "translate(" + source.y + "," + source.x + ")"; })
	.style("opacity", 1e-6)
	.remove();

	// Update the links…
	var link = vis.selectAll("path.link")
	.data(tree.links(nodes), function(d) { return d.target.id; });

	// Enter any new links at the parent's previous position.
	link.enter().insert("svg:path", "g")
	.attr("class", "link")
	.attr("d", function(d) {
	var o = {x: source.x0, y: source.y0};
	return diagonal({source: o, target: o});
	})
	.transition()
	.duration(duration)
	.attr("d", diagonal);

	// Transition links to their new position.
	link.transition()
	.duration(duration)
	.attr("d", diagonal);

	// Transition exiting nodes to the parent's new position.
	link.exit().transition()
	.duration(duration)
	.attr("d", function(d) {
	var o = {x: source.x, y: source.y};
	return diagonal({source: o, target: o});
	})
	.remove();

	// Stash the old positions for transition.
	nodes.forEach(function(d) {
	d.x0 = d.x;
	d.y0 = d.y;
	});
	}

	// Toggle children on click.
	function click(d) {
	if (d.children) {
	d._children = d.children;
	d.children = null;
	} else {
	d.children = d._children;
	d._children = null;
	}
	update(d);
	}

	function color(d) {
	return d._children ? "#3182bd" : d.children ? "#c6dbef" : "#fd8d3c";
	}

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