Relationship Highlight

Challenge

Visualize relationship between two entities(words) clearily showing object and subject with additional annotation on the entities in a paragraph.
It should be responsive and should not disrupt when container width is changed.

This work was second highlight of the year for me, I had a lot of fun.
Initially I thought of using canvas but quickly dismissed the idea for following reason.
- Seemed like overkill for such simple colored boxes and one line.
- Canvas could introduce a lot of challenges for responsiveness and general accessiblity.
I used split the paragraph method I used in Annotation and render different component for highlighted words.
Challenging part was relationship line, for which I simple choose to draw straight line till top of div containing the paragraph and then connecting the two. It worked great and no issue in responsiveness.