I'm having trouble getting my mpld3 plot to show up in my Wordpress page. I make my plot, then use mpld3.save_html() to get an html file that contains my figure. However, when I paste this code into my Wordpress page (using the Text editor, not the visual editor) nothing happens. I paste both the script and div tags. I know my javascript is working because I can write alert('Hello'); inside script tags, which works fine. I've also tried installing the "Insert Javascript & CSS" plugin, which also did not work.
Is there some way to embed these graphs into Wordpress, and if not, how does one embed interactive charts in a Wordpress post?
I suspect that the d3.js and mpld3.js were not found, which would explain why you don't see the chart.
There is a d3_url and mpld3_url that you may want to provide and set to the url of a CDN where the files are available for example See https://mpld3.github.io/modules/API.html#mpld3.fig_to_html
Even after setting that properly you may have problems as this is not the recommended way to use javascript within wordpress. You can also try an embed with stricter separation from wordpress: see http://www.datamaplab.com/posts/embedding-javascript-visualization-wordpress/ for reference.
Related
So, I am editing some Dash plots in HTML to be more appealing. I am using Pycharm and Live Edit. I found some interesting CSS template, and everything is working nice. But, sometimes, for me as a beginner knows to be time consuming. So, is there any plugin or command that can point directly to the line of HTML and CSS code, after I click on element in browser? Or I should go inspect, and after that search them in Pycharm?
I try almost everything in settings and Live Edit. Didn't find nothing similar.
I've done some analysis using Pandas on a csv file and have created a number of graphs using matplotlib and plotly.
I'm trying to get these graphs in a html page so my team can see them on a dashboard.
I know it's possible to download the image and embed into html, however, the csv file I performed my analysis on will be constantly updated i.e. I need a way of include the graphs on a html page which auto refreshes.
Is this possible?
I think it would be possible and check pyscrpit
https://pyscript.net/
where you can use python in html
https://github.com/pyscript/pyscript/blob/main/docs/tutorials/getting-started.md
here are some tutorials to get and idea of what I am talking about and to start
Then you can host the html page anywhere you like and they will see when you update it
Voila or Panel to make a dashboard is another way to go. That needs an active Python kernel at this time. (That is as opposed to the pyscript / webassembly route. JupyterLite currently works in WASM and Voila in WASM is in development.) Examining demonstrations available at the Voila Gallery will give you a sense of how it can work. All those example demos are served via MyBinder. And you can use that too, if your code and data can be public. If it cannot be public, you'd need to host a server that only your team can access.
JupyterLite would also be possible if you don't mind your team being able to see the code cells and things that compose your Jupyter notebook stepping through the analysis. That would not require an active Python kernel server-side because it is based on WebAssembly that would run inside the client machine, like PyScript. So all you would need to do was a have a server that can serve static files. That's a lower bar than Voila that would run on the server. How to get started deploying JupyterLite is here.
I would checkout out Dash or Plotly, here you can add generation of the graphs in a callback for isntace. Which would update them when the .csv updates. Good luck!
I have a Python script that ingests GFS model data and plots it using matplotlib. How do I get those exact plots to display on a website? I am currently using PythonAnywhere to build my webpage.
It looks like Python Anywhere has a variety of options for how you can host your website/web application--so the details of how to do this will depend on how you are hosting your site.
One option is Flask, and I'll just point you to Matplotlib's example on embedding Matplotlib within Flask.
Another option is to generate the plots statically somewhere, and then upload them into your static website content. I'm not sure how exactly one one would go about that with Python Anywhere.
My goal is to generate an interactive html file from plotly fig and embed this html in my website. I was previously using fig.write_html('name.html'), but in the generated HTML, there are some unwanted symbols like ampersands &&.
Now, I tried adding cdn like fig.write_html('name.html', include_plotlyjs="cdn"), which solves the && problem but I have some questions about this:
On using cdn, is my data still secured/private, and can there be some possible complications on embedding this html to my website?
Is there any better/alternate way of removing the && symbols/cleaning the initial html file generated by plotly?
TIA
The include_plotlyjs="cdn" parameter causes a script tag to be included in the HTML output that references the Plotly CDN ("content delivery network"). This offloads the work of providing the necessary javascript from your server to a more scalable one. A browser will typically cache this making subsequent page loads faster.
Your data security/privacy is not affected by this option.
If the unwanted text you refer to is part of the Plotly JavaScript, it must be loaded however this solution will keep it from appearing in your HTML.
See the documentation for to_html for more information.
I am a beginner at coding and I am trying to use a blog to keep a record of notes on learning.
I am using jupyter notebook for python, but can't find any solution for a simple way to copy a snippet of html code into the blog. I can only do it now by saving examples/notes as an image
Is there a simple way to do it , such as in this?
There are a few ways to do this, but I'm not sure that any of them are as quick/simple as you're imagining. A lot of this also depends on what blogging platform you use. For example, the second example you posted looks more like raw code that has been copy/pasted and then formatted by their blogging platform
Here's a few things you can try, but none of them offer direct "export cell" functionality. They also assume you only want a static notebook for display:
Export to HTML
Go to File > Download as > HTML
This will give you a HTML page with all of your cells nicely rendered. Its not that trivial to extract specific cells to post on a blog, but if you just want to display your entire notebook you have everything as a HTML that you can upload to wherever your blog is.
It will look exactly like your full notebook:
Export basic HTML template
You can use nbconvert to give you a basic HTML rendering of your notebook. Open a terminal, go to the directory where your notebook is located and type:
jupyter nbconvert name_of_notebook.ipynb --template basic
That will give you a html page without all of the flashy styling. This makes it much easier for you just copy/paste the specific cell you want (as HTML) into your blog. Your blog would then need some styling/syntax highlighting to make it look pretty
This will look like a simple rendering of your notebook:
As an aside, the first option (exporting the full HTML page) also uses nbconvert behind the scenes, just without the --template basic argument
Export to markdown
Go to File > Download as > Markdown
If your blogging platform supports markdown, you can export your notebook as a markdown file without all of the styling and copy/paste the cell you want into your blog post. Again, you'd need a way to style it on your blog
This will give you basic markdown code you can copy/paste anywhere:
```python
a = 2
b = 5
print(a+b)
```
7
Upload to nbviewer
http://nbviewer.jupyter.org/
If you have your notebook uploaded as a github gist, or in a github repo, or any other direct location on the web, you can use nbviewer to render it as a nice webpage, but you cant extract elements to place in your blog so not sure how useful this is for your purposes
Styling HTML/markdown on Wordpress
If you're using wordpress as your blogging platform there are a few useful plugins that will make the process a bit easier:
If you've exported a markdown file, you can use a plugin like Jetpack, which enables support for markdown in a blog post/page
If you've copy/pasted your code into a blog post (either by copying the HTML, markdown, or raw code) you can style it using a syntax highlighter like Crayon
If you really want your code to look like a jupyter notebook cell, you can use a plugin like Simple Custom CSS to set up custom styling, but this takes quite a bit of work. There are a few sites showing how to set up CSS to look like a notebook cell (e.g. http://www.mianchen.com/wordpress-blogging-with-jupyter-notebook-in-five-simple-steps/)
If you have your notebook uploaded as a github gist, you can use oEmbed Gist to embed your notebook code into your post
For my own blog I've found the simplest solution to just copy/paste the raw code directly into my blog post, and then use plugins on the blogging platform (Wordpress in my case) to style the block of code