danharr/index.html

## readme.md

      
    Raw
  

              readme.md
            
          
    Standard template for making a network diagram

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

.node {
  stroke: #fff;
  stroke-width: 1.5px;
}

.link {
  stroke: black;
  stroke-opacity: 0.5;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>

<script>

var width = 1160,
    height = 800;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-1000)
    .linkDistance(200)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

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

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

  var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", function(d) {return d.size*15;})
      .style("stroke",function(d) { return d.fill; })
      .style("stroke-width", function(d) {return d.size*5;})
      .style("fill", function(d) { return "black"; })
      .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>

## raw.json
{
"links":[
{
"source":0,
"target":1
},
{
"source":0,
"target":2
},
{
"source":0,
"target":3
},
{
"source":0,
"target":4
},
{
"source":5,
"target":6
},
{
"source":5,
"target":7
},
{
"source":5,
"target":8
},
{
"source":5,
"target":9
},
{
"source":10,
"target":11
},
{
"source":10,
"target":12
},
{
"source":10,
"target":13
},
{
"source":10,
"target":14
}
],
"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"
}
,
{
"name":"e",
"size":2.5,
"fill":"green"
}
,
{
"name":"f",
"size":5.5,
"fill":"blue"
}
,
{
"name":"g",
"size":1.5,
"fill":"blue"
}
,
{
"name":"h",
"size":1.5,
"fill":"blue"
},
{
"name":"i",
"size":1.25,
"fill":"blue"
},
{
"name":"j",
"size":2.5,
"fill":"blue"
}
,
{
"name":"k",
"size":5.5,
"fill":"orange"
}
,
{
"name":"l",
"size":1.5,
"fill":"orange"
}
,
{
"name":"m",
"size":1.5,
"fill":"orange"
},
{
"name":"n",
"size":1.25,
"fill":"orange"
},
{
"name":"o",
"size":2.5,
"fill":"orange"
}
]
}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.node {
	stroke: #fff;
	stroke-width: 1.5px;
	}

	.link {
	stroke: black;
	stroke-opacity: 0.5;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>

	var width = 1160,
	height = 800;

	var color = d3.scale.category20();

	var force = d3.layout.force()
	.charge(-1000)
	.linkDistance(200)
	.size([width, height]);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

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

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

	var node = svg.selectAll(".node")
	.data(graph.nodes)
	.enter().append("circle")
	.attr("class", "node")
	.attr("r", function(d) {return d.size*15;})
	.style("stroke",function(d) { return d.fill; })
	.style("stroke-width", function(d) {return d.size*5;})
	.style("fill", function(d) { return "black"; })
	.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>
	{
	"links":[
	{
	"source":0,
	"target":1
	},
	{
	"source":0,
	"target":2
	},
	{
	"source":0,
	"target":3
	},
	{
	"source":0,
	"target":4
	},
	{
	"source":5,
	"target":6
	},
	{
	"source":5,
	"target":7
	},
	{
	"source":5,
	"target":8
	},
	{
	"source":5,
	"target":9
	},
	{
	"source":10,
	"target":11
	},
	{
	"source":10,
	"target":12
	},
	{
	"source":10,
	"target":13
	},
	{
	"source":10,
	"target":14
	}
	],
	"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"
	}
	,
	{
	"name":"e",
	"size":2.5,
	"fill":"green"
	}
	,
	{
	"name":"f",
	"size":5.5,
	"fill":"blue"
	}
	,
	{
	"name":"g",
	"size":1.5,
	"fill":"blue"
	}
	,
	{
	"name":"h",
	"size":1.5,
	"fill":"blue"
	},
	{
	"name":"i",
	"size":1.25,
	"fill":"blue"
	},
	{
	"name":"j",
	"size":2.5,
	"fill":"blue"
	}
	,
	{
	"name":"k",
	"size":5.5,
	"fill":"orange"
	}
	,
	{
	"name":"l",
	"size":1.5,
	"fill":"orange"
	}
	,
	{
	"name":"m",
	"size":1.5,
	"fill":"orange"
	},
	{
	"name":"n",
	"size":1.25,
	"fill":"orange"
	},
	{
	"name":"o",
	"size":2.5,
	"fill":"orange"
	}
	]
	}