Hacker News Reader

Comment by yoavm | Hacker News Reader

D3 has the reputation of being super-complicated because of all the libraries that are based on it, "simplifying" it so that everyone can use it. In the past year I wanted to create pretty unique type of data visualisation, so I dived into D3 and discovered it a makes a lot more sense than I though. Of course, if you only want a regular bar chart, you'll do better with things like C3, nvd3 etc'. But if you want anything a bit special, D3 itself is very powerful and the documentation in pretty good - there's no reason to avoid using it directly.

Definitely looking forward to try the new release.

View on HN

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

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

> Of course, if you only want a regular bar chart, you'll do better with things like C3, nvd3 etc'.

I know you probably know this, but for other people's sake - NVD3 requires the D3 library to work. It's therefore probably quite a good entry point into D3 - less complexity, but the same underlying code.

You know what's even easier than d3? Raw SVG elements. They're pretty powerful and the documentation is pretty good. There's no reason to avoid using it directly.

I've got to the same conclusion the last time I had to build some graph not quite standard. I first tried to grok d3, got lost in the sea of the possibility before finally resorted to putting svg rect at computed (x,y).

D3 is, like all chart libs, great if it had exactly what you need. But if you tread of the beaten path it's best to roll your own imo.

Keep in mind, D3 isn't a graphing library. It's a data binding library.

True for simple use-cases, but animation, updates, object constancy, and axes are really tricky to get right without D3.

Reply on news.ycombinator.com