Plotly.js Open-Source Announcement | Hacker News Reader

Plotly.js Open-Source Announcement

plot.ly

515 pointsetpinard70 comments

This is great news for Jupyter (IPython) Notebooks: https://plot.ly/python/offline/

It basically provides interactive inline visualizations, making it great for data exploration (without having to send any data to plot.ly)

I'm wondering if the success of Continuum (Anaconda) could've influence Plot.ly?

Thanks for the link! Have you found a way to use the plots offline in your own server (e.g. in Django)? I have just found integration with Jupyter....

Indeed! I think the success of Bokeh (http://bokeh.pydata.org/) from Continuum has influenced their decision...

One thing I've been waiting for (and if I had the time, I'd love to work on something like this) is scientific javascript. I love es6 and classless oop[0] that javascript provides (and general dynamic-ness) but the lack of operator overloading makes mathy infix operators work with an array-like type not possible in native js. Something that had the "functional", dynamic semantics of javascript with the natural notation that numpy has (with its broadcasting rules) would be fantastic.

Stuff like plotly is great, but as far as I can tell, I'm not going to be able to use it any time soon because I'm not going to write a >10 term expression in javascript when every '+' becomes a 'add(a,b)' or 'a.add(b)'.

[0] https://youtu.be/bo36MrBfTk4?t=33m45s

To do that you first need to have a way of extending JavaScript with C and/or Fortran. No way numpy can be implemented in pure js or python without being excruciatingly slow.

You can do it with the nodejs FFI. It makes me cringe a bit to say that, but you could do it in roughly the same way as how NumPy does it.

I have tried both, Bokeh (without the server) and plot.js (their python lib offers a JSON encode option so that you can use their Python lib with plotly.js without sending data to plotly).

However, I found both to be very similar and still don't have a clear favorite. Any opinions on which solution is better suited for (internal) interactive dashboards?

The Github pages reads: "Built on top of d3.js and stack.gl, plotly.js is a high-level, declarative charting library. plotly.js ships with 20 chart types, including 3D charts, statistical graphs, and SVG maps." -- https://github.com/plotly/plotly.js

It feels a bit heavy in comparision to Highcharts or the open source Flotcharts. Though some chart types are pretty impressive, same can be said for d3.js in general.

But thanks for releasing plotly.js as open source.

I don't know, Highcharts and Highslide are insanely complex, but very capable.

We've been using Highcharts in our app for about 2 years and are generally pretty happy with it.

The one thing Highcharts doesn't do well is line charts for data series where the x-axis value isn't always increasing (ie data that loops around on the plot). Usually renders ok the first time but zoom breaks completely in our experience.

For us this issue is a big enough pain for our users (who have been stuck with scatter plots as the only working...workaround) that we'll probably move to plotly as soon as we can now that it's open source.

Out of curiosity, what kind of dataset would do that?

If you're looking for something less "heavy", I heartily recommend http://metricsgraphicsjs.org/, another charting library based on D3 and developed at Mozilla, which is very easy to use and renders elegant charts by default.

Does it support dual axis line charts? Didn't see it in examples. It's a must-have for any charts that display multiple metrics over time.

While dual-axis plots can be useful to have, there are some strong arguments from the data visualization community about how they are sub-optimal. https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&c...

Being able to display 99p latency and transaction volume on one chart is invaluable. Generally, if the metrics are correlated, dual-axis charts is the right solution.

> It feels a bit heavy in comparision to Highcharts

But Highcharts is not Open Source :/

How well does plot.ly do with plain old equation plotting? In particular, I'm looking for something that can produce mobile friendly plots that scales diagrams automatically to show relevant features (x, y intercepts, inflection points, etc) for simple function families - y= mx + b, ax^2 + bx + c, etc.

Any suggestions on available libraries, or am I better to start from scratch on this?

You could compute a few [x,y] values for an equation y=f(x) and plot them using any line chart plotting library

Well, yes, that was the question! Got any favorite line chart plotters?

Check out JSXGraph:

http://jsxgraph.uni-bayreuth.de/wp/

It's mobile friendly so long as the user's browser supports canvas (in my experience with it). It supports multi-touch devices too, but I haven't verified that.

This is awesome, however I don't understand their motivation to opensource or their business model following this. Any speculation or comments are welcomed.

Speculation: They get their revenue from on-premise installations and support plans. Big businesses don't buy software from lack of open-source options, they buy it because they don't want to deal with it themselves.

Wait how does jQuery decrease cross-browser compatibility?? "jQuery has been removed from plotly.js for significantly better performance and improved browser compatibility."

Possibly referring to jQuery 2 dropping support for IE 8 and down?

Native JavaScript can be up to 10–100X than the equivalent operations done through a compatibility layer like jQuery.

I didn't ask about the performance claims.

Maybe the performance was bad on specific browsers?

I've looked into plot.ly and found the feature set pretty impressive, although I was not happy with the way they handled data. Now that it's open sourced, I'll definitely try to make use of it in practical data visualization applications.

That being said, I'm not 100% sold on interactive charts. Way too many libraries (Highcharts especially) break or function poorly on mobile devices, which is a serious problem in 2015. I'll have to give plot.ly another QA audit.

It really is too bad that it's such a problem. Have you considered rasterizing the graphs and only displaying that version on mobile?

I think the most interesting part of the announcement may actualy be the JSON schema for interactive charts. If broadly adopted this could be a really useful interchange format for charting between environments and languages.

AFAIK Vega already uses the same technique for interactive charts. http://vega.github.io/vega/

Github link: https://github.com/plotly/plotly.js

I've used plotly.js the last months (about 3 or 4), the needs of my application are basic: pie chart, bar chart and line chart. I first tried Chart.js, very easy to work with, but some situations make me change to plotly: -The user needed numbers to be outside the pie chart when the space is limited. -The user print the chart so svg is better than canvas for this purpose Plotly has plenty of configuration options and is well documented on https://plot.ly/javascript/reference/ but for me, the most useful part is the playground (You need a plotly account). You can make your layout for a chart, view the JSON layout object and apply it on your project. The experience has been positive to me.

joelburgarini I'm one of the maintainers of Chart.js. Version 2 (currently in a beta release, https://github.com/nnnick/Chart.js/tree/v2.0-dev) supports multiple x or y axes.

You are right, i've edited the comment to clarify.

Thank you! Was using FusionCharts in production, but I've been looking for something with the features I need already built, that's open source. This is awesome.

Very cool! Love the inclusion of SVG and not just canvas, I'm personally very invested in that format so it's nice to see the tech being pushed forward.

...most chart libs use SVG. Beside Highcharts (not open source) I have yet to see a SVG based charting lib that is fast and lightweight. d3.js and chart libs based on d3.js (like plot.ly) are very heavy weigth in comparision (= more than 100KB minified JS code; plot.ly is 1.05MB huge: https://github.com/plotly/plotly.js/blob/master/dist/plotly.... )

SVG wasn't supported until Android 4 and only Internet Explorer/Edge is really optimized for SVG (thanks to their VML investment). On the other hand Chrome, Safari and Firefox render Canvas much faster. (only relevant if you want to render thousends of objects on a battery powered device)

Also, canvas support can be turned off. We have clients who have the latest version of Chrome, however they run on VMs and the system admins have canvas turned off (no gpu rendering at all). Out of our control...

Can't canvas be rendered in CPU?

Thanks! It's surprising how we still don't have a good open source charting library. I've checked most of them out and Highcharts/FusionCharts blow them out of the water.

What features are missing for you?

Full Disclosure: I'm a maintainer of Chart.js

I think we have far too many good open source charting libraries, it makes picking very difficult.

There are a number of great open source charting libraries that don't force you into really inflexible APIs or require you to transform data into a hard-to-use format to display it. NVD3 is (for me) much easier to use and customize (not to mention looks better and can be customized with CSS) than HighCharts, for example. The latest FusionCharts offering looks more straightforward but their pricing model is a no-go for me.

Does this mean if I build an R-Shiny application, to be hosted on-site with Shiny Server, I can now include plotly charts without paying for an account with them?

It would be good if the library was marked as Libre so that LibreJS would easily recognize it: https://www.gnu.org/software/librejs/manual/html_node/Free-L...

Awesomely feature packed! And thus a bit beefy at ~1MB minified, but I guess that is the tradeoff.

A modular design would be great. Every chart type could be a seperate plugin / npm module.

This is generally the approach of the WebGL components (stackgl et al). Can't speak to the library as a whole, though.

~1MB, wow! I think I'll stick with metrics-graphics (~80kB). It's really a very nice and under-recognized chart library by Mozilla. Also based on d3.

A big yes! I discovered and adopted MetricsGraphics today, after having tried so many alternatives in the past days (Chart.js is missing some features, C3.js charts are ugly, Plottable.js is too low level, NVD3 is not stable, Epoch has not rollover, etc.).

MetricsGraphics is at the same time easy to use, quite powerful, and creates beautiful charts out the box.

It made my day.

But for "explorable" scientific charts (the kind of charts I was used to do using matplotlib), I think Plotly.js can be fantastic.

What features did you find missing from Chart.js? I'm one of the maintainers, so getting this kind of feedback is great!

Hi, and thanks for asking :-)

Charts.js is a great library. These are the problems I had that made me switch to MetricsGraphics:

- No support for time series. I need to chart 100 data points, one per day. It's difficult to correctly label the ticks on the time axis without library support, and without overlapping labels. (It looks like support for this will be added in 2.0.)

- When I rollover, instead of highlighting and showing the tooltip for the closest points, many points are highlighted. (There is an issue about this in the bug tracker.)

- I'd like to remove the dots, when drawing a chart line.

- Time scale support will be added in v2. What we've got so far uses Moment.js for parsing dates and times with dynamic scaling to different tick sizes (hour, day, week, etc). - Tooltip modes in v2 can be configured between 'single' which highlights the single closest item and 'label' which highlights all items at the same x value. - Removing dots is still something that cannot be easily done. I'll dig up the issue and target it for v2.0.

Regarding the first two issues that will be solved in v2, is too early to use v2, or is okay?

Regarding the last issue, I'd expect it to be the easiest to solve :-)

I know there are some users using it in production. The biggest challenge is that we're still in the process of writing documentation for the new features and the config object changes.

I can think of lots of workarounds to hide the points (such as setting the fill and stroke colours to 'transparent'). I think it should be fairly easy to add in something to simply prevent the drawing of the point objects.

Any thoughts on how this compares to MPLD3? http://mpld3.github.io/

I wonder where this is going and if python+numpy+scipy+matplotlib will one day be replaced by tools written in javascript.

Realistically, are you going to drop python+numpy+scipy just to get away from matplotlib?

I think it is more likely that some Python library which outputs javascript code in addition to still images will starting to replace matplotlib. Or matplotlib evolves to have that capability itself.

Is that what mpld3 is for? (http://mpld3.github.io/)

At 1mb+, maybe it should be modularised?

I was beginning to learn d3 today, the plotly API seems far more elegant and easy to work with.

I wonder how hard it would be to add basemap support to https://plot.ly/javascript/choropleth-maps/, a-la Leaflet.js.

I'd love it plotly.js could work Medium for integration. Medium still doesn't have way to do rich, interactive charts. It makes me sad...

As an off-topic data visualization tip, I strongly recommend against using Medium for writing about data visualization. Medium's compression murders the quality of high-res charts.

Medium's lack of embeddable visualizer is frustrating. But getting interactive charts to play nicely and responsively on desktop/tablet/mobile is immensely painful. I did it manually once but it merely adequate on phones.

I just want to have my cake and eat it. Is that really so much to ask?

I've really enjoyed using plotly in the past for several projects. I can definitely recommend it if you haven't had the chance.

Reply on news.ycombinator.com