Scribd
Upload
554 views8 pages

Build A Dashboard Application With Plotly Dash

Uploaded by

danofavale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
554 views8 pages

Build A Dashboard Application With Plotly Dash

Uploaded by

danofavale
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
IBM Developer SKILLS NETWORK Build a Dashboard Application with Plotly Dash In this Ib, you will be building a Plotly Dash application for users to perform interactive visual analytics on SpaceX launch data in ceal-time This dashboard application contains input components such as a dropdown list and a range slider to interact witha pie chart and a scatter point chart. You wll be guided to build this dashboard application via the following tasks: ‘+ TASK 1: Add a Launch Site Drop-down Input Component ‘+ TASK 2: Add a callback function to render success-pie-chart based on selected site dropdown ‘+ TASK 3: Add a Range Slider to Select Payload ‘+ TASK 4: Add a callback function to render the success-payloae-scatter-chare scatter plot Note:Please take screenshots of the Dashboard and save them. Further upload your notebook to github. ‘The github url and the screenshots are later required in the presentation slides. Your completed dashboard application should laok like the following screenshot ‘SpaceX Launch Records Dashboard ‘ter visual analysis using the dashboard, you should be able to obtain some insights to answer the following ive questions: 4. Which site has the largest successful launches? 2. Which site has the highest launch success rate? 3. Which payload range(s) has the highest launch success rate? 4, Which payload ranges) has the lowest anch success rate? 5. Which F9 Booster version (v1.0, v1.1, F, 84,85, etc) has the highest launch success rate? Estimated time needed: 90 minutes Important Notice about this lab environment Please be aware that sessions for this lab environment are not persisted, When you launch the Cloud IDE, you are presented with a ‘dedicated computer onthe cloud exclusively for you, This'savalable to you a long as you are actively working onthe labs. Once you close your session ois timed out ave to inactivity, you are logged ff and this decicatec computer on the clouds deleted along with ay ils you may have created, downloaded o installed The wx tie you launch this ab a naw anviranmantseeatd for you. If ye fish ony part ofthe ab a atu ltr, you may have to start from the beginning So, itis a good idea to plan your ime accordingly and fnsh your labs ina single session, Setup development environment Install required Python packages ‘+ Open a new terminal. by clicking on the menu bar and selecting Terminal->New Terminal, as in the image below. es ee Oy Rema akon Perens aR an un Last Task ene) Restart Running Task SOOT ‘+ Now, you have script and terminal ready to start the lab. Ce ee nt me ee os Pes sea] ‘Install python packages required to run the application Copy and paste the below command to the terminal pips instal Download a skeleton dashboard application and dataset First, e's get the SpaceX Launch dataset for this lb command line in the terminal to download dataset as spa ‘+ Run the following we luget "https://cf-courses-data.s3.us.cloud-object-storage.appdonain.€1oud/TBR-OS@321EN- ‘SkilLsNethork/satasets/spacex_launeh dashes ‘+ Download a skeleton Dash app to be completed in this lab weet “htsps://cf-courses-data.s3.us.cLoud-obJect-storage.appdonain,<1oud/84-OS0322EN- ‘kilLsNetork/abs/nodule_3/=pacex d2sh_ 999-0" ‘+ Test the skeleton app by running the following command in the terminal pythons spacex_dash_app.py ‘+ Observe the port number (8050) shown in the terminal. Python eee eee {In the eft Navigation Pane click on others and click ‘option under itEnter the application port number a5 8050, Click oy sx y eee co Launch Your Application Con ee ee ee ee Coed Seo) Coe} penta entetl ‘= You should see a nearly blank web page indicating a successfully running dash app, Next let's fil he skeleton app with required input/output components and callback functions, I you need to refresh your memory about Plotly Dash components and callback functions, you may refer to the lab you have leamed before: Plotly Dash Lab TASK 1: Add a Launch Site Drop-down Input Component We have four di rent launch sites and we would lke to frst see which one has the largest success count, Then, we would lke to select one. specific site and check its detailed success rate (class=0 vs. class=1), As such, we will ned a dropdown menu to let us select different launch sites. ‘+ Find and complete a commented input with following attributes: © id attribute with value ° attribute is alist of di jon objects (with 1abe1 and value attributes). You can set the Label and valve all to be the launch site names in the and you need to include the default al2 option. eg coptions=[("label'; ‘AII Sites’, bel 1, ter), attribute with default dropdown value to be ALL meaning all sites are selected attribute to show a text description about this input area, such as ° attribute to be True so we can enter keywords to search launch sites Here is an example of dee. Drepaowa(ide"3d", opttons={ (label's “ALL sites', ‘value’: “ALL, (Uabel": sitet", ‘value': ‘sitet’, L placenolden-"place holder here”, searchable-rue » Ifyou need more help about bropdown(), refer to the Plotly Dash Reference section towards the end ofthis lab Your completed dropdown menu should look lke the following screenshot SpaceX Launch Records Dashboard TASK 2: Add a callback function to render success-pie- chart based on selected site dropdown ‘The general idea ofthis callback function isto get the selected launch site from site-dropdown and render a pie chart visualizing launch success counts. Dash callback function isa type of Python function which will be automatically called by Dash whenever receving an input component Updates, such a acck or dropdown selecting event Hf you need to refresh your memory about Potty Dash callback functions you may refer to the lab you have learned before: Pltly Dash Lab Let's add callback function in spacexdash_app.oy including the following application logic: ropdeun’ , conponent_property="value") ‘+ Input s set to be the size-dropdoun dropdown, Le, Inpue(conponent.id'site 1='suecess-ple-chart', conponent_property="Figure") ‘© Output to be the graph with id success-pie-chant, Le, Output component. ‘= Aaf-Eise statement to check if ALL sites were selected or just a specific launch site was selected © FALL sites are selected, we wil use all rows in the dataframe spacex_¢¢ to render andl retuin a pie chart graph to show the total success launches (ie, the total count of class column) © a specific launch site is selected, you need to filter the dataframe spaces a fist in order +0 include the only data forthe selected ste. Then, render and return a pie chart graph to show the success (class-1) count and failed (c1ass-6) count forthe selected site Here isan example of a callback function: 4 Function decorator to specify function input and output (app. calleack(output{component_id="success-pie-chart", conponert_propersy="Figure'), Tnput(conponent_ié="stte-dropdown, component def get_pie_chart(entered site) filtered df = spacex dr roperty="value')) ie chart names", titles'tite") return fig The rendered pie chart should look like the folowing screenshots: ‘+ Pie chart for all sites are selected ‘+ Pie char for is selected Iyou need more reference about dash callbacks and plotly pie charts, refer to the Plotiy Dash Reference section towards the end of tis lab. TASK 3: Add a Range Slider to Select Payload Next we want to find if variable payload is correlated to mission outcome, From a dashboard point of view, we want to be able to easily select different payload range and see if we can identily some visual patterns. Find and complete a commented acc.RangeS1ider(ide"payload-stier’,...) input th the following attribute: ‘+ teto be paylood-stiver ‘+ nin indicating the sider starting point, we set its value to be 0 (Ka) ‘+ ax indicating the slider ending point to, we set its value to be 10000 (Kg) ‘+ step indicating the slder interval on the slider, we set its value to be 1000 (Ks) ‘+ value indicating the current selected range, we could set it to be nin_payload and nax_payloaa ere is an example of Fangesiicer: ce. Rangestider (4de"Sa", rrin-B, max-1090@, step-1002, rarks=(@: "0", 108: “190"), values(nin_value, max value}) You completed payload range slider should be similar the following screenshot you need more reference about range sider, refer to the Plotly bash Reference towards the end ofthis lab TASK 4: Add a callback function to render the success- payload-scatter-chart scatter plot Next, we want to plot a scatter plot with the x axis to be the payload and the y axis to be the launch outcome (i.e, class column). As such, we can visually observe how payload may be correlated with mission outcomes for selected site(s). In addition, we want to color-label the Booster version on each scatter point so that we may observe mission outcomes with different boosters. Now let's add a call function including the following application logic: ‘+ Input to be (Input(conponent_ic~'site-dropdown’, component property="value"), Input(component_id-"payload-slider",

You might also like