Word Cloud in dash with navigation feature for each word( Without Overlapping/trimming of words)

Hi All,

Im trying to create an app with word cloud which can have navigation capability so that when the user clicks on any word, it has to pass the word to an API call which will open modal.

Please let me know if anyone has tried it before.

Any suggestions are welcome.

Im using the below code currently.

‘’'python

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc
import plotly
import random
import plotly.graph_objs as go
import plotly as py

words = [‘owpscommunication’, ‘focuspeer’, ‘mechanical’, ‘trustaction’, ‘skillspriority’, ‘relationshipsintegrity’, ‘settingtime’, ‘orientedlistening’, ‘skillsclient’, ‘conditions.click’, ‘actualize’, ‘spells’, ‘leap’, ‘rebounds’, “pet’s”, “veterinarian’s”, ‘efforts’, ‘cooperativeness’, ‘frustrations’, ‘collars’, ‘distracting’, ‘confusion’, ‘confided’, ‘birds’, ‘remembering’, ‘radioactive’, ‘bite’, ‘frustration’, ‘mutuality’, ‘scholarly’, ‘discharges’, ‘pros360’, ‘worldwide.there’, ‘regions.read’, ‘nexrev’, ‘h300’, ‘y27gq’, ‘y540’, ‘coldfront’, ‘k500’, ‘growth.reasons’, ‘executions’, ‘1,749.99’, ‘systems.analysis’, ‘1,979.99’, ‘y740’, ‘csoc’, ‘y44w’, ‘worklogix’, ‘sk650’]
frequency = [85.7466873733285, 85.29216801545708, 77.76304488205756, 59.768249789015876, 59.755852591260954, 59.32680801330034, 57.62421683540644, 57.6045844646696, 55.15068566675171, 45.26850982707661, 36.42114505221151, 34.66260279916637, 33.918910149963864, 33.634494953729195, 33.01406497066167, 32.967363654863654, 32.35344354342803, 31.247723301322058, 31.05303051792787, 30.642778070367534, 30.092873060120628, 29.48373152161267, 29.05368512074221, 28.31258228523543, 26.915786786673976, 26.62127703760281, 26.21020267581641, 25.49176784484213, 25.02955712995993, 23.97713118867033, 21.082938582329387, 19.1752781077787, 18.374352801610392, 18.18986670527146, 16.776525180767486, 15.778312852740182, 15.532949636668125, 14.199409181407182, 13.590158009832601, 12.321780106551792, 12.07909785562719, 11.951183561069397, 11.410814013305226, 11.359514901407676, 11.09496402619152, 10.139371169408042, 10.079019209771966, 9.881192176782958]
lower, upper = 7,21
frequency = [((x - min(frequency)) / (max(frequency) - min(frequency))) * (upper - lower) + lower for x in frequency]
lenth = len(words)
colors = [py.colors.DEFAULT_PLOTLY_COLORS[random.randrange(1, 10)] for i in range(lenth)]

app = dash.Dash(name)
x=[]
for i in range(lenth):
x.append(i+5)
y=[]
for i in range(lenth):
y.append(i+20)

chart1=dcc.Graph(id=‘bar_plot’, figure={‘data’:[go.Scatter(x=x,y=random.choices(range(lenth), k=lenth), text=words,
mode=‘text’,
marker={‘opacity’: 0.3},
hovertext=[’{0},{1}’.format(w, f) for w, f in zip(words, frequency)],
hoverinfo=‘text’,
textfont={‘size’: frequency, ‘color’: colors},
name=‘X’)],
‘layout’: go.Layout(
xaxis={‘showgrid’: False, ‘showticklabels’: False, ‘zeroline’: False,‘automargin’:False},
yaxis={‘showgrid’: False, ‘showticklabels’: False, ‘zeroline’: False,‘automargin’:False},
hovermode=‘closest’,
height=600,
width=600

                                )
                      },style={'height':'400px'}
         ) 

content = html.Div([dbc.Row([dbc.Col(chart1,width=6,style={‘padding-left’:‘10px’,‘padding-right’:‘10px’})])

])

app.layout = html.Div(
[content]
)

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

‘’’

@kzap1j

can you reformat your code by following this 📣 How to provide your sample code in right format? thanks