Hacker News Reader

Comment by minimaxir | Hacker News Reader

To add to that, if you are a complete newbie to any data visualization, do not start with d3. If you want to make pretty charts programatically, using R/ggplot2 or Python/Seaborn is good enough. Even Excel is fine if you tweak the defaults.

D3 is good if your visualization benefits from interactivity, either with dynamic data adjustment or rich tooltips. But static visualizations are important too. (I recently restructured my workflow so I can output static images and interactive charts with the same code, which makes it the best of both worlds.)

View on HN

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)?

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.

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.

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.)

Any recommendations for doing realtime charts that update a few times per second?

That's an area I'm not an expert on (Though learning). C3/nvd3 support real-time updates, but Chart.js seems more maintained.

Plotly animations are coming along gradually, and Reactive Vega may be something to look at. Unrelated to these, I've been exploring real-time visualizations (and more in focus, real-time configurability) with D3 e.g. here: http://bl.ocks.org/monfera/35be5626a47110312c35 but Mike Bostock and many of others have technical notes on updating charts, like here: https://bost.ocks.org/mike/path/

I have used Epoch[0] and Rickshaw[1] before for similar purposes, and have heard that Plotly works well too (especially if the process that is generating the data is Python-based). For simple line charts, maybe Smoothie[2]?

Currently, I am trying to make a dashboard for visualizing many different data sources with WebSockets and Chartjs but it's still not quite ideal-- there's a bit of lag, and sending too much data via JSON really slows things down. If anyone has solved that this problem I would appreciate it if they told me how they did it.

0. http://epochjs.github.io/epoch/

1. http://code.shutterstock.com/rickshaw/

2. http://smoothiecharts.org/

for a fair bit of interactive data updating every second over websockets, ive had some success with DCjs.

On ios, the performance wasnt the best though

it was replaced with straight d3 i think, or maybe something rendering on canvas

Make sure you're using permessage-deflate with the Websockets, and try disabling animations in chartjs.

I'm using Flot for https://podium.live, 10-20 charts with upwards of 1k points/chart updating at 10hz. It can work, but you need to do a few things like wrapping things in requestAnimationframe and not redrawing axes.

http://www.visualsedimentation.org/examples/sediclock/sedicl...

Reply on news.ycombinator.com