viewof featherplot = {
const svg = d3.select(DOM.svg(width, 400))
svg.append("svg:defs").append("svg:marker")
.attr("id", "triangle")
.attr("refX", 6)
.attr("refY", 6)
.attr("markerWidth", 30)
.attr("markerHeight", 30)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0 0 12 6 0 12 3 6")
.style("fill", "black");
svg.append("g")
.attr("stroke", "#000")
.attr("stroke-opacity", 0.2)
.selectAll("line")
.data(vectorData)
.enter().append("line")
.attr("x1", d => xScale(d[0]))
.attr("x2", d => xScale(d[0]+d[1]))
.attr("y1", d => yScale(0.5))
.attr("y2", d => yScale(0.5+d[2]/3))
.attr("marker-end","url(#triangle)")
return svg.node();
}