{"id":881,"date":"2023-06-05T16:32:17","date_gmt":"2023-06-05T14:32:17","guid":{"rendered":"https:\/\/inseri.swiss\/?p=881"},"modified":"2024-11-11T16:32:17","modified_gmt":"2024-11-11T16:32:17","slug":"python-and-plotly","status":"publish","type":"post","link":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/2023\/06\/python-and-plotly\/","title":{"rendered":"Python and Plotly"},"content":{"rendered":"\n<p>In this example we will show you how to integrate our Python code for generating Plotly figures into the Python Code block and use the Plotly Chart block to display it.<\/p>\n\n\n\n<p>It is important to keep in mind that the runtime is not CPython but rather Pyodide that behaves slightly different. For this use case please pay attention at the following points (see the code below):<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>for installing the Plotly package please use micropip (see the first 2 lines of code below<\/li>\n\n\n\n<li>for this example pandas is used behind and it has to be loaded explicitly (please see line 5)<\/li>\n\n\n\n<li>for converting the Plotly figure to a&nbsp;<strong>JSON<\/strong>&nbsp;use&nbsp;<code>write_json<\/code>&nbsp;(see line 11)<\/li>\n<\/ul>\n\n\n\n<p>Now the JSON file is the output of our Python Code, and used further for the JSON description of the Plotly Chart block.<\/p>\n\n\n\n<div class=\"wp-block-inseri-core-python\" data-attributes=\"{&quot;autoTrigger&quot;:false,&quot;blockId&quot;:&quot;HTDHmRh3QXscesAkipzfH&quot;,&quot;content&quot;:&quot;import%20micropip%0Aawait%20micropip.install('plotly')%3B%0A%0A%23%20make%20sure%20you%20load%20pandas%20(needed%20by%20plotly.express)%0Aimport%20pandas%20as%20pd%0A%0Aimport%20plotly.express%20as%20px%0Aimport%20plotly.io%20as%20pio%0A%0Afig%20%3D%20px.bar(x%3D%5B%22a%22%2C%20%22b%22%2C%20%22c%22%5D%2C%20y%3D%5B1%2C%203%2C%202%5D)%0Apio.write_json(fig%2C%20%22fig.json%22)&quot;,&quot;editable&quot;:true,&quot;height&quot;:294,&quot;inputCode&quot;:&quot;&quot;,&quot;inputs&quot;:{},&quot;isVisible&quot;:true,&quot;label&quot;:&quot;Feel free to edit the Python code&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;python-plotly&quot;},&quot;mode&quot;:&quot;editor&quot;,&quot;outputs&quot;:[]}\">is loading &#8230;<\/div>\n\n\n\n<div class=\"wp-block-inseri-core-plotly\" data-attributes=\"{&quot;blockId&quot;:&quot;J0nScd4H4QhmmeOy1bXbG&quot;,&quot;height&quot;:500,&quot;inputConfig&quot;:&quot;&quot;,&quot;inputData&quot;:&quot;&quot;,&quot;inputFull&quot;:&quot;HTDHmRh3QXscesAkipzfH\/fig.json&quot;,&quot;inputLayout&quot;:&quot;&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;plotly&quot;},&quot;outputs&quot;:[]}\">is loading &#8230;<\/div>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:60%\"><\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-inseri-core-export alignright\" data-attributes=\"{&quot;align&quot;:&quot;right&quot;,&quot;blockId&quot;:&quot;vaxQQCzmrnvQCf4meQgfk&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;export&quot;},&quot;postId&quot;:881}\">is loading &#8230;<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-inseri-core-share alignright\" data-attributes=\"{&quot;align&quot;:&quot;right&quot;,&quot;blockId&quot;:&quot;KTETwIissQyi0jL3ZpuwV&quot;,&quot;copiedText&quot;:&quot;Copied&quot;,&quot;metadata&quot;:{&quot;name&quot;:&quot;share&quot;},&quot;showIcon&quot;:true,&quot;text&quot;:&quot;Share&quot;}\">is loading &#8230;<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this example we will show you how to integrate our Python code for generating Plotly figures into the Python Code block and use the Plotly Chart block to display it. It is important to keep in mind that the runtime is not CPython but rather Pyodide that behaves slightly different. For this use case [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[40,47,48,50],"class_list":["post-881","post","type-post","status-publish","format-standard","hentry","category-basic-example","tag-export","tag-plotly-chart","tag-python-code","tag-share"],"_links":{"self":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/comments?post=881"}],"version-history":[{"count":1,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/881\/revisions"}],"predecessor-version":[{"id":2121,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/posts\/881\/revisions\/2121"}],"wp:attachment":[{"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/media?parent=881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/categories?post=881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zi.uzh.ch\/whp\/science-it\/inseri\/wp-json\/wp\/v2\/tags?post=881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}