Duy Nguyen

A selection of notebooks related to COVID-19 and SARS-CoV-2.

Observable

Coronavirus

Bite-sized Projects

It would be cool if you would color arrows based on the angle

"Reddish" if the arrow is up, default color if the arrow is down

David  B.

Thanks for the suggestion! I've actually thought about angle-based color change but haven't been able to implement it, as I couldn't find a way to dynamically change the fill property of the base and tip markers. I tried using context-stroke (filling the markers with the color of the line, a.k.a. the arrow body) but that didn't work with all browsers. 

One solution I'm thinking of is to abandon marker definitions altogether and draw a separate svg circle and triangle for each of the lines. Let me know if you have any other way to get around this!

Another alternative is duplicating marker definition code, giving it another ID (red-arrow,red-circle)

And conditionally switching ID property inside update function for marker-start and marker-end attributes

In that case, can we apply transitioning to the color update? We're technically switching between two elements instead of updating one property of the same element, so I guess d3.transition() may not work, right?

Switching between two different marker defs instead of changing the fill of one marker, that is