What I have at this point:

I need to draw this data in rectangles and draw to lines with html symbol

I can share code

To recreate the exact formatting of your example GIF, you'd likely need to mix in some CSS 🙂

There are also some fun examples on Observable of notebooks with annotations, like this one: https://observablehq.com/@hydrosquall/d3-annotation-with-d3-line-chart

... Since you'll be developing this outside of Observable, I am not sure how far I can help. I only really know the world inside Observable 🙂. For me to start making sense of this, I would begin by working through the components so that I could 'detach' the chart generation from the HTML div (which I guess is not something you wish to do). Still, for your own purposes of D3.js learning and exploration, you might find it fun to play and prototype using Observable, as it can really speed up your iteration!

With respect to the placement of the annotations, this is beyond my current skill set. So I hope someone out there joins in the discussion or that you otherwise are excited and figure it out (and please share back if you do!)

Please be aware that in the notebook I just shared, the SVG may not draw into the HTML each time. For me, it works some of the time 🙂

Also - this might be a good question to ask in the D3 community Slack: https://d3js.slack.com/ (updated) There may be more folks there and also that community will be more adept with D3 in particular ❤️

Thank you very much @aaronkyle