danharr/index.html

## index.html
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
		<title>Media Plan</title>
				<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
		<style type="text/css">

		.sections {
float:left;
width:12%;
    border-style: solid;
    border-color: #ff0000 ;
    border-width: 1px;
    height:100px;

}
		</style>
	</head>
	<body>
	<h1 >Data Insight |  Project Status</h1>
	<p>Keep tabs on what projects the Data team are currently working on and what stage they're at.</p>

		<script type="text/javascript">


var sections = d3.range(40);

var grid = d3.select('body').selectAll("div").data(sections).enter().append("div").attr("class","sections").attr("id",function(d) {return 'section'+d;});


var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-200)
    .linkDistance(20)
    .size([150,100]);

var a = d3.selectAll('div').append("svg").attr("height","100%").attr("width","100%");

d3.json("raw.json", function(error, graph) {
  force
      .nodes(graph.nodes)
      .links(graph.links)
      .start();

  var link = a.selectAll(".link")
      .data(graph.links)
    .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return 2; });

  var node = a.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", function(d) {return d.size*4;})
      .style("stroke",function(d) { return "white"; })
      .style("stroke-width", function(d) {return 2;})
      .style("fill", function(d) { return "orange"; })
      .call(force.drag);

  node.append("title")
      .text(function(d) { return d.name; });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  });
});


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

## raw.json
{
"links":[
{
"source":0,
"target":1
},
{
"source":0,
"target":2
},
{
"source":0,
"target":3
}
],
"nodes":[
{
"name":"a",
"size":7,
"fill":"green"
},
{
"name":"b",
"size":1,
"fill":"green"
},
{
"name":"c",
"size":1.5,
"fill":"green"
}
,
{
"name":"d",
"size":2,
"fill":"green"
}

]
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
	<title>Media Plan</title>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
	<style type="text/css">

	.sections {
	float:left;
	width:12%;
	border-style: solid;
	border-color: #ff0000 ;
	border-width: 1px;
	height:100px;

	}
	</style>
	</head>
	<body>
	<h1 >Data Insight \| Project Status</h1>
	<p>Keep tabs on what projects the Data team are currently working on and what stage they're at.</p>

	<script type="text/javascript">


	var sections = d3.range(40);

	var grid = d3.select('body').selectAll("div").data(sections).enter().append("div").attr("class","sections").attr("id",function(d) {return 'section'+d;});



	var color = d3.scale.category20();

	var force = d3.layout.force()
	.charge(-200)
	.linkDistance(20)
	.size([150,100]);

	var a = d3.selectAll('div').append("svg").attr("height","100%").attr("width","100%");

	d3.json("raw.json", function(error, graph) {
	force
	.nodes(graph.nodes)
	.links(graph.links)
	.start();

	var link = a.selectAll(".link")
	.data(graph.links)
	.enter().append("line")
	.attr("class", "link")
	.style("stroke-width", function(d) { return 2; });

	var node = a.selectAll(".node")
	.data(graph.nodes)
	.enter().append("circle")
	.attr("class", "node")
	.attr("r", function(d) {return d.size*4;})
	.style("stroke",function(d) { return "white"; })
	.style("stroke-width", function(d) {return 2;})
	.style("fill", function(d) { return "orange"; })
	.call(force.drag);

	node.append("title")
	.text(function(d) { return d.name; });

	force.on("tick", function() {
	link.attr("x1", function(d) { return d.source.x; })
	.attr("y1", function(d) { return d.source.y; })
	.attr("x2", function(d) { return d.target.x; })
	.attr("y2", function(d) { return d.target.y; });

	node.attr("cx", function(d) { return d.x; })
	.attr("cy", function(d) { return d.y; });
	});
	});



	</script>
	</body>
	</html>
	{
	"links":[
	{
	"source":0,
	"target":1
	},
	{
	"source":0,
	"target":2
	},
	{
	"source":0,
	"target":3
	}
	],
	"nodes":[
	{
	"name":"a",
	"size":7,
	"fill":"green"
	},
	{
	"name":"b",
	"size":1,
	"fill":"green"
	},
	{
	"name":"c",
	"size":1.5,
	"fill":"green"
	}
	,
	{
	"name":"d",
	"size":2,
	"fill":"green"
	}

	]
	}