I’m trying to find a way to plot parallel colours during sections of a line graph. It’s a very basic line graph with <30 x values and as lines travel between say 0,0 and 1,1 multiple lines traverse the same path. I’d like to have them both visible during that traversal section.
Here’s a hand-drawn paint diagram example:
I have the data arranged in multiple optional layouts to try and get at this.
One is the straightforward:
Column 1
Column 2
Red
Green
0
0
1
1
2
0
1
1
2
2
1
3
Another idea that I thought could be helpful from a rendering point of view is:
Column 1
Column 2
Column 3
Red
Green
Red/Green
0
1
1
1
2
0
1
1
1
2
2
2
1
3
If needed I can adjust it further.
This way I could draw Red, Green, and then Red/Green as three different line series if I could only figure out how to render the Red/Green stroke as two stacked pixels of red and green respectively.
Maybe I’m needing to dig deeper into the library of Line and possibly its constraints are not able to accommodate this and need to start defining lower-level objects, but I’m curious if there’s just a basic setting that can accommodate this.
For bonus points, if the line is 1 colour it can be 4px wide, if its two colours then 6px wide (3px each), if it’s >2 colours then 2px per colour.
If by “plot” you mean Observable Plot, then I’d encourage you to look for a different solution since Plot’s constraints will likely only make it more difficult to achieve your goal.
I would instead reach for one of the libraries that have been created specifically to render tube maps, e.g.
No, I am not specifically talking about any given toolset. Plot was a verb here, not a tool. I’m also not attempting to map a metro line, but rather an over/under 0.500 sports team chart, like this:
That’s an interesting library but it feels designed much more for a static dataset defined in javascript. I suppose I could write javascript transformations for my google sheet of dynamic/changing data. Eventually I’ll move away from the google sheet. Overall, to make the tube map work for my needs I’d need to define every numeric state as stations, then computationally set offset for lines to shove them off to one side or the other.
The point being that all I really need to solve is the two parallel/simultaneous segments having two separate side-by-side colours. I suppose I could dig into that library and see how they’ve implemented offsets and maybe reuse that bit of javascript.
I’m new to Plot, D3, and Observable, so I could just be missing something obvious, but by the sounds of your response I assume an external library could be the direction. I appreciate the suggestion, and hadn’t realized there were community libraries I could hunt through.
You can do pretty much anything with D3 since it’s a fairly low-level library. The flip side is that working with it is more involved, which is where Plot comes in (which uses D3 extensively under the hood).
For your example using D3 directly might be more appropriate. Although you could still render the line chart via custom Plot mark (i.e., generating the SVG yourself), imo you’re more likely to get off the ground running by referring to existing D3 examples and picking out the parts of their code that are relevant to your use case.
I’d recommend to start by drawing a single line segment with varying numbers of lanes so that you get a feel for the ratios and spacing that you want to enforce.
Mostly out of curiosity I’ve prototyped a Plot chart with a different visual style in this notebook:
