Difference between revisions of "Map with German electoral districts"

From JSXGraph Wiki
Jump to navigationJump to search
Line 48: Line 48:
 
                     strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});
 
                     strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});
  
     JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.highlight(); /*wahlkreisNode.nodeValue=area[1];*/}, graph);
+
     JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.highlight(); wahlkreisNode.nodeValue=area[1];}, graph);
 
     JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.noHighlight();}, graph);
 
     JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.noHighlight();}, graph);
 
     graph.hasPoint = function(){return false; };
 
     graph.hasPoint = function(){return false; };
Line 77: Line 77:
 
timedChunk(points, createCurve, null, final);
 
timedChunk(points, createCurve, null, final);
 
</jsxgraph>
 
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
<source lang="xml">
 +
<div id="wahlkreis">&nbsp;</div>
 +
<jsxgraph width="500" height="700">
 +
var minX =-289319.4,
 +
    maxY = 6827620,
 +
    maxX = 351315.7,
 +
    minY = 5960587,
 +
    brd,
 +
    wahlkreisNode = document.getElementById('wahlkreis').firstChild,   
 +
    points = [],
 +
    len = data.length, // from germany.js
 +
    lastWk = null,
 +
    i, col = 0;
 +
   
 +
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[minX-1000,maxY+1000,maxX+1000,minY-1000],
 +
                                    keepaspectratio:true});
 +
 +
for(i=0;i<len;i++) {
 +
    if(i%6==1) {
 +
        lastWk = data[i];
 +
    }
 +
    else if(i%6 == 5) {
 +
        points.push([data[i],lastWk]);
 +
    }
 +
}
 +
 +
function createCurve(area)  {
 +
    var xy = area[0].split(','),
 +
        x = [], y = [],
 +
        c = [], len, i, a, graph;
 +
       
 +
    len = xy.length;
 +
    for(i=0;i<len;i++) {
 +
        a = xy[i].split(' ');
 +
        c.push(new JXG.Coords(JXG.COORDS_BY_USER, [1*a[0], 1*a[1]], brd));
 +
    }
 +
    c = brd.renderer.RamenDouglasPeuker(c,1.5);
 +
    len = c.length;
 +
    for (i=0;i<len;i++) {
 +
        x.push(c[i].usrCoords[1]);
 +
        y.push(c[i].usrCoords[2]);
 +
    }
 +
    graph = brd.createElement('curve', [x,y],
 +
                    {fillColor:JXG.hsv2rgb(col++,0.6,0.9),
 +
                    highlightFillColor:'yellow',
 +
                    strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});
 +
 +
    JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.highlight(); wahlkreisNode.nodeValue=area[1];}, graph);
 +
    JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.noHighlight();}, graph);
 +
    graph.hasPoint = function(){return false; };
 +
}
 +
 +
function final() {
 +
    brd.unsuspendUpdate();
 +
}
 +
 +
//Copyright 2009 Nicholas C. Zakas. All rights reserved.
 +
//MIT Licensed
 +
function timedChunk(items, process, context, callback){
 +
    var todo = items.concat();  //create a clone of the original
 +
    setTimeout(function(){
 +
        var start = +new Date();
 +
        do {
 +
            process.call(context, todo.shift());
 +
        } while (todo.length > 0 && (+new Date() - start < 300));
 +
        if (todo.length > 0){
 +
            setTimeout(arguments.callee, 1);
 +
        } else {
 +
            callback(items);
 +
        }
 +
    }, 1);
 +
}
 +
 +
brd.suspendUpdate();
 +
timedChunk(points, createCurve, null, final);
 +
</jsxgraph>
 +
 +
</source>
 +
 +
[[Category:Examples]]

Revision as of 12:50, 19 October 2009

 

The underlying JavaScript code

<div id="wahlkreis">&nbsp;</div>
<jsxgraph width="500" height="700">
var minX =-289319.4,
    maxY = 6827620,
    maxX = 351315.7,
    minY = 5960587,
    brd,
    wahlkreisNode = document.getElementById('wahlkreis').firstChild,    
    points = [],
    len = data.length, // from germany.js
    lastWk = null,
    i, col = 0;
    
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[minX-1000,maxY+1000,maxX+1000,minY-1000],
                                    keepaspectratio:true});

for(i=0;i<len;i++) {
    if(i%6==1) {
        lastWk = data[i];
    }
    else if(i%6 == 5) {
        points.push([data[i],lastWk]);
    }
}

function createCurve(area)  {
    var xy = area[0].split(','),
        x = [], y = [],
        c = [], len, i, a, graph;
        
    len = xy.length;
    for(i=0;i<len;i++) {
        a = xy[i].split(' ');
        c.push(new JXG.Coords(JXG.COORDS_BY_USER, [1*a[0], 1*a[1]], brd));
    }
    c = brd.renderer.RamenDouglasPeuker(c,1.5);
    len = c.length;
    for (i=0;i<len;i++) {
        x.push(c[i].usrCoords[1]);
        y.push(c[i].usrCoords[2]);
    }
    graph = brd.createElement('curve', [x,y], 
                    {fillColor:JXG.hsv2rgb(col++,0.6,0.9),
                     highlightFillColor:'yellow',
                     strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});

    JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.highlight(); wahlkreisNode.nodeValue=area[1];}, graph);
    JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.noHighlight();}, graph);
    graph.hasPoint = function(){return false; };
}

function final() {
    brd.unsuspendUpdate();
}

//Copyright 2009 Nicholas C. Zakas. All rights reserved.
//MIT Licensed
function timedChunk(items, process, context, callback){
    var todo = items.concat();   //create a clone of the original
    setTimeout(function(){
        var start = +new Date();
        do {
            process.call(context, todo.shift());
        } while (todo.length > 0 && (+new Date() - start < 300));
        if (todo.length > 0){
            setTimeout(arguments.callee, 1);
        } else {
            callback(items);
        }
    }, 1);
}

brd.suspendUpdate();
timedChunk(points, createCurve, null, final);
</jsxgraph>