Hi! I'm Nicolas and I'm interested in information visualization, JavaScript and web standards.
I currently work as a Data Visualization Scientist at Twitter. I wrote PhiloGL, the JavaScript InfoVis Toolkit and V8-GL.
Doctor Who villains from 1963 to 2010 visualized
Posted in:
javascript infovis toolkit
, demo
, visualization
While browsing the internet I got to the Guardian's Datablog, a blog that gathers interesting information and datasets to explore and make visualizations. Latest post was about Every Doctor Who villain since 1963. There's information about each villain's first and last year of appearance, their motivation/evil plan, the name of the actors who played the role of Doctor Who while that villain was making an appearance, the title of the stories where that villain was in, etc.
I created a "dynamic" TreeMap visualization with that data. Here's a short screencast I made explaining the TreeMap functionalities (I have a horrible english accent... I know). You can also play with the demo here.
The Code
For this example I used a special build of the Toolkit which is currently hosted at GitHub. The TreeMap example code looks just like the TreeMap demos code but I also added an onBeforeCompute callback that checks for the Doctor Actor Name and Villain Motivation filters to fade nodes respectively:onBeforeCompute: function() {
tm.graph.eachNode(function(n) {
var prev = false;
if(n.data.motivations) {
prev = true;
if(motivation != 'All'
&& n.data.motivations.indexOf(motivation) == -1) {
n.setData('alpha', 0, 'end');
n.ignore = true;
} else {
n.setData('alpha', 1, 'end');
delete n.ignore;
}
}
if(n.data.doctorActorNames) {
if(doctorName != 'All'
&& n.data.doctorActorNames.indexOf(doctorName) == -1) {
n.setData('alpha', 0, 'end');
n.ignore = true;
} else if(!prev) {
n.setData('alpha', 1, 'end');
delete n.ignore;
}
}
});
},anchors.addEvent('click', function(e) {
doctorName = this.innerHTML;
tm.compute('end');
tm.fx.animate({
modes: {
position: 'linear',
'node-property': ['alpha', 'width', 'height']
},
duration: 1000,
fps: 50,
transition: $jit.Trans.Quart.easeInOut
});
});