1

I recently uploaded a jupyter notebook to github that contains some plotly graphs, however, although you can see the code, you can't see the graphs.

Here is the code of one of the graphs in the notebook:

#Pie chart that shows the percentage of top 50 (according to pp90min) per team
top_50_players_injured_pp90min = draft_selection_stats_injured.sort_values('points_per_90_minutes_played', ascending=False).head(50)
team_prop_pp90min_injured = top_50_players_injured_pp90min.groupby('team').count().reset_index()
fig = px.pie(team_prop_pp90min_injured, values='player', names='team', title='Top 50 Injured/Rotating/Transferred Players (pp90min) Per Team')
fig.show()

What should I do to display the graph in the notebook? I was thinking of uploading the notebook as an html file, but it didn't work either because the file was too large.

Thanks for helping out!

grungrun
  • 13
  • 5
  • if you upload the file.ipynb to github, the graphs that are already in the notebook should be visible as well – blackraven Aug 09 '22 at 19:31
  • As you can see from my answer, you should use [nbviewer](https://nbviewer.org/) to view your GitHub-hosted notebooks with Plotly plots embedded. If you had included in your post a link to your notebook at GitHub, I could provide for you the variation on the URL pointing nbviewer at it. (And also verify what you uploaded will work.) If you look at some examples you see you essentially swap the `github.com` portion of the GitHub URL with `nbviewer.org/github`. – Wayne Aug 09 '22 at 20:03

1 Answers1

1

You are mistaken thinking they'll work at GitHub. As I've written about in the past, for example here, the view at GitHub is nothing more than a preview meant for developers. It doesn't support a lot of features of notebooks, such as interactive Plotly plots, and has faulty rendering in a number of ways. Up until a few years ago, GitHub didn't even try rendering the notebook if it had more than a few cells of code. That was better in the long run because Jupyter users realized more quickly they needed to point nbviewer at the GitHub page to see the notebook reliably.

nbviewer is the Jupyter community-provided solution for viewing and sharing notbebooks 'static' form. A lot of javascript-based features, like Plotly plots, work in nbviewer's renderings. Plus, the nbviewer renderings aren't embedded inside a GitHub page and thus with less cruft surrounding them are more inviting for those who aren't developers and better for sharing.

Compare nbviewer vs GitHub rendering of some Plotly Examples

The first paragraph here has links illustrating the same notebook with Plotly graphs viewed in nbviewer rendering in contrast with the GitHub preview. Scroll down to see many plots rendered via nbviewer that don't show in the GitHub Quick-preview.
nbviewer is capable of rendering Jupyter notebook json hosted at other places. (If you look at the URL for each of the examples in this section, you'll see you can easily construct the nbviewer URL by substituting the github.com portion of the GitHub URL with nbviewer.org/github.)

Wayne
  • 6,607
  • 8
  • 36
  • 93