I would consider D3 not to be a graph making library, but more a Data Frame & Document Object Model data binding library with a collection of stats functions.
I've just looked at dimple. It looks quite a bit simpler than implementing d3, I will have to play around with it, but from your experience how would you rate it in terms of ease of use, learning curve, performance, etc.?
Yeah, my experience exactly. It's a great start if you're prototyping and your initial use-cases map well to their demo pages. Once your designer gets excited, you'll have to write a lot of code on top of it and may well consider ditching it entirely.
- It is a lot simpler than D3
- It works best when your use case fits into the explicit examples given here : http://dimplejs.org/examples_index.html
- If you are wanting something from the advanced examples, you should be proficient in javascript and understand d3 already
- If you want something not in the examples at all, you should really understand d3.
It's pretty quick to get up and running with it, you can always get access to the underlying d3 selections to do more complicated operations, and the main developer is fairly accessible through stackoverflow questions or github questions. There are some gotchas I've run into but nothing that has made me consider switching. We evaluated a few different libraries before choosing it.
I can't speak for performance really because we don't have huge datasets. For ordinary business data (not looking at 1000s of points on a chart), it's fine.
I wish they would open source the rest of the charts. When I worked there we had some amazing visualizations that weren't included in the open source portion.
It seemed like the project went a bit dormant and Novus was not supporting it that well so a community fork [1] was made that was just recently merged back in [2]. I have seen the support uptick (though a tiny issue I made was closed while still wrong before I made a PR [3]).
I've been looking for a chart library to display timeseries graphs and integrate well with react. The best one I found so far is react-d3. Unfortunately, it's still somewhat awkward.
Shameless plug: you may want to have a look at my library https://github.com/andreaferretti/paths-js which is made for exactly this purpose. My frustration was that D3 wants to have control over the DOM, but most frameworks let you write components in a declarative style using templates or databinding. So I started paths-js , which takes the data as input and provides an abstract description of the graph as output, that you can then use in your framework to provide rendering. One of the demos that you find on the page I linked is actually made with React
Dygraphs (http://dygraphs.com/) has treated me well in the past. No dependencies, tiny library, handles millions of points, and it's html5 canvas based.
This. I've seen developers try to do all these crazy client-side optimizations hoping it will make the graph drawing faster, when all they have to do is sample the data in the server. You don't need an array of 1 million data points to visualize the general sample.
While we're on the topic, I'm beginning with js with a goal to create some materials for maths classes. Which library would let me do, for example, graphs of quadratic, cubic functions AND possibly drag/move the line to see how the equation translates? Thank you
If you want to create class material, have a look at http://challengeu.com - they've built an entire service around providing a platform for teachers to share content. It's pretty cool! (Disclaimer: I used to work with them)
That tells you everything you need to know about Javascript/browser graphics for data science. A. The DOM cannot handle as many nodes as are needed for large datasets and/or B. even with Canvas/webgl etc the browser platform itself chokes on dataset sizes much bigger than 1/2 gig (ie, "small" data). So Javascript is fantastic for explanatory graphics, but forget about exploration.
Completely agreed. Problem is while you're exploring to find the correct dimensional reduction / chuckout strategy, you're typically rapidly scanning through lots of scatter plots / density plots / whatever in grids and my experience is that the browser and javascript don't cut it here for reasons of throughput. If it's not the DOM that's blocking things, it's the commmunication channel to the browser that is too slow, and you can't dump all your data into the browser to avoid the communication slowness, because it then chokes. Chrome will barely allow a JS object a mere gig in size. Firefox dies well before that. This is not to say that we're not moving in the right direction on javascript/browser-based exploration, just that for now it's premature. BTW I'm succesfully using Jupyter (ipython notebook) as a hybrid solution. Bit of a best of both worlds. But then we're no longer talking JS for the graphics.
Our JS lib (not listed here) outperforms best-of-class native. We basically connect your browser's GPU to a GPU cluster in the cloud, but the data analyst doesn't care. We focus on real-time interactions with big graphs (e.g., connecting to your spark cluster) and include intensive visual computations like real-time edge bundling. We previously applied the same techniques to big time series (horizon) and treemaps.
Happy to chat more if relevant. You can see a bit at graphistry.com .
I can vouch for that. I have been using FusionCharts[1] for some years now and I have never faced any browser compatibility issues. But I can understand Cyph0n sentiment here. It's amazing that they still support IE6+.
Same. Before I found Highcharts, I'd switch between a few different graphing libraries, based on the needs of the project. I'd always find that each graphing library had its own set of limitations - there'd always be something it couldn't do (besides D3, where you can do basically anything - it's just quite complicated).
Highcharts was the first library I found where, even when I assumed what I wanted to do would be impossible, it could do anything I threw at it. The number of settings and formatting options is incredible. Such a fantastic library.
(By the way, for maps, there's Highmaps. It's an additional license fee but it integrates nicely and provides a bunch of cool choropleth map features, etc).
How so? It's less than $400 for an unlimited use single developer license without support. That doesn't seem very expensive for a good product that saves time and helps productivity. I'm sure they might offer discounts if you contact them about the startup situation.
It's 90$ for a single web page that's not considered a web application, which has a dubious definition "A web application is a website that has customer specific data or charges for its use."
Most tech startups probably aren't going to meet that definition. It looks like a 1-developer license for a typical SaaS offering is going to run you $390. Five developers is $1500.
Highcharts is beautiful but it's quite expensive for a startup in my country (VN). While the budget for a nascent webapp is around $1000. I choose Flot as the replacement. It's flexible and nice enough with responsive layout, compound charts, clearly script.
The only downside I dislike about flot is that it depends on JQuery. As I otherwise don't rely on JQuery at all, it means another ~80kb of additional JS code. Beside that, flot seem to be a very good free alternative.
I started out with flot after noticing the high cost of Highcharts. But now have been switching out flot with dimple.js and d3.js. The charts are much better with dimple/d3.
Interesting. I considered graph libs based on-top of D3. But D3 is equally big in JS file size to JQuery. And SVG wasn't supported in older Android (2.3) and slower in Firefox and Chrome 3 years ago. So flot with its Canvas rendering "won" in the end.
I tend to always go with FusionCharts[1]. And AFAIK, it offers way more charts and maps than any other library out there. 90+ chart types and 965 maps last time I checked.
It's extremely customisable and has tons of readymade fiddles[2] and business dashboards[3] for inspiration(ready copy). I recently used full code of one of their dashboards for my project. I've never failed to convert my designer's or PM's concept into exact same working code with FusionCharts. Highly recommended.
Interestingly enough, I had a problem with ChartJS that no one seemed to be able to remedy. It was quite bizarre and at first seemed to be a cross browser issue, but after further investigation it seemed to just be some type of strange cross-machine issue. See it here http://stackoverflow.com/questions/30063762/side-effects-fro...
Given that, I had to do some hacky stuff upon every refresh. Instead of using destroy() on the canvas, I had to remove the Canvas DOM object itself, building it back up, and inserting it again. Because of this I am a bit skeptical about using ChartJS again, which is unfortunate because I do love their Charts. I feel like maybe SVG might be the better way to go for analytics.
hey nirkalimi, I'm one of the maintainers of Chart.js. I know of a previous issue where the behaviour you described occurred on devices with window.devicePixelRatio greater than 1. Your JS fiddle didn't reproduce on my machine and it appears to use v1.0.1 which was the version that fixed the bug with devicePixelRatio. Calling destroy() on the chart object should be enough to reset the canvas to it's original state. If you'd like, file an issue on github and I can have a more detailed look.
Why do say it's a relatively small field? Outside of mobile, the desktop web is the front end target in all of computing these days, and JS is the only reasonable way to write for it.
And we already do that in other domains, e.g. NumPy covers most people Python number crunching use cases, Cocoa covers 95% of OS X people UI use cases, etc, MySQL and PostgreSQL cover 80% of the web app db use cases, Rails covers 90% of Ruby's webapp uses cases, Django and Flask do the same for Python, etc...
You might want to rephrase it to "Graph drawing" because there is the graph data structure and I thought that this link was about graphs. It might be just me but I can imagine people getting confused by the title.
As someone who works in that field, to me "graph drawing" relates even more to drawing and arranging mathematical graphs of nodes and edges (called networks on that site); the conference on that is called Graph Drawing, too. It's also a frequent confusion of potential customers who ask us whether our library handles line and bar "graphs" ...
Are any of these charting solutions being actively used in a cacti-like application? I feel like with how old the RRD technology is, something would have replaced it by now.
negative filters might be useful too. i.e. non-jQuery non-d3, or at least make selecting multiple dependencies show the union of both sets, rather than the empty intersection.
116 comments
[ 8.5 ms ] story [ 192 ms ] threadhttp://d3js.org/
It's pretty quick to get up and running with it, you can always get access to the underlying d3 selections to do more complicated operations, and the main developer is fairly accessible through stackoverflow questions or github questions. There are some gotchas I've run into but nothing that has made me consider switching. We evaluated a few different libraries before choosing it.
I can't speak for performance really because we don't have huge datasets. For ordinary business data (not looking at 1000s of points on a chart), it's fine.
1 - https://github.com/nvd3-community/nvd3 2 - https://github.com/novus/nvd3/releases/tag/v1.7.1 3 - https://github.com/novus/nvd3/issues/1033
I am using that for a dashboard and fixing the problems as they come.
I'll push a new version soon that incorporates some of the issues mentioned on github and animations.
Anyway good luck with your project!
That's also the easiest way to get good performance for realtime, high-volume graphing.
Btw, I love the animations for the filtering, the way the items contract and rearrange themselves. What did you use for this?
Sigma and Dygraphs
I wrote up a Newton's Method example a few years ago and it still holds up well: http://www.programmingmath.com/
That tells you everything you need to know about Javascript/browser graphics for data science. A. The DOM cannot handle as many nodes as are needed for large datasets and/or B. even with Canvas/webgl etc the browser platform itself chokes on dataset sizes much bigger than 1/2 gig (ie, "small" data). So Javascript is fantastic for explanatory graphics, but forget about exploration.
Happy to chat more if relevant. You can see a bit at graphistry.com .
[1] http://www.fusioncharts.com/
XChats -> XCharts
Fit all the case (except map maybe) and flexible enough to let you change everything if you or your designer want something very specific !
Highcharts was the first library I found where, even when I assumed what I wanted to do would be impossible, it could do anything I threw at it. The number of settings and formatting options is incredible. Such a fantastic library.
(By the way, for maps, there's Highmaps. It's an additional license fee but it integrates nicely and provides a bunch of cool choropleth map features, etc).
The only downside I dislike about flot is that it depends on JQuery. As I otherwise don't rely on JQuery at all, it means another ~80kb of additional JS code. Beside that, flot seem to be a very good free alternative.
It's extremely customisable and has tons of readymade fiddles[2] and business dashboards[3] for inspiration(ready copy). I recently used full code of one of their dashboards for my project. I've never failed to convert my designer's or PM's concept into exact same working code with FusionCharts. Highly recommended.
[1] http://www.fusioncharts.com/
[2] http://www.fusioncharts.com/javascript-chart-fiddles/
[3] http://www.fusioncharts.com/dashboards/
http://www.fusioncharts.com/charts/
http://www.fusioncharts.com/dashboards/
Given that, I had to do some hacky stuff upon every refresh. Instead of using destroy() on the canvas, I had to remove the Canvas DOM object itself, building it back up, and inserting it again. Because of this I am a bit skeptical about using ChartJS again, which is unfortunate because I do love their Charts. I feel like maybe SVG might be the better way to go for analytics.
Wikipedia has a comparison matrix of 37 different libraries. http://en.wikipedia.org/wiki/Comparison_of_JavaScript_charti...
Here is a list describing briefly at least 50 libraries: http://techslides.com/50-javascript-charting-and-graphics-li...
And we already do that in other domains, e.g. NumPy covers most people Python number crunching use cases, Cocoa covers 95% of OS X people UI use cases, etc, MySQL and PostgreSQL cover 80% of the web app db use cases, Rails covers 90% of Ruby's webapp uses cases, Django and Flask do the same for Python, etc...
<xkcd>There are now 38 different libraries</xkcd>