D3.js - Parallel coordinates - Change color of axis on brush

I am trying to recreate Parallel Coordinates example.

Everytime an axis is brushed, I would like that particular axis to be highlighed by a change in color.

How do I do this?

Here is a screenshot of what I'm trying to implement:

I dont have a lot of experience with D3.js, so any help is appreciated.

Thanks in advance.

Here's one way to highlight the brushed dimensions in a parallel chart:

https://bl.ocks.org/shashank2104/92bed39893773d085794be54b73c233e/56b1c0df3fa1579c6a6f60ef9f660e99901af935

Code changes:

1. Added dimension name as ID to the <g> element:

   .enter().append("g")
   .attr("class", "dimension").attr('data-id', function (d) { return d;})
   

2. In the brushed function, based on the computed active dimensions, a selected class can be added. (this can also be done in the brushend cb)

   // highlight brushed axes
   dimensions.forEach(function(dimension) {
      svg.select('g[data-id="'+dimension+'"]').classed('selected', actives.indexOf(dimension) > -1);
   });
   

3. Based on the class applied in the previous step, use CSS to highlight the brush path (feel free to change this as per your requirements):

   /* selected brushing dimension */
   g.dimension.selected .axis path.domain {
      stroke: red;
      stroke-width: 2px;
   }
   

Let me know if you have any questions. Hope this helps.