Join 3,432 readers in helping fund MetaFilter (Hide)


JavaScript InfoVis Toolkit
February 12, 2012 2:31 PM   Subscribe

JavaScript InfoVis Toolkit (JIT) - providing tools for creating interactive data visualizations for the web
posted by Blazecock Pileon (14 comments total) 87 users marked this as a favorite

 
It's a shame they're calling it JIT since that already has a strongly attached meaning.
posted by sbutler at 2:39 PM on February 12, 2012 [4 favorites]


This is fantastic.
posted by vanar sena at 2:44 PM on February 12, 2012


I'd also recommend checking out the D3.js project for a variety of other visualizations.
posted by jianshen at 3:03 PM on February 12, 2012 [6 favorites]


The author Nicolas Garcia Belmonte has another GL-based library called PhiloGL. It also has some rather compelling demos, such as this air route visualizer. I like this guy's style.
posted by vanar sena at 3:05 PM on February 12, 2012 [4 favorites]


Wow, if it works with impress.js (basically javascript prezi) you'd have an amazing engine for presentations.
posted by Memo at 3:21 PM on February 12, 2012 [9 favorites]


if it works with impress.js

That's pretty damn cool. Especially that trick at the end. I won't spoil it.
posted by Blazecock Pileon at 3:27 PM on February 12, 2012


The JIT is pretty cool; I used their force directed graph in a proof-of-concept where I had TCP connections and their related processes scanned on 2,000 machines simultaneously every 5 minutes, fed into an ad hoc in-memory datastore of objects and connections, and then presenting this data via a queryable web service (side note: I'm rather proud that using all homegrown code and a weekend of inspiration, I can collect in parallel across about 2,000 servers information for about 200 farms/groupings, some 70,000 services and applications, and just shy of 800,000 interconnects, then store that all in memory for a web-service that returns a filtered view of applications and their connections in under 1 second).

Anyway, with this web service, I was then able to return the data as JSON to a web page with JIT to draw it, so you can type in a machine name or IP, and dynamically see how it connects to other machines on the network with a real-time lag view of ~1-5 minutes. The nodes it connects to are then clickable to recenter/redraw the graph so you can "walk" a 'snapshot' of the lab's entire network infrastructure. Just, uh... don't click on the ones that are domain controllers. The JIT didn't handle that many connections very well... if it even renders, it just looks like a really dense Ferris wheel. :)


So I'm curious, while we're in this thread: I have long had a similar, separate scan I do daily of user's information in LDAP... including office location and reports/manager, etc. Even a thumbnail of the user's badge photo is stored in LDAP, so I happily export that as a .jpg.

I've already put that into a similar ad hoc datastore and can return all or part of the entire org chart in the JIT. However, I also have PDF floor plans for every floor of my company's 22-story building... and I was thinking, those would be easy to turn into images, normalize them to the same size, and plot their walls/corners on an x/y plane with the floor being z * arbitrary floor height in pixels. Lastly, offices and conference rooms would be tagged with an x/y/z of their location.

I'd love to have an HTML5/javascript engine for rendering a large 3d object with pan/zoom/rotate, where the object is a simple wireframe of the building I work in, and where someone could type in a name and see where that person sits, or see where a person and all their direct reports, and their reports etc, sit- so you can see how a team/group/division is spaced out.

Any suggestions? I know it's more an AskMe than a substantive comment, but since I already have the data, it'd be awesome to do a 3d render of our buliding in jscript/html5.
posted by hincandenza at 3:49 PM on February 12, 2012


hincandenza, I like the idea of using a floor plan to maintain context -- have you already created a 2d visualization of your org chart? A tree map or sun burst, perhaps?
posted by achpea at 5:19 PM on February 12, 2012


Yes, I used the JIT's spacetree view to display that as I alluded to above. What I'm looking for is a good HTML5 3D renderer (short of growing my own) to display the building as a wireframe, and show a little jpg of a user in their office with the thumbnail data. I guess if I have the x,y,z of the building, and can have the x,y,z of each user added in, I can find the mathematics for a transform library that does a 2D display of the 3D data; that's what most HTML5/javascript renderers are ultimately doing. But I'd prefer not to write my own.

Similarly, it'd be kind of cool if that problem was solved, to then do the org as a 3D pyramid structure, instead of a 2D spacetree. Seems metaphorically fitting... :)
posted by hincandenza at 5:36 PM on February 12, 2012


hincandenza: I've heard good things about three.js.
posted by zsazsa at 6:11 PM on February 12, 2012 [1 favorite]


hincandenza, could you use some web-mapping stuff for this? I just saw that openlayers can now be rendered in 3D using a browser. An alternative could be to use Raphael with the floor plans as svgs, but skewed in such a way that they look like a building in perspective.

(loving all the javascript links that people are throwing out here!)
posted by a womble is an active kind of sloth at 6:18 PM on February 12, 2012 [1 favorite]


This produces some very nice and scientifically useful graphs, much nicer than Raphael, which seems devoted to shinier but less intuitive graphs. As long as we're turning this into a linkfest, what was the last js animation post that featured swimming spermatazoa as one of the demo pages?
posted by benzenedream at 7:36 PM on February 12, 2012


Do keep those JS links coming in! I say this in all seriousness, but you guys are getting a convert out of me. :) (Impress.js in particular is jaw-dropping!)
posted by the cydonian at 7:41 PM on February 12, 2012


Ah, found the javascript spermatozoa which swim into a romantic shape when clicked (just in time for Valentine's Day). It was paperjs.
posted by benzenedream at 9:11 PM on February 12, 2012


« Older For a time in the late 19th and early 20th centuri...  |  While most couples celebrate V... Newer »


This thread has been archived and is closed to new comments