Particles.js as background using Dash Plotly

Asked

Viewed 38 times

1

I’m using the library Dash plotly from Python to create a view of macroeconomic indicators, I would like to use as background the Particles.js because it creates an incredible effect, here is the Github explaining how to use it.

On Dash’s website explains how to include Javascript files to your Dashboard, however, even after doing the step-by-step did not succeed. Here’s what I did:

import webbrowser
import dash
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(children=[
    html.Div(
        html.Canvas(className='particles-js-canvas-el', 
                    style={'width':'100%', 'height':'100%'}
                   ),
        id='particles-js'),
    html.Script(src='particles.js'),
])

if __name__ == '__main__': 
    webbrowser.open('http://127.0.0.1:8050/');
    app.run_server(debug=False)

Using this code I get only a red background (which is correct as it is the background setting placed in the style.css), however, the particles do not appear. My portfolio is structured as:

-- front_end.ipynb

-- assets/

    |-- app.js

    |-- particles.json

    |-- style.css

Here’s the file code:

app js.; particles json. css style.

(These files can be found in the Github demo folder cited initially). When I right click on 'Inspect' it returns me the error

Uncaught Referenceerror: particlesJS is not defined

I hope you can help me :)

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.