Hacker News Reader

Comment by danso | Hacker News Reader

What is your static+interactive workflow now, if I can ask? Also, is it fairly easy to build a workflow that generates static visualizations via D3 (i.e. making savable SVGs)?

View on HN

I make charts with R/ggplot2. Standard workflow is to construct chart and save as static file. (PNG/SVG etc.) But with the plot.ly bridge, I can convert to an interactive chart w/ rich tooltips with very very little tweaking. (See this notebook: https://github.com/minimaxir/interactive-facebook-reactions/...)

To convert D3 to SVG, I believe all you need is a helper function but that is not my area of expertise.

There's also Shiny, Jupyter, Bokeh...

Those aren't updated clientside (have to ask the server for the new chart instead of just the data), which is a different architecture that does not scale.

Broken actually does a lot of stuff client side and you can simply update the data. It's much closer to d3 for interactivity,and really quite powerful. It does lack some features ATM, but it continues to grow space.

Indeed, what I like about plotly is that you can start pretty much anywhere (R, Python, Jupyter, browser JavaScript, node.js, Julia, Matlab...) and get to an interactive, explorable chart (disclaimer, I'm working on WebGL plotly functions eg. https://twitter.com/plotlygraphs/status/747879741399568384)

Shiny supports either model, depending on the visualization. And also I think you have it backwards, if you have to scale to large amounts of data then you want to push a chart, not data, into the client.

Hadn't heard of Bokeh before; so thanks for that!

Also there is ggvis https://github.com/rstudio/ggvis which is nice if you are already using ggplot2.

It is very easy to "export" SVG generated by d3:

output.append('div').text(svg.node().outerHTML);

You can see it in action here:

https://www.digital-message.com/develop/tools/yaml2svg

You can copy and paste the SVG code out:

Or, in Chrome, use the Console.download() snippet: https://bgrins.github.io/devtools-snippets/#console-save / https://github.com/bgrins/devtools-snippets/tree/master/snip...

I don't think your solution works for this use case since what he wants is to save the "XML serialized" SVG element instead of a "JSON serialized" JavaScript object.

A simple

d3.select('svg').node().outerHTML

would do the trick.

(You can use the same trick as in console-save to generate a download URL though.)

To do this you can use SVG Crowbar: http://nytimes.github.io/svg-crowbar/

It's pretty easy to use. I don't do interactive so I just find it easier to export EPS files from R.

Reply on news.ycombinator.com