matt-bernhardt/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A framework for visualizing a network of combinations among a single list of nodes.

  
## combinations.js
var margin = {top: 20, right: 40, bottom: 30, left: 20},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    barWidth = Math.floor(width / 30) - 1;


var cell = {
  label: 225,
  width: 40,
  height: 40
}

// An SVG element with a bottom-right origin.
var chart = d3.select("#combinations").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.json("combinations.json", function(error, data) {

  if (error){
      alert("Error loading json file");
  }

  var nodes = chart.append("g")
    .attr("class","nodes")

  var nod = nodes.selectAll("g")
    .data(data.nodes)
    .enter()
    .append("g")
      .attr("class","node")
      .attr("transform", function(d,i) {
        return "translate(0," + cell.height * i + ")";
      })
    .append("text")
      .text(function(d) {
        return d.name;
      });

  var combos = chart.append("g")
    .attr("class","combinations");

  var combos = combos.selectAll("g")
    .data(data.combinations)
    .enter()
    .append("g")
      .attr("class","combo")
      .attr("transform", function(d,i) {
        var source = +d.source;
        var target = +d.target;
        console.log("Source: " + source);
        console.log("Target: " + target);
        console.log("Index: " + i);
        var col = cell.label + (Math.abs(source - target) * cell.width);
        var row = ((Math.abs(source-target)/2) + Math.min(source,target)) * cell.height;
        return "translate(" + col + "," + row + ")";
      })
    .append("text")
      .text(function(d) {
        return d.value;
      });

  console.log("Nodes");
  console.log(data.nodes);

  console.log("Joints");
  console.log(data.combinations);
});


## combinations.json
{
  "nodes":[
    {"name":"Architecture + Planning"},
    {"name":"Engineering"},
    {"name":"Humanities, Arts, and Social Sciences"},
    {"name":"Management"},
    {"name":"Science"}
  ],
  "combinations":[
    {"source":0,"target":1,"value":1},
    {"source":0,"target":2,"value":2},
    {"source":0,"target":3,"value":3},
    {"source":0,"target":4,"value":4},
    {"source":1,"target":2,"value":5},
    {"source":1,"target":3,"value":6},
    {"source":1,"target":4,"value":7},
    {"source":2,"target":3,"value":8},
    {"source":2,"target":4,"value":9},
    {"source":3,"target":4,"value":10}
  ]
}

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>Node Combinations | d3.js Force-Directed Graph</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  </head>
  <body>
	<div id="combinations"></div>
  <script src="combinations.js" charset="utf-8"></script>
  <style>
  svg {
    font: 10px sans-serif;
  }
  </style>
  </body>
</html>
	var margin = {top: 20, right: 40, bottom: 30, left: 20},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom,
	barWidth = Math.floor(width / 30) - 1;


	var cell = {
	label: 225,
	width: 40,
	height: 40
	}

	// An SVG element with a bottom-right origin.
	var chart = d3.select("#combinations").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.json("combinations.json", function(error, data) {

	if (error){
	alert("Error loading json file");
	}

	var nodes = chart.append("g")
	.attr("class","nodes")

	var nod = nodes.selectAll("g")
	.data(data.nodes)
	.enter()
	.append("g")
	.attr("class","node")
	.attr("transform", function(d,i) {
	return "translate(0," + cell.height * i + ")";
	})
	.append("text")
	.text(function(d) {
	return d.name;
	});

	var combos = chart.append("g")
	.attr("class","combinations");

	var combos = combos.selectAll("g")
	.data(data.combinations)
	.enter()
	.append("g")
	.attr("class","combo")
	.attr("transform", function(d,i) {
	var source = +d.source;
	var target = +d.target;
	console.log("Source: " + source);
	console.log("Target: " + target);
	console.log("Index: " + i);
	var col = cell.label + (Math.abs(source - target) * cell.width);
	var row = ((Math.abs(source-target)/2) + Math.min(source,target)) * cell.height;
	return "translate(" + col + "," + row + ")";
	})
	.append("text")
	.text(function(d) {
	return d.value;
	});

	console.log("Nodes");
	console.log(data.nodes);

	console.log("Joints");
	console.log(data.combinations);
	});
	{
	"nodes":[
	{"name":"Architecture + Planning"},
	{"name":"Engineering"},
	{"name":"Humanities, Arts, and Social Sciences"},
	{"name":"Management"},
	{"name":"Science"}
	],
	"combinations":[
	{"source":0,"target":1,"value":1},
	{"source":0,"target":2,"value":2},
	{"source":0,"target":3,"value":3},
	{"source":0,"target":4,"value":4},
	{"source":1,"target":2,"value":5},
	{"source":1,"target":3,"value":6},
	{"source":1,"target":4,"value":7},
	{"source":2,"target":3,"value":8},
	{"source":2,"target":4,"value":9},
	{"source":3,"target":4,"value":10}
	]
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="content-type" content="text/html;charset=utf-8">
	<title>Node Combinations \| d3.js Force-Directed Graph</title>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body>
	<div id="combinations"></div>
	<script src="combinations.js" charset="utf-8"></script>
	<style>
	svg {
	font: 10px sans-serif;
	}
	</style>
	</body>
	</html>