javascript – Parerga und Paralipomena

Messing around wih D3.js and hierarchical data

mikele — Fri, 21 Jun 2013 13:23:59 +0000

These days there are a lot of browser-oriented visualization toolkits, such d3.js or jit.js. They’re great and easy to use, but how much do they scale when used with medium-large or very large datasets?

The subject ontology is a quite large (~2500 entities) taxonomical classification developed at Nature Publishing Group in order to classify scientific publications. The taxonomy is publicly available on data.nature.com, and is being encoded using the SKOS RDF vocabulary.

In order to evaluate the scalability of various javascript tree visualizations I extracted a JSON version of the subject taxonomy and tried to render it on a webpage, using out-of-the-box some of the viz approaches made available; here are the results (ps: I added the option of selecting how many levels of the tree can be visualized, just to get an idea of when a viz breaks).

Some conclusions:

The subject taxonomy actually is a poly-hierarchy (=one term can have more than one parent, so really it’s more like a directed graph). None of the libraries could handle that properly, but maybe that’s not really a limitation cause they are meant to support the visualization of trees (maybe I should play around more with force-directed graphs layout and the like..)

The only viz that could handle all of the terms in the taxonomy is D3’s collapsible tree. Still, you don’t want to keep all the branches open at the same time! Click on the image to see it with your eyes.

An approach to deal with large quantities of data is obviously to show them a little bit at a time. The Bar Hierarchy seems a pretty good way to do that, it’s informative and responsive. However it’d be nice to integrate with other controls/visual cues that would tell one what level of depth they’re currently looking at, which siblings are available etc.. etc..

Partition tables also looks pretty good in providing a visual summary of the categories available; however they tend to fail quickly when there are too many nodes, and the text is often not readable at all.. in the example below I had to include only the first 3 levels of the taxonomy for it to be loaded properly!

Rotating tree. Essentially a Tree plotted on a circle, very useful to provide a graphical overview of the data but it tends to become non responsive quickly.

Hierarchical pie chart. A pie chart that allows zooming in so to reveal hierarchical relationships (often also called Zoomable Sunburst). Quite nice and responsive, also with a large amount of data. The absence of labels could be a limiting feature though; you get a nice overview of the datascape but can’t really understand the meaning of each element unless you mouse over it.

Other stuff out there that could do a better job?

Raphael: js library for Scalar Vector Graphics

mikele — Sun, 19 Sep 2010 22:32:57 +0000

I don’t do much (web) front-end design usually, although often I find it vital to visualize my ideas using some sort of basic but functional UI-kit. Well, if you’re like me, you’ll probably be happy to know about Raphael. This is a javascript library that sits on top of the SVG specifications and provides a set of (very straighforward) APIs for creating vector graphics and animations in most browsers.

Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for describing two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated).
The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. Since they are XML files, SVG images can be created and edited with any text editor, but specialized SVG-based drawing programs are also available.

Writing SVG stuff can be very painful, but using Raphael it almost becomes fun. The official site gives you various examples (eg check out the slick polar clock, or the diagram elements), and code that shows how easy it is to get started:

Looking forward to spend more time on this. For now, I’ve just collected a few good learning resources about it, which I thought I’d share:

The official homepage, which contains various examples and all the documentation

An Introduction to the Raphael JS Library: a nice blog post that shows how to build a little mood meter from the ground up

Another blog post showing how to create a typical “progress throbber”, as seen in Apple interfaces, with a few lines of code

Raphael Live: a simulator of the js library, for testing your code easily within a browser’s window

Lots of categorized raphael examples at www.irunmywebsite.com

An interesting discussion about the advantages of Raphael vs jQuery SVG (also, make sure you check out all the questions tagged ‘raphael’ at stackoverflow)

Below, some screenshots of a fancy clock, a tiger, and a graph, all built entirely via Raphael.

Processing.js, iProcessing: javascript does everything for you!

mikele — Thu, 18 Feb 2010 15:26:09 +0000

First off – check out how cool is the little game below. It’s been implemented with processing.js, a port of the famous processing library that works in your browser only through javascript (the original processing is java-based).

What is processing?

The Processing language was created by Ben Fry and Casey Reas. It evolved from ideas explored in the Aesthetics and Computation Group at the MIT Media Lab and was originally intended to be used in a Java run-time environment. In the Summer of 2008, John Resig ( inventor of jQuery ), ported the 2D context of Processing to Javascript for use in web pages.

Mmm how about processing.js then?

Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.

Processing.js is explicitly developed for browsers that support the HTML5

There’s more: some people in London created iProcessing, which lets you develop iPhone apps without touching objC (at least, that’s what they say). Seems a bit of a revolution to me…

iProcessing is an open programming framework to help people develop native iPhone applications using the Processing language. It is an integration of the Processing.js library and a Javascript application framework for iPhone. The iProcessing downloadconsists of a set of example XCode projects that demonstrate many of the Basic Examples from the Processing web site (originally written by Casey Reas and Ben Fry unless otherwise stated) as well a number that demonstrate the use of various iPhone features such as multitouch, accelerometer, orientation, location, sound play/record, app state saving and so on.

A bookmarklet for searching delicious

mikele — Tue, 05 Jan 2010 23:02:29 +0000

This has been long overdue for me. A way to quickly search delicious.com without relying on third-party apps (which often you have to pay for). And it’s got to be super simple too: something like a bookmarklet that you click on and then takes you there. Just one of those things you never have the time to do….

So today I got around doing it. I didn’t know much about bookmarklets but a few google searches gave me all I needed. These are a few links I found useful while working on this little thing:

What are bookmarklets?

bookmarklets.com

Various search bookmarklets you can easily reverse-engineer

a perl script that makes any javascript code ready for being used as a bookmarklet

Essentially bookmarklets are javascript code formatted in a browser-friendly syntax, that is, by url-escaping all of its characters.
So I set off to create a bookmarklet for opening delicious at a specific tag-page. This button will take whatever you have highlighted on the web page and search for that string on delicious as a tag (not as a search string! but obviously you can modify that). If you have nothing selected the script should ask the user for a value to use.

The bookmarklet would look something like the following:
search on delicious

Mind that the bookmarklet above won’t work if you drag it to your browser button-bar, ’cause WordPress stripped off its behaviour (for security reasons I suppose). Too bad – you can easily recreate it yourself.
The source code was something like this (note that it should be all on a single line,):


search on delicious

The script above worked for me on Apple’s Safari – the only other thing I had to do was url-escaping it. Thus the code would look as follows (again, make sure it is on a single line):


javascript:q%20=%20%22%22%20+%20(window.getSelection%20?%20window.getSelection()%20:%20document.getSelection%20?%20document.getSelection()%20:%20document.selection.createRange().text);%20if%20(!q)%20q%20=%20prompt(%22You%20didn't%20select%20any%20text.%20%20Enter%20a%20search%20phrase:%22,%20%22%22);%20if%20(q!=null)%20location=%22http://delicious.com/tag/%22%20+%20escape(q).replace(/%20/g,%20%22+%22);%20void%200

You can paste the code above onto a browser’s url bar to test it :-).

But if you want to save it as a bookmarklet do the following: copy this code, open up the ‘Show all Bookmarks’ window on Safari and create a new bookmark named ‘delicious search’ (or anything else), right click on the newly created bookmark and hit the ‘edit address’ command. Finally, in the address field paste the code you have copied and you’re ready to go!

That’s it!
Last thing: you might want to search only through your personal tags on delicious (that’s what I do most of the time). All you have to do is modify the search string by replacing the ‘/tag/’ ending with ‘/username/’, where ‘username’ is your delicious username.. that’s the standard url format delicious.com accepts for searching personal tags. So:


javascript:q%20=%20%22%22%20+%20(window.getSelection%20?%20window.getSelection()%20:%20document.getSelection%20?%20document.getSelection()%20:%20document.selection.createRange().text);%20if%20(!q)%20q%20=%20prompt(%22You%20didn't%20select%20any%20text.%20%20Enter%20a%20search%20phrase:%22,%20%22%22);%20if%20(q!=null)%20location=%22http://delicious.com/YOUR-USERNAME/%22%20+%20escape(q).replace(/%20/g,%20%22+%22);%20void%200

In conclusion, using the same approach you can create bookmarklets of all sorts!

…

Document.designMode trick..

mikele — Wed, 05 Aug 2009 14:08:25 +0000

Here’s a neat trick I got from my friend Geoffroy: open up your preferred Javascript console and type in this command:


document.designMode='on'

Et voila’: your page is directly editable in your browser! Useful for quick visual testing/modifications when giving a demo, for example….

SoundManager 2 makes it easier to play sounds using Javascript

mikele — Thu, 07 May 2009 10:26:57 +0000

By wrapping and extending Flash 8’s sound API, SoundManager 2 brings solid audio functionality to Javascript.

Basic API Features (Flash 8 )

Load, stop, play, pause, mute, seek, pan and volume control of sounds from Javascript
Events: onload, whileloading, whileplaying, onfinish and more
ID3V1 and ID3V2 tag support for MP3s (title, artist, genre etc.)

Shiny Flash 9 Features

Full-screen MPEG-4 video (HE-AAC/H.264) and audio support
“MultiShot” play (layered/chorusing effects)
Waveform/frequency spectrum data
Peak (L/R channel volume) data
Audio buffering state/event handling

Jquery library gets me going

mikele — Mon, 12 Feb 2007 15:42:25 +0000

Following suggestions which turned out to be really good, I’ve found myself having a lot of fun with the JQuery library. It’s immensely easy to use, and beautiful to see its results. Plenty of tutorials around, and people developing widgets. Have a look at the interface elements, for example. Or at the cool fisheye menu..or the handy TreeView.

And I also have a first screenshot of the PhiloSurfical system!!