7 ms·
Vis.js: A Visual Interaction System
- tzury 12y agoNice, 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 12y agoWhat's wrong with confirm/alert? It's built into javascript, mobile friendly, and a lot less buggy than most libraries.
- TuringTest 12y agoIt'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.
- abuzzooz 12y agoIt's just an example to illustrate the callback functionality. The focus is on the visualization part, not the popup.
- Axsuul 12y agoWow I needed this library about 3 weeks ago! Anyone know else know of any alternatives?
- resu_nimda 12y agoI 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 12y agod3.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/
- dandelany 12y agoTo add to the list - I recently used http://kineticjs.com 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.
- zo1 12y agoI 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?
- dcre 12y agoTry the "Labs" link on the front page. There are multiple pages — that's a bit hard to see. http://www.html5canvastutorials.com/category/labs/ http://www.html5canvastutorials.com/category/labs/ Unless that's specifically what you're dissatisfied with.
- zo1 12y agoI 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 :)
- zo1 12y agoAmazing... 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.
- th3o6a1d 12y agoI love these network diagrams...but I've never seen anyone actually use them!
- sthlm 12y agoGraphs 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.
- mopierotti 12y agoDoes 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 12y agoThe 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.
- TuringTest 12y agoAlso, 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.
- alexdm0 12y agoCGamesPlay 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!
- mkoryak 12y agoWhat are the supported browsers? Would be good if I could easily find that info somewhere on the site
- netnichols 12y agoAgreed. Or at least a description of what technologies are used (e.g. Canvas, SVG, VML, etc).
- alexdm0 12y agoWe 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 :).
- alexdm0 12y agoHi, 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.
- murtza 12y agoDoes 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 12y agoHere's a good non-exhaustive list of JS visualization libraries: http://selection.datavisualization.ch/ http://selection.datavisualization.ch/
- murtza 12y agoThanks! That site is helpful. The UI looks great, and would be even better if it had GitHub fork and star data.
- thejosh 12y agounheap.com is pretty good.
- jebblue 12y agoSome 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 12y agoCare to elaborate?
- pauldunstone 12y agoNice, I like the simple layout, but maybe the formatting could be a little smaller?
- tsenkov 12y agoLooks nice. Demos should be styled to support higher resolution displays, though (looks "pixely", if this can be a word, on retina display).
- netnichols 12y agoYeah, 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.
- Zardoz84 12y agoDammit... 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_concept=53 http://elgreco.digibis.com/en/musobjects/timeline.html?busq_...
- gavinpc 12y agoWow, 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 :)
- Zardoz84 12y agoLatest version, if someone have interest on it : http://zardoz84.bitbucket.org/example/poli/index.html http://zardoz84.bitbucket.org/example/poli/index.html
- edwinyzh 12y agoThe animation (dragging, panning and zooming) is smooth, that's really good! Can one put html formatting into the graph nodes?
- alexdm0 12y agoHi, 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.
- kitd 12y agoReally good!
- MrQuincle 12y agoI 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 12y agoThanks 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.
- alexdm0 12y agoIt'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!
- nateabele 12y agoTwo sections that are required in every good readme: "Prior Art" and "Why".
- mercnet 12y agoI was learning about directed graphs and recursive searches in PostgreSQL and this library helped me visualize my data.
- mrcactu5 12y agois this library independent of d3.js ?
- alexdm0 12y agoYes it is. It uses canvas and HTML DOM manipulation without using plugins like d3.
- kalasoo 12y agoI 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.