
Vis.js: A Visual Interaction System - BKCandace
http://visjs.org/
======
murtza
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/](https://developer.github.com/v3/search/)

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

[http://selection.datavisualization.ch/](http://selection.datavisualization.ch/)

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

------
Zardoz84
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_...](http://elgreco.digibis.com/en/musobjects/timeline.html?busq_concept=53)

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

------
mkoryak
What are the supported browsers?

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

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

~~~
alexdm0
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 :).

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

~~~
sthlm
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.

------
zo1
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.

------
jebblue
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.

~~~
gdubs
Care to elaborate?

------
MrQuincle
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!

~~~
josdejong
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.

~~~
dmvaldman
what is the github link?

~~~
alexdm0
[https://github.com/almende/vis](https://github.com/almende/vis)

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

------
mopierotti
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.

~~~
CGamesPlay
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.

------
kalasoo
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.

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

~~~
netnichols
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.

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

~~~
alexdm0
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.

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

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

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

~~~
reverius42
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://trifacta.github.io/vega/)
[http://sigmajs.org/](http://sigmajs.org/)

~~~
bunkat
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](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).

~~~
cls59
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.

~~~
oscilloscope
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/](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!

~~~
cls59
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.

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

------
tzury
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](http://visjs.org/examples/timeline/08_edit_items.html)

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

~~~
TuringTest
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.

------
mrcactu5
is this library independent of d3.js ?

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

------
kitd
Really good!

