David Bautista
Published
Edited
Sep 2, 2019
md`# aprendiendo a hacer una bendita linea en d3`
d3 = require("d3")
{
// where should the arrow start and end?
const start = {x: 120, y: 50};
const end = {x: 10, y: 10};
// where should all of the line's control points be?
const middle_points = [
{x: start.x, y: (end.y + start.y) * 0.6},
{x: (start.x + end.x) * 0.4, y: end.y}
]
const point_locs = [
start,
...middle_points,
end
]
const svg = d3.select(DOM.svg(width,120));
svg.append("path")
.style("marker-end","url(#arrowhead)")
.style("fill", "none")
.style("stroke", "black")
.data([point_locs])
.attr("d", d3.line()
.curve(d3.curveBasis)
.y(d => Math.round(d.y))
.x(d => Math.round(d.x)));
svg.append("defs")
.append("marker")
.attr("id","arrowhead")
.attr("orient","auto-start-reverse")
.attr("viewBox","0 0 5.108 8.18")
.attr("markerHeight","8.18")
.attr("markerWidth","5.108")
.attr("orient","auto")
.attr("refY","4.09")
.attr("refX","5")
.append("polygon")
.attr("points","0.745,8.05 0.07,7.312 3.71,3.986 0.127,0.599 0.815,-0.129 5.179,3.999")
.attr("fill","black")
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
