Skip to content

Instantly share code, notes, and snippets.

@jalapic

jalapic/index.html

Created August 30, 2015 18:01
Show Gist options
  • Save jalapic/ef51a2623e26898db1df to your computer and use it in GitHub Desktop.
Save jalapic/ef51a2623e26898db1df to your computer and use it in GitHub Desktop.
Download ZIP
Arrows pt III ?
Raw
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>
Raw
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment