Vis.js: A Visual Interaction System | Hacker News Reader

Vis.js: A Visual Interaction System

visjs.org

197 pointsBKCandace53 comments

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:

https://developer.github.com/v3/search/

Here's a good non-exhaustive list of JS visualization libraries:

http://selection.datavisualization.ch/

Thanks! That site is helpful. The UI looks great, and would be even better if it had GitHub fork and star data.

unheap.com is pretty good.

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

Latest version, if someone have interest on it : http://zardoz84.bitbucket.org/example/poli/index.html

What are the supported browsers?

Would be good if I could easily find that info somewhere on the site

Agreed. Or at least a description of what technologies are used (e.g. Canvas, SVG, VML, etc).

We currently use Canvas for the graph and HTML DOM for the timeline. As for browser support, see my post in reply to the post you replied to :).

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.

I love these network diagrams...but I've never seen anyone actually use them!

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.

Care to elaborate?

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!

Thanks for pointing this out, great to see interest in the library.

I've been developing this library for a couple of years now, and since a couple of months working on it together with another colleague.

Guys feel free to share ideas and code to improve the library and make it even better, check it out on Github.

what is the github link?

https://github.com/almende/vis

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!

Two sections that are required in every good readme: "Prior Art" and "Why".

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.

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.

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!

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.

Looks nice. Demos should be styled to support higher resolution displays, though (looks "pixely", if this can be a word, on retina display).

Yeah, on my rMBP the timeline examples look fine, but the graph examples are distractingly blurry.

I look forward to a day when all of these high PPI growing pains are behind us.

The animation (dragging, panning and zooming) is smooth, that's really good! Can one put html formatting into the graph nodes?

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.

I was learning about directed graphs and recursive searches in PostgreSQL and this library helped me visualize my data.

Wow I needed this library about 3 weeks ago! Anyone know else know of any alternatives?

I may be missing something but it seems to be going for the same space as the popular D3.js library: http://d3js.org

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

http://trifacta.github.io/vega/ http://sigmajs.org/

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.

I can't seem to be able to find good examples of kinectJS in action. Could you please point me to some solid examples or in-depth tutorials?

Try the "Labs" link on the front page. There are multiple pages — that's a bit hard to see.

http://www.html5canvastutorials.com/category/labs/

Unless that's specifically what you're dissatisfied with.

I think what's confusing me the most is I'm not quite sure how or what "html5canvastutorials" has to do with KinectJS.

But thanks for the link, I'll go about giving it another try :)

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.

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.

I'd argue that much of D3's power comes not from the update pattern for DOM elements, but the reusable components pattern.

http://bost.ocks.org/mike/chart/

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.

Nice, I like the simple layout, but maybe the formatting could be a little smaller?

Nice, though when I test the examples (edit items [1]), I would expect better than confirm/alert usage.

1. http://visjs.org/examples/timeline/08_edit_items.html

What's wrong with confirm/alert? It's built into javascript, mobile friendly, and a lot less buggy than most libraries.

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.

It's just an example to illustrate the callback functionality. The focus is on the visualization part, not the popup.

is this library independent of d3.js ?

Yes it is. It uses canvas and HTML DOM manipulation without using plugins like d3.

Really good!

Reply on news.ycombinator.com