Embed diagram in static HTML

[jiffyclub]

Embed diagram in static HTML

[jiffyclub]

To date I've only ever taken screenshots when I'm sharing. Do you want interactivity? Or just the svg? Or...?

[jiffyclub]

If you only want the SVG this looks like it might be handy: http://nytimes.github.io/svg-crowbar/ (Via http://stackoverflow.com/questions/8973711/export-an-svg-from-dom-to-file.)

[mrocklin]

I was hoping for interactivity. This would require a fair amount of the
logic to be clientside. I'm not sure what lies on the client and what lies
on the server in snakeviz.

On Wed, Apr 15, 2015 at 9:24 PM, Matt Davis [email protected]
wrote:

If you only want the SVG this looks like it might be handy:
http://nytimes.github.io/svg-crowbar/

—
Reply to this email directly or view it on GitHub
#55 (comment).

[jiffyclub]

All the logic is client side. The snakeviz server does a little pre-processing, but once the page finishes loading in your browser the server is done. If you look at the source you'll see all the profile data embedded in the HTML. So in theory it's likely possible to copy/paste that data into another HTML document, load the snakeviz JS, and have something work.

The template for the snakeviz page is here if you're curious about the structure: https://github.com/jiffyclub/snakeviz/blob/master/snakeviz/templates/viz.html
The snakeviz JS files (in https://github.com/jiffyclub/snakeviz/tree/master/snakeviz/static) could be served via https://rawgit.com/.

I'll see if I can make a proof of concept, but feel free to start experimenting. What I'm going to do is run snakeviz to make a page, save the HTML, replace all the static file loading with https://rawgit.com/, delete the svg, and see what happens if I open the HTML file in a browser.

[jiffyclub]

Okay, this can be done. Here's a sample: https://cdn.rawgit.com/jiffyclub/0a43706c5daed5445d30/raw/c66530d7f0c6a1b1f2c4403c665b192d597b7f0a/snakeviz_glob.html

My procedure was as I described:

• load a page locally via the snakeviz CLI
• File -> Save in the browser to save just the HTML file
• replace anything being loaded from /static/ so that it comes from https://rawgit.com/

I'm going to get started on a script to automate changing the URLs to https://rawgit.com/ pointers.

For your application you'll need to pick and choose what you want included from the HTML, e.g. maybe delete the stats table, manually set the size of the image, copy over all the static file loading and embedded JS. I'm not sure how much work it'd be to merge the display with the rest of your blog post, but it's definitely doable.

[jiffyclub]

Here's the script I came up with to replace the static file loading with the RawGit CDN: https://gist.github.com/jiffyclub/6b5e0f0f05ab487ff607

[jiffyclub]

It occurred to me that if you want more than one visualization on a page that's another story. I'd have to do some real digging to look into that and my hunch is that it would take some work.

[mrocklin]

One vis on a page covers my immediate need. Obviously it'd be nice to have more but I'm pretty content with the solution so far.

Bokeh has an interesting solution here. They have a programmatic way to deliver HTML and JS code for external use. http://stackoverflow.com/questions/29462117/supplemental-javascript-for-bokeh-plot

[jiffyclub]

Nice, I'll have to think about a way to deliver a snippet like that.