Plotly

plotly html integration

https://ig248.gitlab.io/post/2018-11-05-plotly-sample/ (merci Jo)

after a bunch of slightly outdate tutorial I found this one wich worked in my case

https://medium.com/analytics-vidhya/how-to-export-a-plotly-chart-as-html-3b5df568df4a

just embbed like this

<div class="container-fluid" style="margin-top:40px">
  <iframe src="sariette_pos_pos_organisms_sunburst.html" width="100%" height="600" style="border:none;"></iframe>
</div>

customization of fig (margin/titles and other nasty stuff)

# %%
# using px express to plot some quick and dirty sunbursts (https://plotly.com/python/sunburst-charts/)
# customize fonts in titles following https://stackoverflow.com/a/57926862
# customize margins following https://stackoverflow.com/a/63162535

import plotly.express as px


fig = px.sunburst(df4cyto_flat, path=['Superclass_cf_DNP_consensus', 'Class_cf_DNP_consensus', 'Subclass_cf_DNP_consensus', 'Parent_Level_1_cf_DNP_consensus'],
                  )
fig.update_layout(
    #font_family="Courier New",
    title_font_family="Courier New",
    title_font_color="black",
    title_font_size=14,
    legend_title_font_color="black",
    title_text="<b> Overview of the consensus chemical annotions <br> as the superclass, class, subclass and parent_1 level for <br>" + project_name + "</b>",
    title_x=0.5
)

fig.update_layout(
    title={
        'text': "<b> Overview of the consensus chemical annotions <br> as the superclass, class, subclass and parent_1 level for <br>" + '<span style="font-size: 20px;">' + project_name + '</span>' + "</b>",
        'y':0.96,
        'x':0.5,
        'xanchor': 'center',
        'yanchor': 'top'})

fig.update_layout(margin=dict(l=50, r=50, t=100, b=50)
#,paper_bgcolor="Black"
)

fig.show()
fig.write_html(sunburst_chem_results_path)