I have a bunch of data from which i'm generating a text file to encode a mermaid diagram.
But since this text file so big: 2000 lines. It won't generate an svg on the live version of https://mermaid.live/edit.
I then tried to install the mermaid http-server using docker, with no success (https://github.com/TomWright/mermaid-server).
Then, I wanted to try to use a local client but I have the same error: "Maximum text size diagram exceeded". (https://github.com/mermaid-js/mermaid-cli)
So the prblem is that I can't generate an SVG file from my data.
I try to check if there were a configuration file in any of those mermaid "implementations" but i couldn't find one.
I checked previously asked similar questions on Stackoverflow, but they are outdated unfortunatly.
So by using this template and pasting the graph text inside the "mermaid" beacons: it works because the maxTextSize has been set to 10000000000.
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<pre class="mermaid">
...
...
</pre>
<script type="module">
import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid#9/dist/mermaid.esm.min.mjs';
mermaid.initialize({ startOnLoad: true, securityLevel: 'loose', maxTextSize: 10000000000,});
</script>
</body>
</html>
`
Related
I'm trying to save a plotly graph (in R) as an HTML that is base64 encoded with following code:
htmlwidgets tool.htmlwidgets::saveWidget(as.widget(ggplotly(plot_total, tooltip = "text")), "/Users/Desktop/TEST.HTML")
I've done this on my Mac and it works great, the code is base64 encoded
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>plotly</title>
<script src="data:application/javascript;base64,KGZ1bmN0aW9uKCkgewogIC8vIElmIHdp.....
However, when I try to run the same code on my Linux machine, the resulting HTML is not base64 encoded.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>plotly</title>
<script>(function() {
// If window.HTMLWidgets is already defined, then use it; otherwise create a
// new object. This allows preceding code to set options that affect the
// initialization process (though none currently exist).
window.HTMLWidgets = window.HTMLWidgets || {};
// See if we're running in a viewer pane. If not, we're in a web browser.
var viewerMode = window.HTMLWidgets.viewerMode =
/\bviewer_pane=1\b/.test(window.location);
Is there a package that needs to be installed on Linux so htmlwidgets tool can base64 encode the Javascript?
Cross-post on Bokeh forums: https://discourse.bokeh.org/t/display-json-item-serialized-json-in-jupyter-notebook/7245/3
I've serialized my Bokeh plot to json using bokeh.embed.json_item, as described in the documentation: https://docs.bokeh.org/en/latest/docs/reference/embed.html#bokeh.embed.json_item
I now want to load it again in Python (Jupyter notebook). How do I do so? The documentation only mentions loading it using JavaScript and embedding it on a webpage: https://docs.bokeh.org/en/latest/docs/user_guide/embed.html
One way to do it is by displaying an HTML object in the IPython notebook as follows:
from IPython.core.display import display, HTML
html_plot = f'''
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.2.3.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.3.min.js"
crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.3.min.js"
crossorigin="anonymous"></script>
</head>
<body>
<div id="myplot"></div>
<script>
item = {plot_json}
Bokeh.embed.embed_item(item, "myplot");
</script>
</body>
'''
display(HTML(html_plot))
However, this does not get me back the bokeh Figure object which I can manipulate.
As of Bokeh 2.3 re-ingesting the exported JSON back in to Python is still an open issue.
Simple html file with attached css file. Code completion does not work. (inline css does)
I've spent lots of hours trying to figure it out. Hope this will save some time for those who are still struggling. See the answer below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>
Autocompletion will not work if Code Insight feature is disabled.
So my problem was with the big css file. Actually, it's a regular size file (tailwind css processed by postcss with autoprefixer plugin).
Css file was around 3MB, but code insight stops working for files that bigger than 2.5MB by default.
The solution is to increase filesize limit.
Go to Help > Edit Custom Properties
Paste config
# Maximum file size (kilobytes) IDE should provide code assistance for.
idea.max.intellisense.filesize=10000
Save and restart
As I understand ggvis runs on top of shiny. But I can't figure out how to export all the files needed for running a single ggvis chart on a webserver without R/shiny.
That won't be possible for interactive plots since "every interactive ggvis plot must be connected to a running R session" (via ggivs basics). However, it is possible with ones that don't require reactive values.
CAVEAT ggvis is still rly new, so YMMV with 0.2.x for the following+.
I gave the various ggvis/knitr print functions a quick try but didn't manage to generate the whole document (i.e with the necessary libraries). If you do invoke a standard, non-interactive ggvis with something like:
library(ggvis)
p <- ggvis(mtcars, x = ~wt, y = ~mpg)
p
and do a "view in browser", you'll see that the directory it creates has a main HTML file and a libs directory. You'll need all those javascript libraries in your site and then an outer template like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="lib/jquery-1.11.0/jquery.min.js"></script>
<link href="lib/jquery-ui-1.10.4/css/smoothness/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<script src="lib/jquery-ui-1.10.4/js/jquery-ui-1.10.4.custom.min.js"></script>
<script src="lib/d3-3.4.1/d3.min.js"></script>
<script src="lib/vega-1.3.3/vega.min.js"></script>
<script src="lib/lodash-2.2.1/lodash.min.js"></script>
<script>var lodash = _.noConflict();</script>
<link href="lib/ggvis-0.3.0.99/css/ggvis.css" rel="stylesheet" />
<script src="lib/ggvis-0.3.0.99/js/ggvis.js"></script>
<script src="lib/shiny-ggvis-0.3.0.99/js/shiny-ggvis.js"></script>
</head>
<body>
</body>
</html>
You can get the ggvis plot HTML via:
library(knitr)
q <- knit_print.ggvis(p)
writeLines(as.character(q), "~/SOMEDIR/ggvis.html")
and then just insert it in the body tag.
If you poke around a bit more at the ggvis source at github, you might be able to figure out how to use view_static (from ggvis) to get it to this automatically. I'm also pretty sure that there's a way to knit from an rmarkdown file directly to html, but I'm kinda staying clear of ggvis until at least 0.4/0.5 for pseudo-production vis.
From the rChart package, dependencies are read in from the config.yml file, like so:
sankey:
css: [css/sankey.css]
jshead: [js/d3.v3.js,js/sankey.js]
cdn:
css:
- "http://timelyportfolio.github.io/rCharts_d3_sankey/css/sankey.css"
jshead:
- "http://d3js.org/d3.v3.min.js"
- "http://timelyportfolio.github.io/rCharts_d3_sankey/js/sankey.js"
The problem is, when reading in the path, R seems to be having problems with front and backslashes and would not display the graph:
when inspecting the element of the plot in the web browesr, this is shown:
<head>
<meta charset="utf-8"></meta>
<link href=dirPath\sankey/css/sankey.css" rel="stylesheet"></link>
<script type="text/javascript" src="dirPath\sankey/js/d3.v3.js"></script>
<script type="text/javascript" src="dirPath\sankey/js/sankey.js"></script>
</head>
It seems like it appends the "\" automatically and that's what causing it not to be able to read in the dependencies.
Anyone encountered this problem?