milkbread/index.html

## index.html
<html>
<head>
	<title>Flow Graph Test</title>

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

</head>
<body>

	<script type="text/javascript">
	var margin = {top: 20, right: 120, bottom: 20, left: 120},
	    width = 1260 - margin.right - margin.left,
	    height = 800 - margin.top - margin.bottom;

	var jsonCircles = [
	 { "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green"},
	 { "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple"},
	 { "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red"}];
	var svg = d3.select("body").append("svg")
	                                    .attr("width", width)
	                                    .attr("height", height);
	var group = svg.append('g')
	svg.style("border","1px solid black");
	var circles = group.selectAll("circle")
	                          .data(jsonCircles)
	                          .enter()
	                          .append("circle");
	svg.append("defs").append("marker")
    .attr("id", "arrowhead")
    .attr("refX", 6 + 3) /*must be smarter way to calculate shift*/
    .attr("refY", 2)
    .attr("markerWidth", 6)
    .attr("markerHeight", 4)
    .attr("orient", "auto")
    .append("path")
        .attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
	var circleAttributes = circles
                       .attr("cx", function (d) { return d.x_axis; })
                       .attr("cy", function (d) { return d.y_axis; })
                       .attr("r", function(d){return d.radius;} )
                       .style("fill", function(d){return d.color;});

    var lineData = [ { "x": 10,   "y": 50},  { "x": 200,  "y": 200},
                 { "x": 400,  "y": 100}, { "x": 600,  "y": 400},
                 { "x": 800,  "y": 50},  { "x": 900, "y": 500}];

	//This is the accessor function we talked about above
	var lineFunction = d3.svg.line()
                         .x(function(d) { return d.x; })
                         .y(function(d) { return d.y; })
                         .interpolate("linear");
	var lineGraph = group.append("path")
                            .attr("d", lineFunction(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none")
                            .attr("marker-end", "url(#arrowhead)");
	</script>

</body>
</html>
	<html>
	<head>
	<title>Flow Graph Test</title>

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

	</head>
	<body>

	<script type="text/javascript">
	var margin = {top: 20, right: 120, bottom: 20, left: 120},
	width = 1260 - margin.right - margin.left,
	height = 800 - margin.top - margin.bottom;

	var jsonCircles = [
	{ "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green"},
	{ "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple"},
	{ "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red"}];
	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);
	var group = svg.append('g')
	svg.style("border","1px solid black");
	var circles = group.selectAll("circle")
	.data(jsonCircles)
	.enter()
	.append("circle");
	svg.append("defs").append("marker")
	.attr("id", "arrowhead")
	.attr("refX", 6 + 3) /must be smarter way to calculate shift/
	.attr("refY", 2)
	.attr("markerWidth", 6)
	.attr("markerHeight", 4)
	.attr("orient", "auto")
	.append("path")
	.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
	var circleAttributes = circles
	.attr("cx", function (d) { return d.x_axis; })
	.attr("cy", function (d) { return d.y_axis; })
	.attr("r", function(d){return d.radius;} )
	.style("fill", function(d){return d.color;});

	var lineData = [ { "x": 10, "y": 50}, { "x": 200, "y": 200},
	{ "x": 400, "y": 100}, { "x": 600, "y": 400},
	{ "x": 800, "y": 50}, { "x": 900, "y": 500}];

	//This is the accessor function we talked about above
	var lineFunction = d3.svg.line()
	.x(function(d) { return d.x; })
	.y(function(d) { return d.y; })
	.interpolate("linear");
	var lineGraph = group.append("path")
	.attr("d", lineFunction(lineData))
	.attr("stroke", "blue")
	.attr("stroke-width", 2)
	.attr("fill", "none")
	.attr("marker-end", "url(#arrowhead)");
	</script>

	</body>
	</html>