10 ms·
Plotly.js Open-Source Announcement
- theseatoms 11y agoGithub link: https://github.com/plotly/plotly.js https://github.com/plotly/plotly.js
- bsou 11y agoAwesomely feature packed! And thus a bit beefy at ~1MB minified, but I guess that is the tradeoff.
- frik 11y agoA modular design would be great. Every chart type could be a seperate plugin / npm module.
- mattdesl 11y agoThis is generally the approach of the WebGL components (stackgl et al). Can't speak to the library as a whole, though.
- jnbiche 11y ago~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.
- ngrilly 11y agoA 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.
- etimberg 11y agoWhat features did you find missing from Chart.js? I'm one of the maintainers, so getting this kind of feedback is great!
- ngrilly 11y agoHi, 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.
- etimberg 11y ago- 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.
- ngrilly 11y agoRegarding 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 :-)
- etimberg 11y agoI 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.
- Cshelton 11y agoThank 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.
- temuze 11y agoThanks! 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.
- etimberg 11y agoWhat features are missing for you? Full Disclosure: I'm a maintainer of Chart.js
- Rodeoclash 11y agoI think we have far too many good open source charting libraries, it makes picking very difficult.
- sailfast 11y agoThere 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.
- masonhipp 11y agoVery 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.
- frik 11y ago...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.min.js 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)
- Cshelton 11y agoAlso, 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...
- netheril96 11y agoCan't canvas be rendered in CPU?
- forrestthewoods 11y agoI'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...
- minimaxir 11y agoAs 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.
- forrestthewoods 11y agoMedium'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?
- deleted 11y ago[deleted]
- temuze 11y agoIn this case, it is the license that matters. Most charting libraries are licensed. You can use them trivially by downloading them, or inspecting them in the browser, as you suggest. However, it isn't legal.
- debaserab2 11y agoIt's about the license, not the actual code.
- minimaxir 11y agoI'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.
- n0us 11y agoIt really is too bad that it's such a problem. Have you considered rasterizing the graphs and only displaying that version on mobile?
- frik 11y agoThe 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 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.
- 91bananas 11y agoI don't know, Highcharts and Highslide are insanely complex, but very capable.
- BRValentine 11y agoWe'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.
- infinite8s 11y agoOut of curiosity, what kind of dataset would do that?
- ngrilly 11y agoIf you're looking for something less "heavy", I heartily recommend http://metricsgraphicsjs.org/ 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.
- rodionos 11y ago
- NiloCK 11y agoHow 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?
- QuasarLogic 11y agoYou could compute a few [x,y] values for an equation y=f(x) and plot them using any line chart plotting library
- NiloCK 11y agoWell, yes, that was the question! Got any favorite line chart plotters?
- hrc2 11y agoCheck out JSXGraph: http://jsxgraph.uni-bayreuth.de/wp/ 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.
- amelius 11y agoI wonder where this is going and if python+numpy+scipy+matplotlib will one day be replaced by tools written in javascript.
- bigfudge 11y agoRealistically, are you going to drop python+numpy+scipy just to get away from matplotlib?
- netheril96 11y agoI 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.
- asafira 11y agoIs that what mpld3 is for? (http://mpld3.github.io/ http://mpld3.github.io/)
- tdumitrescu 11y agoWait how does jQuery decrease cross-browser compatibility?? "jQuery has been removed from plotly.js for significantly better performance and improved browser compatibility."
- cmwright 11y agoPossibly referring to jQuery 2 dropping support for IE 8 and down?
- rudiger 11y agoNative JavaScript can be up to 10–100X than the equivalent operations done through a compatibility layer like jQuery.
- tdumitrescu 11y agoI didn't ask about the performance claims.
- hatsix 11y agoMaybe the performance was bad on specific browsers?
- bdcs 11y agoThis is awesome, however I don't understand their motivation to opensource or their business model following this. Any speculation or comments are welcomed.
- gk1 11y agoSpeculation: 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.
- henningo 11y agoThis is great news for Jupyter (IPython) Notebooks: https://plot.ly/python/offline/ 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?
- ricleal 11y agoThanks 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....
- ricleal 11y agoIndeed! I think the success of Bokeh (http://bokeh.pydata.org/ http://bokeh.pydata.org/) from Continuum has influenced their decision...
- noobermin 11y agoOne 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 https://youtu.be/bo36MrBfTk4?t=33m45s
- netheril96 11y agoTo 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.
- 11y ago
- joelbugarini 11y agoI'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/ 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.
- etimberg 11y agojoelburgarini 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 https://github.com/nnnick/Chart.js/tree/v2.0-dev) supports multiple x or y axes.
- joelbugarini 11y agoYou are right, i've edited the comment to clarify.
- rmchugh 11y agoI was beginning to learn d3 today, the plotly API seems far more elegant and easy to work with.
- keverets 11y agoIt 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-Licenses-Detection.html https://www.gnu.org/software/librejs/manual/html_node/Free-L...
- iandanforth 11y agoI've really enjoyed using plotly in the past for several projects. I can definitely recommend it if you haven't had the chance.
- claytonjy 11y agoDoes 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?
- mangecoeur 11y agoI 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.
- buremba 11y agoAFAIK Vega already uses the same technique for interactive charts. http://vega.github.io/vega/ http://vega.github.io/vega/
- voltagex_ 11y agoI wonder how hard it would be to add basemap support to https://plot.ly/javascript/choropleth-maps/ https://plot.ly/javascript/choropleth-maps/, a-la Leaflet.js.
- voltagex_ 11y agoAt 1mb+, maybe it should be modularised?
- dreeves 11y agoAny thoughts on how this compares to MPLD3? http://mpld3.github.io/ http://mpld3.github.io/