Question: how do we draw a vertical band at the maximum value of a single-stream streamgraph in d3js that respects the bounds of curve?
Imagine this is the original streamgraph:
The question is focused on how we create something like this:
Asked
Active
Viewed 117 times
1
blehman
- 1,870
- 7
- 28
- 39
-
https://beta.observablehq.com/@gerardofurtado/inspiring-confidence – Gerardo Furtado Nov 27 '18 at 07:00
-
@GerardoFurtado - thanks! I don't think your line observes the boundaries of the curve though, right? I'm thinking about using a clip path to avoid this problem. – blehman Dec 01 '18 at 00:00
-
1I'm not sure why you said that, it does respect the boundaries of the curve. Here is a zoom of it: https://imgur.com/a/U9ZcTtX. Of course, the line is adimensional for the width (I'm using 1px because that's the minimum possible). If you want a thicker line you won't have a line anymore, but a **path**, whose ends are curves. That's way more complicated. If you go for the clip path solution, which is simpler, you don't need to calculate the Y positions anymore, just start from `0` to `height` and the clip path does all the job. – Gerardo Furtado Dec 01 '18 at 03:14
-
1@GerardoFurtado - You're spot on with your comment here. Just trying to solve for any line thickness (ie. ends are curved to respect the boundaries of the streamgraph) – blehman Dec 01 '18 at 17:55
1 Answers
1
The following solution uses @GerardoFurtado's initial idea, but adds a clipPath to respect the bounds of the curve for any bandwidth:
blehman
- 1,870
- 7
- 28
- 39