Does anybody know of a site that keep tracks of all these JavaScript visualization libraries, or JavaScript libraries in general?
There are lot of great JS libraries, but it is difficult to keep track. I would like a resource for JavaScript libraries like ruby-toolbox.com is for gems.
If somebody has the time, the data could be pulled with GitHub's search API:
Dammit... other visualization library that handles timelines.. this makes me to feel a bit useless.
I keep working some months in a JS library to create and visualize TimeLines : (old version) http://elgreco.digibis.com/en/musobjects/timeline.html?busq_...
Wow, not useless at all -- that is really well done. I'm working on a similar "all about" site for Shakespeare, in which I've struggled to make a clear and usable timeline. This is a really helpful model.
Is there a way I can contact you at some point. I'll be doing a "soft launch" later this month and wanted to start with smart people :)
Hi, we are targetting chrome, firefox, internet explorer, safari and mobile. There are some issues in andriod browser and safari has a slow javascript implementation. We try to make it fast and available on the bigger browsers.
Graphs are a poor visual representation for a lot of data sets. In cases where they provide significant benefits (think maps, dependency structures, routing), graph layouts are hard problems.
Generic algorithms are great for large networks but computationally intensive. Small network diagrams with an explicit message often have to be manually curated to make sense.
That said, this is a great library, especially since it works so well in the browser. I'm looking forward to future development.
Amazing... And very smooth! In one of the graph examples, I plugged in 500 nodes, thinking it would crash. But it failed very gracefully, and simply "slowed" things down instead of jittering into oblivion.
Some of those examples might violate one or more Xerox patents, just as an FYI. I do think this is pretty cool though, shows some interesting JavaScript uses.
I will direct my colleagues, who created this library, to this thread to answer your questions. You won't get much help from me, my expertise is C++ and robotics. :-)
It's nice to see that our policy of creating open-source software is starting to pay off. It's sometimes quite hard to gather interest from the wider internet population!
It's great to see the interest in the libary! I'm currently working with josdejong to improve the vis.js library. I'll try to answer most questions here. If there's anything else, feel free to ask us on github!
Does anyone know why most graph libraries that I see of this type have nodes that seem to bounce all over the place? Is there a practical motivation for this? I would think a less animated version would be more usable.
The computation of the physics simulation (applying forces between nodes, ending once it finds a local minimum) is an intensive process. You could do it all at once but it would probably hang your page for a meaningful time. You could also reduce the framerate or only show the results at the first an final frames, but those also have user interface implications.
CGamesPlay and TuringTest are both right, the gravity and springs model allows us to neatly show the data. These calculations take time and for bigger systems one might have to wait tens of seconds for it to settle. For smaller systems it's perfectly feasible to do this before rendering. To make sure the user sees a result instantly and to promote the interactivity the movement is shown.
I'd like to add that vis allows you to store the positions and use these for the next time someone views the graph. That way it may take some time to settle initially but is loaded nearly instantly the next time you, or another user, views it!
Also, in graphs on random data, using strength on the strings between nodes to separate them is an automatic way to create a layout where all nodes can be seen.
I have been searching for such a library for quite a long time. It looks very neat. I really like the idea of DataView on top of a DataSet as it can be used to define different perspectives of the data.
Hi, I'm the colleague josdejong mentioned and I've been maintaining and developing the Graph module. The module is currently in canvas so you cannot put HTML formatting in the nodes. There are a variety of shaped and formatting you can use to customize it though.
d3.js doesn't target <canvas> (it renders to <svg>) so graph drawing can be pretty slow. Some more alternatives for this scenario (both of which handle fast drawing to <canvas>:
This is definitely incorrect. You can use d3.js to target svg, canvas, html, or any other data format that you want. Check out http://bl.ocks.org/mbostock/2647922 for a canvas based example.
I've actually built very similar graphs to the examples shown in vis.js with d3.js. I was a bit surprised that it wasn't just a wrapper library on top of d3.js (plenty of those exist to make working with d3 a little easier).
You can target canvas with d3, but you loose much of the abstraction that makes d3 powerful. For example, look at all of the low-level canvas rendering code that is used. Not as powerful as visualizations driven by chaining .data().enter().append().attr() which can easily be re-shaped by swapping html tags and CSS attributes.
d3 really is a three-legged stool of HTML, JS and CSS. When targeting <canvas>, you loose both HTML and CSS and thus much of the power.
EDIT: I should clarify that I'm thinking of HTML in an abstract sense that also includes SVG. By hooking into the DOM, d3 gets a free scenegraph that makes it easy to modify the components of the visualization without writing low-level code.
Examples in the core library, all compatible with Canvas, include scales, layouts, geographic projections, time/color utilities, CSV/TSV loading, and behaviors (drag/zoom/etc). There's some built-in canvas rendering like d3.geo.path which can be provided a canvas context.
The only things you lose are selections and the convenient transitions that go along with selections. But you can use these to modify and transition the canvas elements themselves!
In most cases you also loose the ability to specify graphic components declaratively through .append() and .attr(). Instead, you must imperatively specify how to produce the drawing from the data by manipulating the canvas context.
I have use d3 to create composite graphics that included elements rendered to canvas and it certainly is powerful. But, I still believe that the sweet spot of the library requires being able to work with the DOM and CSS.
To add to the list - I recently used http://kineticjs.com for a data vis project involving some massive amounts of data in the browser and was very impressed at its performance and ease of use.
Sorry for not getting back to you sooner, but that's the link I'd suggest too. The "html5canvastutorials" site is made by the same guy who made Kinetic so I think he was just trying to fill it out with some more content :)
PS: It's Kinetic, not Kinect, that might be screwing up your googling!
I didn't think d3 targets anything in particular (from memory the tutorial uses divs to draw a histogram), a google search turns up a number of d3 canvas examples.
It's modal, so it blocks the entire browser until the dialog is dismissed. That's terrible interaction design, except for actions that would melt your computer.
I understand that the library focus is on visualization and not on realistic and usable examples; I put the blame on browser implementors - they should have fixed that problem years ago, instead of relying on developers to do the right thing.
Edit - Update: I've tried it on Firefox and it does the right thing, blocking only the current tab; blocking the whole application must be a Chrome-only thing.
There are lot of great JS libraries, but it is difficult to keep track. I would like a resource for JavaScript libraries like ruby-toolbox.com is for gems.
If somebody has the time, the data could be pulled with GitHub's search API:
https://developer.github.com/v3/search/