News Context Monitor
by Arpit Agrawal
HTML
<div id='newscontext'></div>
JavaScript
paper = Raphael('newscontext', 600, 800);
function draw_macro_context(r, x, y, title, micros) {
var c = paper.circle(x, y, r).attr({
fill: '#4572a7',
stroke: '#4572a7',
'stroke-width': 5,
'cursor': 'pointer'
});
c.is_selected = false;
paper.text(x, y, title);
angle = -110;
r1 = 25
var joiners = [];
var microtext = [];
for (micro in micros) {
x1 = x + (r + r1 + 20) * Math.cos(Raphael.rad(angle));
y1 = y + (r + r1 + 20) * Math.sin(Raphael.rad(angle));
var mymicro = paper.circle(x1, y1, r1).attr({
stroke: '#E0B21B',
fill: '#E0B21B',
'stroke-width': 2,
'cursor': 'pointer'
});
mymicro.macro = c;
mymicro.angle = angle;
mymicro.is_selected = false;
/* now adding text */
var mytxt = paper.text(x1, y1, micro);
mytxt.hide()
/* now drawing connectors */
var px1 = x + r * Math.cos(Raphael.rad(angle));
var py1 = y + r * Math.sin(Raphael.rad(angle));
var px2 = x + (r + 20) * Math.cos(Raphael.rad(angle));
var py2 = y + (r + 20) * Math.sin(Raphael.rad(angle));
var myjoiner = paper.path([
['M', px1, py1],
['L', px2, py2]
]).attr({
'stroke-width': 2
});
myjoiner.hide();
joiners.push(myjoiner);
microtext.push(mytxt);
/* drawing pink circles for keywords */
mymicro.keyword_connectors = [];
mymicro.keyword_circles = [];
if (micros[micro].length) {
var keyword_angle = -30;
var angle_step = 90 / micros[micro].length; //hardcoding 90 degree max span
var r2 = 20; //hardcoding the radius of the keyword balls
for (keyword in micros[micro]) {
x1_ = x + (r + 2 * r1 + 20) * Math.cos(Raphael.rad(this.angle));
y1_ = y + (r + 2 * r1 + 20) *...