How to Return Data When Brushing the Axis of Parallel Coordinate Plot

[MengjiaoH]

Hello,

I've implemented a parallel coordinate plot and want to enhance it by updating another component based on the results of brushing. Specifically, when I brush over the plot, I’d like to retrieve the data associated with the highlighted lines and use that to update another component.

I noticed that only the onRestyle event is triggered during brushing, but it doesn’t provide the selected data.

Could anyone help me figure out how to achieve this functionality?

Thank you!

[Dyocius]

Pardon my ignorance, but what does brushing mean? I cannot find any references in the plotly documentation - https://plotly.com/javascript/reference/

Is it like hovering or selecting?

[MengjiaoH]

Hi, sorry for the confusion in my previous post.

In the parallel coordinate plot I’m working with, I can select a region on the axis, but I haven't been able to find a method to retrieve the selected data.

Currently, only the onRestyle event is triggered during selection, but this event doesn’t provide the selected data itself.

I’d like to retrieve the data associated with the lines in the selected region on axis and use that to update another component.

Thank you.

[Dyocius]

Hello, I am still not sure what it is you are trying to do.

From what I do understand of your question, you could consider listening to a different event like OnSelected or OnSelecting. There are many other events you can listen to other than onRestyle - https://github.com/plotly/react-plotly.js?tab=readme-ov-file#event-handler-props

If you are not actually selecting data, and you are only doing a change of the layout, only relayout is going to fire. If that is the case, you need to filter the data set in a useEffect yourself based on the axes data emitted from the on.

If the event you are listening to does not have the data you need, you can use Hooks on the layout object. Here is a ROUGH draft, to give you an idea. It will not run. If you post your own code, that would be easier.

const [layout, setLayout] = useState({});
const [data, setData] = useState ([])
const [ selectedX, setSelectedX] = useState(undefined);

const onRestyleHelper = ( ) => {
//  parse into selected X and set using setSelectedX
}

useEffect(() => {
// your logic that fires when selectedX changes, access data using layout
// do filtering then setData 
}, [selectedX])

return (
<Plot data={data} layout={layout} onRestyle={onRestyleHelper}/>
);

[MengjiaoH]

Hello,

Thanks for your response!

I’ve created a simple example to illustrate what I’m trying to do. In the parallel coordinate plot (see image below), I’ve selected a range on the "phi" axis, highlighted in pink. I would like to access the data associated with the selected range and use that information to update another plot.

Here’s the code I’m currently working with:

return (
  <Plot 
    data={[trace]} 
    layout={{
      autosize: true,
      width: 1000, 
      height: 500, 
      margin: {l: 50, r: 50, b: 20, t: 100, pad: 4},
      title: "Parallel Coordinate",  
      hovermode: 'closest'
    }} 
    onRestyle={(event) => {
      console.log("event", event[0]);
    }} 
    config={config} 
  />
);

I’ve noticed that only the onRestyle event is triggered when I select a range on the axis, and the event data is shown in the image below. However, I’m unable to find a way to get the actual data associated with the selected lines.

Is there a way to retrieve the data corresponding to the selected lines? Any help or suggestions would be greatly appreciated!