jalapic/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <title>Arrows</title>
    <meta charset="utf-8" />

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

<style>

.dot circle {
  fill: none;
  stroke-width: 2px;
}

</style>

</head>


<body>

<script type="text/javascript">


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


d3.csv("myarrows.csv", dottype1, function(error, lines) {


  var data = [
    { id: 0, name: 'circle', path: 'M 0, 0  m -5, 0  a 5,5 0 1,0 10,0  a 5,5 0 1,0 -10,0', viewbox: '-6 -6 12 12'}
  , { id: 1, name: 'square', path: 'M 0,0 m -5,-5 L 5,-5 L 5,5 L -5,5 Z', viewbox: '-5 -5 10 10' }
  , { id: 2, name: 'arrow', path: 'M 0,0 m -5,-5 L 5,0 L -5,5 Z', viewbox: '-5 -5 10 10' }
  , { id: 3, name: 'stub', path: 'M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z', viewbox: '-1 -5 2 10' }
  , { id: 4, name: 'none', path: '', viewbox: '' }

    ]


var color = d3.scale.category10(5);


svg.append("g")
      .selectAll("line")
      .data(lines)
      .enter()
      .append("line")
      .attr("x1", function(d) { return d.x1; })
      .attr("y1", function(d) { return d.y1; })
      .attr("x2", function(d) { return d.x2; })
      .attr("y2", function(d) { return d.y2; })
      .attr("marker-end", function(d) { return 'url(#marker_' + d.name  + ')' })
      .style("stroke", function(d) {return d.color = color(d.name); })
      .style("stroke-width", 3)
      .style("stroke-linecap", "butt")
               ;


// end markers
svg.append("svg:defs")
      .selectAll("line")
      .data(data)
      .enter()
      .append("svg:marker")
      .attr('id', function(d){ return 'marker_' + d.name})
      .attr('viewBox', function(d){ return d.viewbox })
      .attr('refX', 0)
      .attr('markerWidth', 4)
      .attr('markerHeight', 4)
     .style("stroke", function(d) {return d.color = color(d.name); })
      .style("fill", function(d) {return d.color = color(d.name); })
       .attr('orient', 'auto')
      .append('svg:path')
      .attr('d', function(d){ return d.path })
                 ;


// dots as start markers instead
svg.append("g")
      .attr("class", "dot")
      .selectAll("dot")
      .data(lines)
      .enter()
      .append("circle")
      .attr("r", 4)
      .attr("cx", function(d) { return d.x1; })
      .attr("cy", function(d) { return d.y1; })
      .style("stroke", function(d) { return color(d.name); })
      .style("opacity", function(d) { return d.op; })
      ;

});


function dottype1(d) {
  d.x1 = +d.x1x1;
  d.y1 = +d.y1y1;
  d.x2 = +d.x2x2;
  d.y2 = +d.y2y2;
  d.startname = d.starttype;
  d.name = d.endtype;
  d.op = +d.op;
   return d;
}


//remove start markers
// opacity of circle based on presence/absence

  </script>

</body>
</html>

## myarrows.csv

          
            x1x1
            x2x2
            y1y1
            y2y2
            starttype
            endtype
            op

            
              10
              27
              53
              32
              circle
              circle
              1

            
              110
              141
              132
              123
              none
              arrow
              0

            
              200
              246
              422
              444
              circle
              square
              1

            
              400
              376
              311
              335
              circle
              stub
              1

            
              322
              300
              34
              16
              circle
              arrow
              1

            
              312
              345
              333
              453
              none
              stub
              0
	<!DOCTYPE html>
	<html>
	<head>
	<title>Arrows</title>
	<meta charset="utf-8" />

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

	<style>

	.dot circle {
	fill: none;
	stroke-width: 2px;
	}

	</style>

	</head>


	<body>

	<script type="text/javascript">


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


	d3.csv("myarrows.csv", dottype1, function(error, lines) {


	var data = [
	{ id: 0, name: 'circle', path: 'M 0, 0 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0', viewbox: '-6 -6 12 12'}
	, { id: 1, name: 'square', path: 'M 0,0 m -5,-5 L 5,-5 L 5,5 L -5,5 Z', viewbox: '-5 -5 10 10' }
	, { id: 2, name: 'arrow', path: 'M 0,0 m -5,-5 L 5,0 L -5,5 Z', viewbox: '-5 -5 10 10' }
	, { id: 3, name: 'stub', path: 'M 0,0 m -1,-5 L 1,-5 L 1,5 L -1,5 Z', viewbox: '-1 -5 2 10' }
	, { id: 4, name: 'none', path: '', viewbox: '' }

	]


	var color = d3.scale.category10(5);


	svg.append("g")
	.selectAll("line")
	.data(lines)
	.enter()
	.append("line")
	.attr("x1", function(d) { return d.x1; })
	.attr("y1", function(d) { return d.y1; })
	.attr("x2", function(d) { return d.x2; })
	.attr("y2", function(d) { return d.y2; })
	.attr("marker-end", function(d) { return 'url(#marker_' + d.name + ')' })
	.style("stroke", function(d) {return d.color = color(d.name); })
	.style("stroke-width", 3)
	.style("stroke-linecap", "butt")
	;



	// end markers
	svg.append("svg:defs")
	.selectAll("line")
	.data(data)
	.enter()
	.append("svg:marker")
	.attr('id', function(d){ return 'marker_' + d.name})
	.attr('viewBox', function(d){ return d.viewbox })
	.attr('refX', 0)
	.attr('markerWidth', 4)
	.attr('markerHeight', 4)
	.style("stroke", function(d) {return d.color = color(d.name); })
	.style("fill", function(d) {return d.color = color(d.name); })
	.attr('orient', 'auto')
	.append('svg:path')
	.attr('d', function(d){ return d.path })
	;


	// dots as start markers instead
	svg.append("g")
	.attr("class", "dot")
	.selectAll("dot")
	.data(lines)
	.enter()
	.append("circle")
	.attr("r", 4)
	.attr("cx", function(d) { return d.x1; })
	.attr("cy", function(d) { return d.y1; })
	.style("stroke", function(d) { return color(d.name); })
	.style("opacity", function(d) { return d.op; })
	;

	});




	function dottype1(d) {
	d.x1 = +d.x1x1;
	d.y1 = +d.y1y1;
	d.x2 = +d.x2x2;
	d.y2 = +d.y2y2;
	d.startname = d.starttype;
	d.name = d.endtype;
	d.op = +d.op;
	return d;
	}


	//remove start markers
	// opacity of circle based on presence/absence

	</script>

	</body>
	</html>
x1x1	x2x2	y1y1	y2y2	starttype	endtype	op
10	27	53	32	circle	circle	1
110	141	132	123	none	arrow	0
200	246	422	444	circle	square	1
400	376	311	335	circle	stub	1
322	300	34	16	circle	arrow	1
312	345	333	453	none	stub	0