Black Lives Matter. Please consider donating to Black Girls Code today.

Recreating "Parallel Categories Linked Brushing" example in Dash

Hi, I’m very new to Dash and have been going through plotly graphing libraries and Dash user guide a lot to create,

  • a parallel categories plot,
  • and adding a capability to change line color “on_click” (clicking any item in plot).

There is an exact example in plotly tutorial (Parallel Categories Linked Brushing), BUT which is not written with exact Dash format, so that’s where I’m having trouble with.

First question
In the example, “def update_color” and “fig.data[1].on_click(update_color)” are only used to enable color change when clicking the bar. But in Dash, I should be including “@app.callback” appended by the “def update_color” function correct (as shown below)?

@app.callback(
Output(‘parallel_categories_plot_id’, ‘children’),
[Input(???)]
)
def update_color(trace, points, state):
# Update parcats colors
new_color = np.zeros(len(df_com), dtype=‘uint8’)
new_color[points.point_inds] = 1
figure.data[0].line.color = new_color

Second question
I saw lots of examples where “@app.callback” connects output from inputs with core components (e.g., dropdown, slider etc.), but have not found inputs with “on_click”. How should I be specifying component_id and _property in this case?

Third question
should I be adding this “fig.data[1].on_click(update_color)” anywhere in Dash coding format? or having callback and update_color function will automatically trigger the change in line color without “fig.data[1].on_click(update_color)” code?

I’d appreciate some advice, and any posts/webpages with relevant examples will also be appreciated.

Thanks!!

FYI, I have something like this for now.

app.layout = ddk.App(show_editor=True, children=[

ddk.Graph(

	id = 'graph1',
	
	figure=go.FigureWidget(
		data = [go.Parcats(
			dimensions=[
				datasource_com,
				region_com,
				state_com,
				climatezone_com,
				buildingtype_com,
				measurementtype_com,
				timeresolution_com,
			],
			line = {
				'color': color_click,
				'colorscale': colorscale_click,
				'shape': 'hspline',
				'cmin': 0,
				'cmax': 1,
			},
		)],
		
		layout= dict(
			title_font_size = 25,
			height=1000,
			width=1500,
		),			
	)
),

])

@app.callback(
Output(‘graph1’,‘children’),
[Input(???)]
)
def update_color(trace, points, state):
# Update parcats colors
new_color = np.zeros(len(df_com), dtype=‘uint8’)
new_color[points.point_inds] = 1
figure.data[0].line.color = new_color

if name == ‘main’:
app.run_server(debug=True)

Have you been able to resolve this issue?

no, ended up trying different thing.