Loading JSON, rendering text and using the Processing JS API
Update: The final result can now bee seen in the VizReader RSS reader, and in the end I actually used Flare instead of Processing due to performance issues, having hundreds of links display at the same time was too much for Processing.
I’ve just reached what could be called level 1 in my Processing.js explorations. I’ve managed to setup SVG fonts and load them to draw text. I’ve also managed to use Processing only through the JavaScript API, not the language itself and that is a good thing in my mind. I rather do this API style, I am for instance able to load JSON and use jQuery without any fuss this way.
The long term goal is to create a link map to show how different sites link to each other, similar to the flare dependency graph which I think looks awesome and would work with visualizing site links too.
However, we are far from there yet, as I said above, so far we’ve only managed to draw some text on the rim of a circle.
Let’s walk through the demo:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<script type="text/javascript" src="jquery.js"></script>
<!--[if IE]><script type="text/javascript" src="excanvas.pack.js"></script><![endif]-->
<title>Treeview with processing</title>
<script type="text/javascript" src="processing.min.js"></script>
</head>
<body>
<script>Note the IE and excanvas line there, it’s needed because IE doesn’t support the canvas tag yet, it’s some kind of work around I haven’t had the time or inclination to study further. We might be screwed as far as IE goes anyway since the text/font rendering won’t work anyway, as far as I know at the moment. I just tried the demo in IE6 and that sure as hell didn’t work.
var p = {};
var tview = {};
tview.data = [
{"name": "Site 1", "type": "external"},
{"name": "Site 2", "type": "internal"},
{"name": "Site 3", "type": "internal"},
{"name": "Site 4", "type": "internal"},
{"name": "Site 5", "type": "internal"}
];
tview.setup = function(){
p.size(800, 800);
p.noStroke();
p.strokeWeight(0);
var arial = p.loadFont("arial.svg");
p.textFont(arial, 14);
}
tview.draw = function(){
p.fill(0);
var radius = 350;
var pi_offset = p.TWO_PI / tview.data.length;
var angle = 0;
var c_x = 400;
var c_y = 400;
$.each(tview.data, function(i, obj){
if(obj.type == "external")
p.fill(150, 50, 50);
else
p.fill(50, 50, 150);
p.text(obj.name, c_x + radius * p.cos(angle), c_y + radius * p.sin(angle));
angle += pi_offset;
});
p.exit();
}
$(document).ready(function(){
p = Processing("treemap");
p.setup = tview.setup;
p.draw = tview.draw;
p.init();
});Let’s start from the top, tview is misleading since the layout of the visualization has changed from a tree view to a dependency graph, or maybe more correctly, a link graph. Well now you know anyway that I had in mind a tree view graph at first.
1) Tview.data is the JSON we want to use to draw our stuff. Not much to say about that yet, we’ve got the name of each site and whether it’s external or internal, internal means that it’s in my database (I’m subscribing to it), external means it’s not in the db but linked to from a site in the db.
2) We define the setup function. At this point I can’t really explain what noStroke and strokeWeight are really doing. They were there in the original example I chose to use as a template and I haven’t had the courage to remove them yet. Anyway, the loadFont call will setup our font which resides in the same folder as everything else. We set the size to 14 pixels (or is it points)?
3) Next we have the draw function, we start with fill(0) which will per default render everything in black. The radius of the circle we will be rendering our text on is set to 350 pixels. The PI offset is the angle we need to increase our angle between rendering each site, it’s just 2PI (the full 360 in radians) divided with the amount of sites we need to draw. C_x and c_y are used to pinpoint the center of our circle which will be in the middle of our canvas since it’s 800×800.
Next we loop through each site (with the help of jQuery) and render a somewhat red text for an external site and a somewhat bluish text for a internal site. Some trigonometry is used to determine the positioning of each piece of text.
4) Finally we set everything up when the document has finished loading. We assign the functions we just defined to the Processing equivalents, I learned this way of doing things from the wavetanks source.
</script>
<canvas id="treemap" width="800" height="800"></canvas>
</body>
</html>Finally the canvas tag. Stay tuned for the rest!
Related Posts
Tags: api, font, json, processing.js, text