nwillems/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.link {
    fill: none;
    stroke-width: 1.5px;
}

.axis {
    stroke: #000;
    stroke-width: 1.5px;
}

.course {
    stroke: #ccc;
    stroke-width: 1px;
    font: 10px sans-serif;
}

</style>

<body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.hive.v0.min.js"></script>
<script>
var width = 960,
    height = 500,
    innerRadius = 10,
    outerRadius = 240;

var angle =
      d3.scale.ordinal().domain(d3.range(5)).rangePoints([0, 2 * Math.PI]),
    radius = d3.scale.linear().range([innerRadius, outerRadius]),
    color = d3.scale.category10().domain(d3.range(20));

function degrees(radians) {
    return radians / Math.PI * 180 - 90;
}

var courses = [
      {name: "IP", year: 0, block: 1} ,
      {name: "DiMS", year: 0.5, block: 1} ,
      {name: "OOPD", year: 0, block: 2} ,
      {name: "LinAlg", year: 0.5, block: 2} ,
      {name: "DBW", year: 0, block: 3} ,
      {name: "ProjDat", year: 0.5, block: 3} ,
      {name: "ProjDat", year: 0.5, block: 4} ,
      {name: "AD", year: 0, block: 4} ,
      {name: "HCI", year: 1, block: 1} ,
      {name: "Ark", year: 1.5, block: 1} ,
      {name: "DatVid", year: 1, block: 2} ,
      {name: "Oversættere", year: 1.5, block: 2} ,
      {name: "OSM", year: 1, block: 3} ,
      {name: "Datanet", year: 1, block: 4} ,
      {name: "BachelorProjekt", year: 2, block: 3} ,
      {name: "BachelorProjekt", year: 2, block: 4}
]

var links = [
    {source: courses[0], target: courses[2]},
    {source: courses[0], target: courses[3]},
    {source: courses[1], target: courses[2]},
    {source: courses[1], target: courses[3]},
    {source: courses[0], target: courses[2]}
]

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 +")");


var axis = svg.selectAll(".axis")
    .data(d3.range(4))
    .enter().append("line")
    .attr("class", "axis")
    .attr("transform", function(d) { return "rotate(" + degrees(angle(d)) +")"; })
    .attr("x1", radius.range()[0])
    .attr("x2", radius.range()[1]);

var links = svg.selectAll(".link")
    .data(links)
    .enter().append("path")
    .attr("class", "link")
    .attr("d", d3.hive.link()
                .angle(function(d) {
                    console.log("Hello from hive.link angle", d, "returning:",
                            angle(d.block) );
                    return angle(d.block);
                })
                .radius(function(d) {
                    console.log("Hello from hive.link angle", d, "returning:",
                            radius(1 - (d.year / 4)) );
                    return radius(1 - (d.year / 4));
                })
         )
    .style("stroke", function(d) { return color(d.source.year); });


var course_nodes = svg.selectAll(".course")
    .data(courses)
    .enter().append("g")
    .attr("transform", function(d) { console.log(d); return ""; })
    .attr("class", "node")
    .attr("transform", function(d) {
        return "rotate(" + degrees(angle(d.block)) + ")"
             + "translate(" + (radius(1 - (d.year / 4))) + ")";
    });
// translate(" + d.y + ")

course_nodes.append("circle")
    .attr("class", "course")
    .attr("transform", function(d) { return "rotate(" + degrees(angle(d.block)) +")"; })
//    .attr("cx", function(d) { return radius(1 - (d.year / 4)); })
    .attr("r", 5)
    .style("fill", function(d) { return color(d.year); });

course_nodes.append("text")
    .attr("dy", ".31em")
    .attr("text-anchor", function(d) { return "end"; })
    .attr("transform", function(d) {
        return "rotate(45)translate(-10)"; })
    .text(function(d) { return d.name; });


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

	.link {
	fill: none;
	stroke-width: 1.5px;
	}

	.axis {
	stroke: #000;
	stroke-width: 1.5px;
	}

	.course {
	stroke: #ccc;
	stroke-width: 1px;
	font: 10px sans-serif;
	}

	</style>

	<body>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.hive.v0.min.js"></script>
	<script>
	var width = 960,
	height = 500,
	innerRadius = 10,
	outerRadius = 240;

	var angle =
	d3.scale.ordinal().domain(d3.range(5)).rangePoints([0, 2 * Math.PI]),
	radius = d3.scale.linear().range([innerRadius, outerRadius]),
	color = d3.scale.category10().domain(d3.range(20));

	function degrees(radians) {
	return radians / Math.PI * 180 - 90;
	}

	var courses = [
	{name: "IP", year: 0, block: 1} ,
	{name: "DiMS", year: 0.5, block: 1} ,
	{name: "OOPD", year: 0, block: 2} ,
	{name: "LinAlg", year: 0.5, block: 2} ,
	{name: "DBW", year: 0, block: 3} ,
	{name: "ProjDat", year: 0.5, block: 3} ,
	{name: "ProjDat", year: 0.5, block: 4} ,
	{name: "AD", year: 0, block: 4} ,
	{name: "HCI", year: 1, block: 1} ,
	{name: "Ark", year: 1.5, block: 1} ,
	{name: "DatVid", year: 1, block: 2} ,
	{name: "Oversættere", year: 1.5, block: 2} ,
	{name: "OSM", year: 1, block: 3} ,
	{name: "Datanet", year: 1, block: 4} ,
	{name: "BachelorProjekt", year: 2, block: 3} ,
	{name: "BachelorProjekt", year: 2, block: 4}
	]

	var links = [
	{source: courses[0], target: courses[2]},
	{source: courses[0], target: courses[3]},
	{source: courses[1], target: courses[2]},
	{source: courses[1], target: courses[3]},
	{source: courses[0], target: courses[2]}
	]

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 +")");


	var axis = svg.selectAll(".axis")
	.data(d3.range(4))
	.enter().append("line")
	.attr("class", "axis")
	.attr("transform", function(d) { return "rotate(" + degrees(angle(d)) +")"; })
	.attr("x1", radius.range()[0])
	.attr("x2", radius.range()[1]);

	var links = svg.selectAll(".link")
	.data(links)
	.enter().append("path")
	.attr("class", "link")
	.attr("d", d3.hive.link()
	.angle(function(d) {
	console.log("Hello from hive.link angle", d, "returning:",
	angle(d.block) );
	return angle(d.block);
	})
	.radius(function(d) {
	console.log("Hello from hive.link angle", d, "returning:",
	radius(1 - (d.year / 4)) );
	return radius(1 - (d.year / 4));
	})
	)
	.style("stroke", function(d) { return color(d.source.year); });



	var course_nodes = svg.selectAll(".course")
	.data(courses)
	.enter().append("g")
	.attr("transform", function(d) { console.log(d); return ""; })
	.attr("class", "node")
	.attr("transform", function(d) {
	return "rotate(" + degrees(angle(d.block)) + ")"
	+ "translate(" + (radius(1 - (d.year / 4))) + ")";
	});
	// translate(" + d.y + ")

	course_nodes.append("circle")
	.attr("class", "course")
	.attr("transform", function(d) { return "rotate(" + degrees(angle(d.block)) +")"; })
	// .attr("cx", function(d) { return radius(1 - (d.year / 4)); })
	.attr("r", 5)
	.style("fill", function(d) { return color(d.year); });

	course_nodes.append("text")
	.attr("dy", ".31em")
	.attr("text-anchor", function(d) { return "end"; })
	.attr("transform", function(d) {
	return "rotate(45)translate(-10)"; })
	.text(function(d) { return d.name; });


	</script>