D3 Area Chart Highlighting the selected brush area

[Anirudh Soundararajan]

Hi All,

I am trying to implement an Area Chart in D3 similar to the one in this link.

With one minor modification to the context area, where I am trying to keep the brushed area of the context blue and rest of the area in context greyed out. Like the sample below.

Options I have tried:

1. Redraw the context area with a field in the dataset that determine the color , but this approach led me to add a <path> element for every data point , where i error-ed out with out of memory in my browser.

2. To plot another path element on top of the brush with a different fill, but running into issues where am not able to syn the overlap perfectly.

Any suggestions on how to do this would be helpful.

Thanks in advance