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>

</head>


<body>

<script type="text/javascript">


var svg = d3.select("body") // select the 'body' element
      .append("svg")           // append an SVG element to the body
      .attr("width", 600)
      .attr("height", 600);


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

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", "url(#triangle)") // add the marker
      .style("stroke", "brown")           // colour the line
      .style("stroke-width", 4)          // adjust line width
      .style("stroke-linecap", "square") // stroke-linecap type
               ;

svg.append("svg:defs")
      .append("svg:marker")
      .attr("id", "triangle")
      .attr('viewBox', '0 -5 10 10')
      .attr('refX', 6)
      .attr('markerWidth', 4)
      .attr('markerHeight', 4)
      .style("stroke", "brown")
       .style("fill", "brown")           // colour the line
      .attr('orient', 'auto')
      .append('svg:path')
        .attr('d', 'M0,-5L10,0L0,5')
                 ;
});


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


  </script>

</body>
</html>

## myarrows.csv

          
            x1x1
            x2x2
            y1y1
            y2y2

            
              10
              27
              53
              32

            
              110
              141
              132
              123

            
              200
              246
              422
              444

            
              400
              376
              311
              335

            
              322
              300
              34
              16
	<!DOCTYPE html>
	<html>
	<head>
	<title>Arrows</title>
	<meta charset="utf-8" />

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

	</head>


	<body>

	<script type="text/javascript">


	var svg = d3.select("body") // select the 'body' element
	.append("svg") // append an SVG element to the body
	.attr("width", 600)
	.attr("height", 600);


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

	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", "url(#triangle)") // add the marker
	.style("stroke", "brown") // colour the line
	.style("stroke-width", 4) // adjust line width
	.style("stroke-linecap", "square") // stroke-linecap type
	;

	svg.append("svg:defs")
	.append("svg:marker")
	.attr("id", "triangle")
	.attr('viewBox', '0 -5 10 10')
	.attr('refX', 6)
	.attr('markerWidth', 4)
	.attr('markerHeight', 4)
	.style("stroke", "brown")
	.style("fill", "brown") // colour the line
	.attr('orient', 'auto')
	.append('svg:path')
	.attr('d', 'M0,-5L10,0L0,5')
	;
	});




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



	</script>

	</body>
	</html>
x1x1	x2x2	y1y1	y2y2
10	27	53	32
110	141	132	123
200	246	422	444
400	376	311	335
322	300	34	16