World Population Density Map: jsDraw2D SVG Javascript Library Example

Source Code:

//Define graphics
var graphicsDiv=document.getElementById("graphics");
var gr = new jxGraphics(graphicsDiv);

//Define drawing pen/brush/font
var brushInfo = new jxBrush(new jxColor('#008B8B'));
var penBorder = new jxPen(new jxColor('gray'), 1);
var font = new jxFont();
font.size = '8pt';

graphicsDiv.onmousemove = getMouseXY;
var mouseX = 0, mouseY = 0;

//Info box
var infoBox = new jxRect(null, 160, 50, new jxPen(new jxColor('#008B8B'), 1), new jxBrush(new jxColor('white')));
var countryText = new jxText(null, null, font); countryText.brush = brushInfo;
var popText = new jxText(null, null, font); popText.brush = brushInfo;

//Background
var bg = new jxRect(new jxPoint(0, 0), 1120, 470, penBorder, new jxBrush(new jxColor('#ADD8E6')));
bg.draw(gr);
var title = new jxText(new jxPoint(10, 20), 'World Population Density Map', font, null, new jxBrush(new jxColor('black')));
title.draw(gr); 

//Draw country border and fill color as per population density
//countriesData variable is from countriesData.js file
for (var i in countriesData) {
    var country = countriesData[i];
    for (var j in country.border) {
        var border = country.border[j];
        var points = new Array(); 
        for (var k in border) {
            var vertex = border[k];
            points[points.length]=new jxPoint(vertex[0], vertex[1]);
        }
        var f =Math.round(480 -country.population*480/300);
        if (f > 255) {
            if (f > 511)
                greenShade = new jxColor(255, 255, 255);
            else
                greenShade = new jxColor(f - 255, 255, f - 255);
        }
        else {
            if(f<36)
                greenShade = new jxColor(0, 35, 0);
            else
                greenShade = new jxColor(0, f, 0);
        }

        var polygon = new jxPolygon(points, penBorder, new jxBrush(greenShade));
        
        //Handle mouse events to show information
        polygon.addEventListener('mousemove', showInfo)
        polygon.addEventListener('mouseout', hideInfo)
        polygon.country = country.name;
        polygon.population = country.population;
        
        polygon.draw(gr);
    }
}

//Display information box
function showInfo(evt, obj) {
    penBorder.width = 2;
    obj.draw(gr);

    infoBox.point = new jxPoint(mouseX+5, mouseY+5);
    countryText.point = new jxPoint(mouseX +15, mouseY + 25);
    popText.point = new jxPoint(mouseX + 15, mouseY+ 45);

    countryText.text = obj.country;
    popText.text = 'Population: ' + obj.population + ' /sqKm';
    
    infoBox.draw(gr);
    countryText.draw(gr);
    popText.draw(gr);   
}

//Hide information box
function hideInfo(evt, obj) {
    penBorder.width = 1;
    obj.draw(gr);
    
    infoBox.hide();
    countryText.hide();
    popText.hide();
}

//Get the mouse cursor  position
function getMouseXY(e) {
    if (document.all) //For IE
    {
        mouseX = event.clientX + document.body.parentElement.scrollLeft;
        mouseY = event.clientY + document.body.parentElement.scrollTop;
    } else {
        mouseX = e.pageX
        mouseY = e.pageY
    }

    if (mouseX < 0) { mouseX = 0 }
    if (mouseY < 0) { mouseY = 0 }

    mouseX = mouseX - graphicsDiv.offsetLeft;
    mouseY = mouseY - graphicsDiv.offsetTop;

    return true;
}