{"version":"1.0","type":"rich","title":"Animating a line with an arrow in d3","description":"A line animates from source to target as a blue stroke draws itself, while a red arrowhead travels along the same path. The arrow rotates to match the line's direction using `transition.attrTween` and `translateAlong`, which queries the path's geometry with `getPointAtLength`. The line's progress is shown via a `stroke-dasharray` offset transition. The example uses d3.v4's SVG and animation APIs, with the arrow marker defined as a custom `svg:marker` as well as a separate path.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/f267e33265d14df1a104ace90d9efe6b?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}