Creating a Bubble Chart with Dash

Dash Python
1

I’m very new to Plotly, Dash, and Python in general, and I’m trying to create a Bubble Chart with Dash. I’ve found references on how to create Bubble Charts with Plotly not Dash. I’m looking for a template or references that could help with this task. Again, I am a true beginner, so I apologize if this is actually very simple. Thanks!

2

By the way, bubble charts are basically scatter plots with the markers’ sizes dependent on specified weights.

3

Hey @rschutte

Creating bubble charts in Dash and plotly.py are one and the same. That is, Dash uses the plotly.py graphing library. Thus, you can follow the examples from here https://plot.ly/python/bubble-charts/. Here is one to get you started:

import dash
from dash.dependencies import Input, Output
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(__name__)

size = [20, 40, 60, 80, 100, 80, 60, 40, 20, 40]

app.layout = html.Div([
    dcc.Graph(
        id='scatter',
        figure={
            'data': [{
                'x':[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
                'y':[11, 12, 10, 11, 12, 11, 12, 13, 12, 11],
                'mode':'markers',
                'marker':{
                    'size':size,
                    'sizemode':'area',
                    'sizeref':2.*max(size)/(40.**2),
                    'sizemin':4
                }
            }]
        })
])

if __name__ == '__main__':
    app.run_server(debug=True)

If you’re not sure what attribute does what :confused: then check out the full reference, which can be found here https://plot.ly/python/reference/

Hope this helps get you started!

4

Thank you, @bcd ! That was very helpful. If you don’t mind me asking, do you have any advice on how to edit what the hovermode displays when you hover over each marker? Right now it shows the x and y coordinates, but I would also like it to show a third attribute. I’m working with stocks data where the x coordinate is the market cap and a the y coordinate is the return for individual stocks in a portfolio. I would also like the hover to display the associated stock ticker symbol along with the coordinates. I am trying to use hoverData but haven’t had any luck. I would greatly appreciate any resources you might have!