使用 plotly-dash 的火箭发射场仪表板

Question

I have attempted to make a dashboard to show rocket launch site data. A lot of the code that is used is skeleton and has not been done by me. I have filled in the gaps in places where I am told. However, the dashboard is still not created. The dashboard I have tried to make should have a pie chart and a scatter plot with a drop down menu with options to show all the sites together or the sites individually(See picture). However, my code is not showing any graphs and only axis. Please help me to understand what is going on. Code Below:

# Import required libraries
import pandas as pd
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output
import plotly.express as px

# Read the airline data into pandas dataframe
url="https://cf-courses-data.s3.us.cloud-object-storage.appdomain.cloud/IBM-DS0321EN-SkillsNetwork/datasets/spacex_launch_dash.csv"
spacex_df=pd.read_csv(url)
max_payload = spacex_df['Payload Mass (kg)'].max()
min_payload = spacex_df['Payload Mass (kg)'].min()

# Create a dash application
app = dash.Dash(__name__)

# Create an app layout
app.layout = html.Div(children=[html.H1('SpaceX Launch Records Dashboard',
                                        style={'textAlign': 'center', 'color': '#503D36',
                                               'font-size': 40}),
                                # TASK 1: Add a dropdown list to enable Launch Site selection
                                # The default select value is for ALL sites
                                # dcc.Dropdown(id='site-dropdown',...)
                                dcc.Dropdown(id='site-dropdown',
            options=[
                    {'label': 'All Sites', 'value': 'ALL'},
                    {'label': 'CCAFS LC-40', 'value': 'CCAFS LC-40'},
                    {'label': 'CCAFS SLC-40', 'value': 'CCAFS SLC-40'},
                    {'label': 'KSC LC-39A', 'value': 'KSC LC-39A'},
                    {'label': 'VAFB SLC-4E', 'value': 'VAFB SLC-4E'}
                ],
                value='ALL',
                placeholder="Select a Launch Site here",
                searchable=True
                            
                                ),
                
                                
                                html.Br(),

                                # TASK 2: Add a pie chart to show the total successful launches count for all sites
                                # If a specific launch site was selected, show the Success vs. Failed counts for the site
                                html.Div(dcc.Graph(id='success-pie-chart')),
                                html.Br(),

                                html.P("Payload range (Kg):"),
                                # TASK 3: Add a slider to select payload range
                                #dcc.RangeSlider(id='payload-slider',...)
                                
                                dcc.RangeSlider(id='id',
                min=0, max=10000, step=1000,
                marks={0: '0',
                       100: '100'},
                value=[min_payload, max_payload]),

                                # TASK 4: Add a scatter chart to show the correlation between payload and launch success
                                html.Div(dcc.Graph(id='success-payload-scatter-chart')),
                                ])

# TASK 2:
# Add a callback function for `site-dropdown` as input, `success-pie-chart` as output
@app.callback(Output(component_id='success-pie-chart', component_property='figure'),
              Input(component_id='site-dropdown', component_property='value'))
def get_pie_chart(entered_site):
    filtered_df = spacex_df
    if entered_site == 'ALL':
        fig = px.pie(spacex_df, values='class', 
        names='pie chart names', 
        title='title')
        return fig
    else:
        
       pie_fig=px.pie(spacex_df, values='class', names='pie chart names', title='successful flights')

    return[dcc.Graph(figure=pie_fig)]            

# TASK 4:
# Add a callback function for `site-dropdown` and `payload-slider` as inputs, `success-payload-scatter-chart` as output

@app.callback(Output(component_id='success-payload-scatter-chart', component_property='figure'),
              Input(component_id="payload-slider", component_property="value"))
def get_scatter_plot(entered_site):
    filtered_df = spacex_df
    if entered_site == 'ALL':
        fig = px.scatter(spacex_df['Payload Mass (kg)'], 
        title='correlation between payload and success for all sites',
        color="Booster Version Category")
        return fig
    else:
        
       late_fig = px.line(spacex_df, x='Payload Mass (kg)', y='Class', color='Booster Version Category', title='correlation between payload and success for all sites')
    return late_fig

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

Answer 1

Okay there are several problems in your code i'll try to go one by one, your first problem is the "names" in the piechart is not what you think it is. I'd suggest looking over the docs plotly.com/python/pie-charts

you should choose a column in your Dataframe spacex_df.keys()

Out[3]: Index(['Unnamed: 0', 'Flight Number', 'Launch Site', 'Mission Outcome', 'class', 'Payload Mass (kg)', 'Booster Version', 'Booster Version Category'], dtype='object')

second problem is you put your payload slider as "id" and then tried calling it, you should also use 2 inputs in your second callback if you want both inputs, also your graph has a problem you need to use "color" as a name of a column in your df