Difference between revisions of "Map with German electoral districts"

From JSXGraph Wiki
Jump to navigationJump to search
 
(13 intermediate revisions by 2 users not shown)
Line 15: Line 15:
 
     i, col = 0;
 
     i, col = 0;
 
      
 
      
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[minX-1000,maxY+1000,maxX+1000,minY-1000],
+
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[minX-1000,maxY+1000,maxX+1000,minY-1000],keepaspectratio:true});
                                    keepaspectratio:true});
 
  
 
for(i=0;i<len;i++) {
 
for(i=0;i<len;i++) {
Line 28: Line 27:
  
 
function createCurve(area)  {
 
function createCurve(area)  {
     var xy = area[0].split(','),
+
     var compos = area[0].split(';'), // Connected component
 
         x = [], y = [],
 
         x = [], y = [],
         c = [], len, i, a, graph;
+
         c = [], num, i, a, graph, k, a;
 
          
 
          
     len = xy.length;
+
     num = compos.length;
    for(i=0;i<len;i++) {
+
    for (k=0;k<num;k++) {
        a = xy[i].split(' ');
+
        x = []; y = []; c = [];
        c.push(new JXG.Coords(JXG.COORDS_BY_USER, [1*a[0], 1*a[1]], brd));
+
        xy = compos[k].split(',');
    }
+
        len = xy.length;
    c = brd.renderer.RamenDouglasPeuker(c,1.5);
+
        for(i=0;i<len;i++) {
    len = c.length;
+
            a = xy[i].split(' ');
    for (i=0;i<len;i++) {
+
            c.push(new JXG.Coords(JXG.COORDS_BY_USER, [1*a[0], 1*a[1]], brd));
        x.push(c[i].usrCoords[1]);
+
        }
        y.push(c[i].usrCoords[2]);
+
        c = JXG.Math.Numerics.RamerDouglasPeuker(c,1.3);
    }
+
        len = c.length;
    graph = brd.createElement('curve', [x,y],  
+
        for (i=0;i<len;i++) {
                     {fillColor:JXG.hsv2rgb(col++,0.6,0.9),
+
            x.push(c[i].usrCoords[1]);
 +
            y.push(c[i].usrCoords[2]);
 +
        }
 +
        graph = brd.create('curve', [x,y],  
 +
                     {fillColor:JXG.hsv2rgb(0.5*(col++),0.5,0.9),
 
                     highlightFillColor:'yellow',
 
                     highlightFillColor:'yellow',
 
                     strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});
 
                     strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});
 
+
        if (k==0) {
    JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.highlight(); wahlkreisNode.nodeValue=area[1];}, graph);
+
            JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.nohcol = graph.visProp.fillcolor; graph.setAttribute({fillColor: 'yellow'});}, graph);
    JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.noHighlight();}, graph);
+
            JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.setAttribute({fillColor: graph.nohcol});}, graph);
    graph.hasPoint = function(){return false; };
+
        }
 +
        graph.hasPoint = function(){return false; };
 +
    }
 
}
 
}
  
 
function final() {
 
function final() {
 
     brd.unsuspendUpdate();
 
     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();
 
brd.suspendUpdate();
timedChunk(points, createCurve, null, final);
+
JXG.timedChunk(points, createCurve, null, final);
 
</jsxgraph>
 
</jsxgraph>
 +
 +
For a more elaborate version see [http://vis.uell.net/wahlatlas/ http://vis.uell.net/wahlatlas/].
 +
 +
© Bundeswahlleiter, Statistisches Bundesamt, Wiesbaden 2008, Wahlkreiskarte für die Wahl zum 17. Deutschen Bundestag
 +
 +
Geoinformationen © Bundesamt für Kartographie und Geodäsie [http://www.bkg.bund.de www.bkg.bund.de]
 +
  
 
===The underlying JavaScript code===
 
===The underlying JavaScript code===
 
<source lang="xml">
 
<source lang="xml">
 +
<script type="text/javascript" src="/ajax/germany.js"></script>
 
<div id="wahlkreis">&nbsp;</div>
 
<div id="wahlkreis">&nbsp;</div>
<jsxgraph width="500" height="700">
+
</source>
 +
<source lang="javascript">
 
var minX =-289319.4,
 
var minX =-289319.4,
 
     maxY = 6827620,
 
     maxY = 6827620,
Line 93: Line 90:
 
     i, col = 0;
 
     i, col = 0;
 
      
 
      
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[minX-1000,maxY+1000,maxX+1000,minY-1000],
+
brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[minX-1000,maxY+1000,maxX+1000,minY-1000],keepaspectratio:true});
                                    keepaspectratio:true});
 
  
 
for(i=0;i<len;i++) {
 
for(i=0;i<len;i++) {
Line 106: Line 102:
  
 
function createCurve(area)  {
 
function createCurve(area)  {
     var xy = area[0].split(','),
+
     var compos = area[0].split(';'), // Connected component
 
         x = [], y = [],
 
         x = [], y = [],
         c = [], len, i, a, graph;
+
         c = [], num, i, a, graph, k, a;
 
          
 
          
     len = xy.length;
+
     num = compos.length;
    for(i=0;i<len;i++) {
+
    for (k=0;k<num;k++) {
        a = xy[i].split(' ');
+
        x = []; y = []; c = [];
        c.push(new JXG.Coords(JXG.COORDS_BY_USER, [1*a[0], 1*a[1]], brd));
+
        xy = compos[k].split(',');
    }
+
        len = xy.length;
    c = brd.renderer.RamenDouglasPeuker(c,1.5);
+
        for(i=0;i<len;i++) {
    len = c.length;
+
            a = xy[i].split(' ');
    for (i=0;i<len;i++) {
+
            c.push(new JXG.Coords(JXG.COORDS_BY_USER, [1*a[0], 1*a[1]], brd));
        x.push(c[i].usrCoords[1]);
+
        }
        y.push(c[i].usrCoords[2]);
+
        c = JXG.Math.Numerics.RamerDouglasPeuker(c,1.3);
    }
+
        len = c.length;
    graph = brd.createElement('curve', [x,y],  
+
        for (i=0;i<len;i++) {
                     {fillColor:JXG.hsv2rgb(col++,0.6,0.9),
+
            x.push(c[i].usrCoords[1]);
 +
            y.push(c[i].usrCoords[2]);
 +
        }
 +
        graph = brd.create('curve', [x,y],  
 +
                     {fillColor:JXG.hsv2rgb(0.5*(col++),0.5,0.9),
 
                     highlightFillColor:'yellow',
 
                     highlightFillColor:'yellow',
 
                     strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});
 
                     strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});
 
+
        if (k==0) {
    JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.highlight(); wahlkreisNode.nodeValue=area[1];}, graph);
+
            JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.nohcol = graph.visProp.fillcolor; graph.setAttribute({fillColor: 'yellow'});}, graph);
    JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.noHighlight();}, graph);
+
            JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.setAttribute({fillColor: graph.nohcol});}, 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);
+
        graph.hasPoint = function(){return false; };
 +
     }
 
}
 
}
  
 
brd.suspendUpdate();
 
brd.suspendUpdate();
timedChunk(points, createCurve, null, final);
+
JXG.timedChunk(points, createCurve, null, final);
</jsxgraph>
 
 
 
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 +
[[Category:Charts]]

Latest revision as of 15:33, 3 March 2021

 

For a more elaborate version see http://vis.uell.net/wahlatlas/.

© Bundeswahlleiter, Statistisches Bundesamt, Wiesbaden 2008, Wahlkreiskarte für die Wahl zum 17. Deutschen Bundestag

Geoinformationen © Bundesamt für Kartographie und Geodäsie www.bkg.bund.de


The underlying JavaScript code

<script type="text/javascript" src="/ajax/germany.js"></script>
<div id="wahlkreis">&nbsp;</div>
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 compos = area[0].split(';'), // Connected component
        x = [], y = [],
        c = [], num, i, a, graph, k, a;
        
    num = compos.length;
    for (k=0;k<num;k++) {
        x = []; y = []; c = [];
        xy = compos[k].split(',');
        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 = JXG.Math.Numerics.RamerDouglasPeuker(c,1.3);
        len = c.length;
        for (i=0;i<len;i++) {
            x.push(c[i].usrCoords[1]);
            y.push(c[i].usrCoords[2]);
        }
        graph = brd.create('curve', [x,y], 
                    {fillColor:JXG.hsv2rgb(0.5*(col++),0.5,0.9),
                     highlightFillColor:'yellow',
                     strokeWidth:1,strokeColor:'black',highlightStrokeColor:'black'});
        if (k==0) {
            JXG.addEvent(graph.rendNode, 'mouseover', function(){graph.nohcol = graph.visProp.fillcolor; graph.setAttribute({fillColor: 'yellow'});}, graph);
            JXG.addEvent(graph.rendNode, 'mouseout', function(){graph.setAttribute({fillColor: graph.nohcol});}, graph);
        }
        graph.hasPoint = function(){return false; };
    }
}

brd.suspendUpdate();
JXG.timedChunk(points, createCurve, null, final);