RaphaelJS HTML5 Library pathIntersection() bug or alternative optimisation (screenshots) - javascript

I have a chart generated using RaphaelJS library. It is just on long path:
M 50 122 L 63.230769230769226 130 L 76.46153846153845 130 L
89.6923076923077 128 L 102.92307692307692 56 L 116.15384615384615 106 L 129.3846153846154 88 L 142.6153846153846 114 L 155.84615384615384 52
L 169.07692307692307 30 L 182.3076923076923 62 L 195.53846153846152
130 L 208.76923076923077 74 L 222 130 L 235.23076923076923 66 L
248.46153846153845 102 L 261.6923076923077 32 L 274.9230769230769 130 L 288.15384615384613 130 L 301.38461538461536 32 L 314.6153846153846
86 L 327.8461538461538 130 L 341.07692307692304 70 L
354.30769230769226 130 L 367.53846153846155 102 L 380.7692307692308 120 L 394 112 L 407.2307692307692 68 L 420.46153846153845 48 L
433.6923076923077 92 L 446.9230769230769 128 L 460.15384615384613 110 L 473.38461538461536 78 L 486.6153846153846 130 L 499.8461538461538 56
L 513.0769230769231 116 L 526.3076923076923 80 L 539.5384615384614 58
L 552.7692307692307 40 L 566 130 L 579.2307692307692 94 L
592.4615384615385 64 L 605.6923076923076 122 L 618.9230769230769 98 L 632.1538461538461 120 L 645.3846153846154 70 L 658.6153846153845 82 L 671.8461538461538 76 L 685.0769230769231 124 L 698.3076923076923 110 L 711.5384615384615 94 L 724.7692307692307 130 L 738 130 L 751.2307692307692 66 L 764.4615384615385 118 L 777.6923076923076 70 L 790.9230769230769 130 L 804.1538461538461 44 L 817.3846153846154 130 L 830.6153846153845 36 L 843.8461538461538 92 L 857.076923076923 130 L 870.3076923076923 76 L 883.5384615384614 130 L 896.7692307692307 60 L 910 88
Also below these chart I have a jqueryUI slider of the same width (860px) and centered with the chart. I want when I move the slider to move a dot on the chart accordingly with the slider position. See attached screenshot:
As you can see it seems to work fine. I've implemented this behaviour using the pathIntersection() method. On the slide event at each ui.value (x coordinate) I intersect my chartPath (the one from above) with a vertical straight line at the x coordinate.
But still there are some problems. One of them is that it runs very hard, and it kinda freezes sometimes.. and very weird sometimes it doesn't seem to intersect at all even it should.. I'll example below 2 cases I identified:
M 499.8461538461538 0 L 499.8461538461538 140
M 910 0 L 910 140
Could you please explain why this intersect behaviour happens (it should return a dot).. and the worst part it seems like it happens randomly.. if I use another chartdata.
Also if you can identify another (better) solution to syncronise the slider position with the dot on the chart.. would be perfect.
I thought about using Element.getPointAtLength(length), but I don't know how. I think I should save the pathSegments and for each to compute the start Length and the finish Length.


I think it would be better to use the source data to find the intersection point manually. Shouldn't be too hard as the points are already sorted by x.
Path intersection appears to fail when you check the intersection at one of the vertices, which can be considered a bug but is not really surprising, since the library was never intended for computation geometry in the first place.
By way of quick hack you could also try slightly modifying the x value when pathIntersection fails to produce a single value and checking again, e.g. try 499.8461538461538 + 0.0001 * (2 * Math.random() - 1) instead of just 499.8461538461538. You might need to try several times before you get a proper answer, but here it is unlikely. I believe the technique is generally known as perturbation.

Related

For-loop not working for JavaScript animation

I am trying to write a for-loop to repeat the animation of the 'explode' path when a shape button is clicked but the for loop isn't working/executing and I can't see where its gone wrong. Aim of the for loop: loop the process of animating the path and then reversing the animation back to its original path. I know that the problem is somewhere in the for loop as the explode.animate() method just before the loop works.
Note: I am using Raphael.js for this animation
var explode = paper.path("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z");
explode.attr({'fill':"yellow", 'stroke-width':"4"});
explode.hide();
function explode1() {
explode.animate({path:("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z"), 'fill':"yellow"}, 100, 'ease-out');
}
function explode2() {
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
}
bomb1.click(function() {
audio.pause();
audio.currentTime = 0;
bomb1.remove();
explode.show();
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
for(var i = 0; i < 4; i+=1) {
if (i % 2 == 0) {
explode1();
} else {
explode2();
}
}
});
I have also tried putting the animate methods directly into the for loop instead of writing them as functions and for loop still doesn't work.
bomb1.click(function() {
audio.pause();
audio.currentTime = 0;
bomb1.remove();
explode.show();
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
for(var i = 0; i < 5; i+=1) {
if (i % 2 == 0) {
explode.animate({path:("M 300,400 l 30,50 l 40,-30 l -10,50 l 40,30 l -50,10 l 10,40 l -60,-40 l -50, 30 l 10,-50 l -60,-10 l 70, -20 z"), 'fill':"yellow"}, 100, 'ease-out');
} else {
explode.animate({path:"M 300,380 l 5,70 l 60,-30 l -5,70 l 70,30 l -100,-10 l -50,50 l -30,-50 l -90, 10 l 80,-50 l -60,-20 l 90, 10 z", 'fill':"orange"},100,'ease-in');
}
};

The animation is not synchronous. By that I mean the the for loop will not wait for the animation to finish before performing the next step of the loop. They will all get started at the same time.
What you need to do is trigger the next animation once the first one is complete. RaphaelJS lets you pass a function to the animate() method that gets called when the animation is finished.
See the following question for an example:
animating paths with raphael

SVG textpath animation: treat path as circle?

I'm using an SVG textpath to animate a word around a closed path. How can I get the animation to treat the path as a circle, and have the text smoothly transition from the end of the path to the beginning? Right now it finishes drawing the text (clipping the spillover), till the text disappears, then starts again at the beginning by popping the word back at the start.
<html><head>
<style type="text/css">
html {width: 100%; height: 100%;}
body {width: 100%; height: 100%; margin: 0; padding: 0;}
svg {width: 100%; height: 100%;}
text {fill: deepPink; font-size: 9em;}
</style>
</head>
<body>
<svg viewBox="0 0 800 600">
<path id="myPath" fill="none" stroke="#999999" stroke-width=45 stroke-miterlimit="10" stroke-linecap="round" d="M 305 99 L 313 104 L 319 108 L 323 114 L 328 116 L 333 122 L 338 125 L 358 125 L 367 114 L 369 108 L 381 111 L 407 111 L 417 104 L 421 104 L 433 106 L 441 105 L 452 108 L 481 99 L 499 103 L 539 92 L 546 94 L 562 102 L 567 102 L 579 102 L 589 105 L 604 119 L 623 150 L 637 167 L 648 185 L 651 194 L 653 209 L 664 235 L 670 253 L 671 279 L 677 295 L 678 305 L 676 318 L 678 329 L 685 348 L 687 370 L 686 380 L 677 398 L 674 402 L 666 410 L 651 439 L 643 451 L 629 465 L 601 476 L 596 477 L 578 473 L 570 473 L 553 478 L 538 476 L 520 483 L 497 493 L 477 496 L 471 497 L 463 500 L 439 517 L 433 519 L 427 522 L 410 522 L 394 523 L 382 521 L 377 520 L 367 518 L 356 511 L 343 505 L 329 503 L 320 503 L 300 505 L 267 514 L 234 523 L 212 526 L 205 526 L 193 522 L 178 515 L 160 512 L 155 509 L 138 483 L 135 476 L 135 468 L 141 455 L 142 446 L 139 434 L 138 419 L 138 374 L 136 360 L 135 356 L 140 347 L 145 331 L 146 324 L 141 305 L 141 294 L 142 283 L 161 242 L 166 232 L 175 225 L 179 212 L 193 204 L 195 199 L 199 185 L 199 178 L 207 171 L 216 168 L 226 165 L 230 158 L 228 146 L 228 140 L 233 127 L 237 115 L 243 110 L 259 111 L 267 110 L 280 108 L 292 102 L 297 102 Z"/>
<path fill="none" stroke="#FFFF00" stroke-width= 3 stroke-miterlimit="10" stroke-linecap="round" d="M 305 99 L 313 104 L 319 108 L 323 114 L 328 116 L 333 122 L 338 125 L 358 125 L 367 114 L 369 108 L 381 111 L 407 111 L 417 104 L 421 104 L 433 106 L 441 105 L 452 108 L 481 99 L 499 103 L 539 92 L 546 94 L 562 102 L 567 102 L 579 102 L 589 105 L 604 119 L 623 150 L 637 167 L 648 185 L 651 194 L 653 209 L 664 235 L 670 253 L 671 279 L 677 295 L 678 305 L 676 318 L 678 329 L 685 348 L 687 370 L 686 380 L 677 398 L 674 402 L 666 410 L 651 439 L 643 451 L 629 465 L 601 476 L 596 477 L 578 473 L 570 473 L 553 478 L 538 476 L 520 483 L 497 493 L 477 496 L 471 497 L 463 500 L 439 517 L 433 519 L 427 522 L 410 522 L 394 523 L 382 521 L 377 520 L 367 518 L 356 511 L 343 505 L 329 503 L 320 503 L 300 505 L 267 514 L 234 523 L 212 526 L 205 526 L 193 522 L 178 515 L 160 512 L 155 509 L 138 483 L 135 476 L 135 468 L 141 455 L 142 446 L 139 434 L 138 419 L 138 374 L 136 360 L 135 356 L 140 347 L 145 331 L 146 324 L 141 305 L 141 294 L 142 283 L 161 242 L 166 232 L 175 225 L 179 212 L 193 204 L 195 199 L 199 185 L 199 178 L 207 171 L 216 168 L 226 165 L 230 158 L 228 146 L 228 140 L 233 127 L 237 115 L 243 110 L 259 111 L 267 110 L 280 108 L 292 102 L 297 102 Z"/>
<text>
<textpath xlink:href="#myPath">Autotopia
<animate attributeName="startOffset" from="0%" to="100%" begin="0s" dur="10s" repeatCount="indefinite"/>
</textpath>
</text>
</svg>
</body></html>
Code sample at mvjantzen.com/mobility/svganimatedtext.html

How about having the path repeat (so it goes round twice) then animate from 0 to 50%

You can use the snap svg library to achieve this:
http://jsbin.com/gixomogiwo/1/edit
And here is the code:
var s = Snap(800,800);
var path = "M 305 99 L 313 104 L 319 108 L 323 114 L 328 116 L 333 122 L 338 125 L 358 125 L 367 114 L 369 108 L 381 111 L 407 111 L 417 104 L 421 104 L 433 106 L 441 105 L 452 108 L 481 99 L 499 103 L 539 92 L 546 94 L 562 102 L 567 102 L 579 102 L 589 105 L 604 119 L 623 150 L 637 167 L 648 185 L 651 194 L 653 209 L 664 235 L 670 253 L 671 279 L 677 295 L 678 305 L 676 318 L 678 329 L 685 348 L 687 370 L 686 380 L 677 398 L 674 402 L 666 410 L 651 439 L 643 451 L 629 465 L 601 476 L 596 477 L 578 473 L 570 473 L 553 478 L 538 476 L 520 483 L 497 493 L 477 496 L 471 497 L 463 500 L 439 517 L 433 519 L 427 522 L 410 522 L 394 523 L 382 521 L 377 520 L 367 518 L 356 511 L 343 505 L 329 503 L 320 503 L 300 505 L 267 514 L 234 523 L 212 526 L 205 526 L 193 522 L 178 515 L 160 512 L 155 509 L 138 483 L 135 476 L 135 468 L 141 455 L 142 446 L 139 434 L 138 419 L 138 374 L 136 360 L 135 356 L 140 347 L 145 331 L 146 324 L 141 305 L 141 294 L 142 283 L 161 242 L 166 232 L 175 225 L 179 212 L 193 204 L 195 199 L 199 185 L 199 178 L 207 171 L 216 168 L 226 165 L 230 158 L 228 146 L 228 140 L 233 127 L 237 115 L 243 110 L 259 111 L 267 110 L 280 108 L 292 102 L 297 102 Z";
setInterval(function(){ var text = s.text(50,50,'Autotopia')
.attr({ 'textpath': path,'font-size' : '3em' })
.textPath.animate({ 'startOffset': 3000 }, 5000 ); }, 5000);

RaphaelJS - standardize svg path shape sizes

I'm building a site that has an svg map of the United States using the very easy usmap jquery plugin which uses Raphael. I have a click event that fires if you click an individual state.
On that occasion, I go to the same US States object to render a single state. The problem is that the paths for each state in the list are relative to each other as rendered in the entire US map of states.
But my requirements are that I need to render each state about the same size as each other when I'm viewing a single state.
I know I can put a multiplier on the path parameters and the overall state will increase/decrease, but I'm looking for a method to determine this multiplier dynamically.
I also tried to use setViewBox, hoping it would increase/decrease the <path> to fill the area. But it didn't work, as far as I could tell.
So, either I need to make the <path> fill the space or I need to figure out a multiplier to apply to scale the <path>
// state coords pulled from All states svg file
var statePolygon = "M 93.573239,6.3617734 L 97.938071,7.8167177 L 107.6377,10.564946 L 116.2057,12.504871 L 136.2516,18.162988 L 159.20739,23.821104 L 174.36801,27.215777 L 173.36373,31.099829 L 169.27051,44.909503 L 164.81238,65.714155 L 161.63584,81.854036 L 161.28429,91.232806 L 148.10315,87.33877 L 132.53264,83.955591 L 118.86585,84.551329 L 117.28528,83.01913 L 111.95881,84.916253 L 107.9821,84.665645 L 105.2606,82.904814 L 103.68223,83.430208 L 99.476903,83.201576 L 97.601755,81.829846 L 92.824862,80.093194 L 91.382778,79.886558 L 86.397035,78.560984 L 84.614222,80.069004 L 78.922841,79.726077 L 74.101997,75.931831 L 74.30643,75.131651 L 74.374575,67.197996 L 72.248826,63.31142 L 68.133618,62.57938 L 67.768708,60.225014 L 65.2543,59.597968 L 62.372763,59.063086 L 60.594498,60.033049 L 58.331251,57.123161 L 58.654572,54.213272 L 61.4028,53.889951 L 63.019405,49.84844 L 60.432837,48.716816 L 60.594498,44.998625 L 64.959331,44.351984 L 62.211103,41.603756 L 60.756158,34.490695 L 61.4028,31.580807 L 61.4028,23.659444 L 59.624535,20.426234 L 61.887782,11.049927 L 63.989368,11.534908 L 66.414275,14.444797 L 69.162503,17.031364 L 72.395712,18.97129 L 76.922205,21.072876 L 79.993756,21.719518 L 82.903645,23.174462 L 86.298518,24.144425 L 88.561764,23.982765 L 88.561764,21.557857 L 89.855048,20.426234 L 91.956634,19.13295 L 92.279955,20.264574 L 92.603276,22.042839 L 90.340029,22.52782 L 90.016708,24.629406 L 91.794974,26.084351 L 92.926597,28.509258 L 93.573239,30.449183 L 95.028183,30.287523 L 95.189843,28.994239 L 94.219881,27.700955 L 93.734899,24.467746 L 94.543201,22.689481 L 93.89656,21.234537 L 93.89656,18.97129 L 95.674825,15.41476 L 94.543201,12.828192 L 92.118294,7.9783781 L 92.441615,7.1700758 z M 84.116548,12.340738 L 86.137312,12.179078 L 86.622294,13.553197 L 88.158073,11.936582 L 90.502155,11.936582 L 91.310458,13.472361 L 89.774678,15.169801 L 90.42133,15.978114 L 89.693853,17.998875 L 88.319734,18.403021 C 88.319734,18.403021 87.430596,18.483857 87.430596,18.160536 C 87.430596,17.837215 88.885551,15.573958 88.885551,15.573958 L 87.188111,15.008141 L 86.86479,16.463095 L 86.137312,17.109737 L 84.60153,14.84648 z";
var width = 175,
height = 125,
paper = Raphael(document.getElementById("statemap"), 350, 250);
paper.setViewBox(0, 0, width, height, true);
// paper.canvas.setAttribute('preserveAspectRatio', true);
paper.path(statePolygon);
Anyone have any ideas?
Update
So, I figured out (thanks, Jordan) that you can get a "size" dimension by capturing the difference between all of the X coord (can be done with y, if you'd rather.) By calculating the diff between the lowest X and the highest X you can get a size.
If you then figure out what a 'normal' size would be, you can then determine a multiplier to apply to each state as a fraction of the state's size relative to the 'normal' one.
In my example, the diff in Kansas is 128. CT is 29, so CT needs a multiplier of 4.41 to bring it up to the relative size of Kansas. TX is 242, so it needs a 0.53 multiplier to bring it down.
This normalizes the sizes of the states. If you then, using Raphael, need to increase/decrease this, you can use the transform function:
p = paper.path(statePolygonNew);
var scale = 1.5;
p.transform("t" + scale*52 + "," + scale*32 + " s" + scale + "");
Thanks,
Scott

There are a number of different ways of approaching this. Here are two of them.
Match the viewbox to the existing path
You used this method incorrectly when you were first seeking a solution. The viewbox is essentially a mechanism for dynamically scaling the way that coordinates in the SVG are translated into coordinates on a screen. By setting the viewbox to the dimensions of the svg in screen coordinates, you are effectively telling it to do nothing -- that's what it does by default.
Instead, try setting the viewbox to the bounding box of the target path:
var statePathString = "..."; // your path here
var statePath = paper.path( statePathString ).attr( { /* your attributes */ } );
var bbox = statePath.getBBox();
paper.setViewBox( bbox.x, bbox.y, bbox.width, bbox.height, true );
This instantiates the path for the state, calculates its dimensions, and zooms the viewbox in to look at just that range of the SVG's coordinate systems. You may need to add additional logic to preserve aspect ratios and add margin, but this is definitely the easiest approach.
Transform the path to fit your existing viewbox
If you do opt to avoid viewbox manipulation -- there are a few valid reasons -- then you can adjust the path to match the default viewing rectangle using a handful of Raphael's built-in utility functions. Here's the approach I'd use, given existing variables width and height reflecting the dimensions of your paper:
var bbox = Raphael.pathBBox( statePathString ); // Handy function to retrieve a bounding box without instantiating a path
// Calculate larger of the two dimensional quotients
var scale = Math.max( bbox.width / width, bbox.height / height );
// Finally, transform the path such that it is translated to have its origin at 0,0 and scaled in such a way that it will fill the SVG
var transformedPathString = Raphael.transformPath( statePathString,
[ "T", 0 - bbox.x, 0 - bbox.y, /* Shift up and left so upper-left extent corresponds to 0,0 */
"S", 1.0 / scale, 1.0 / scale, 0, 0 ] );
At this point you can do whatever you'd like to do with transformedPathString -- presumably, pass it to paper.path and style it up.

Polygon points out of letters

For given font, and given string, how to get polygon points like these in the picture below, in JavaScript?
(I am aware of related questions on SO, but they are for Python or other languages/environments; I would like JavaScript only solution, if possible)
EDIT: Following up #Roman's the answer:
Using typeface.js online tool, I converted a TrueType font to typeface.js format. Each letter is represented similar to this: (here is representation of letter d)
"d": {
"x_min": 135.640625,
"x_max": 792.171875,
"ha": 928,
"o": "m 135 998 l 330 998 q 792 499 763 933 q 330 0 763 65 l 135 0 l 135 998 m 330 151 q 648 499 635 211 q 330 846 635 786 l 287 846 l 287 151 l 330 151 "
},
The key part of typeface.js code for rendering a letter based on this format is:
switch(action) {
case 'm':
ctx.moveTo(outline[i++], outline[i++]);
break;
case 'l':
ctx.lineTo(outline[i++], outline[i++]);
break;
case 'q':
var cpx = outline[i++];
var cpy = outline[i++];
ctx.quadraticCurveTo(outline[i++], outline[i++], cpx, cpy);
break;
case 'b':
var x = outline[i++];
var y = outline[i++];
ctx.bezierCurveTo(outline[i++], outline[i++], outline[i++], outline[i++], x, y);
break;
}

Some work has already been done for typeface.js, a javascript library that replaces regular text with "canvas rendered one" (so you can use arbitrary font-faces).
typeface.js accomplishes this by using font definition data, which essentially holds the drawing instructions for each glyph. The data for the glyph "A" might look like this:
m 253 638 l 379 949 q 394 945 387 946 q 409 944 401 944 q 443 949 428 944
q 565 629 525 733 q 673 359 605 526 q 822 0 740 192 q 773 3 804 0 q 736 7
743 7 q 686 4 709 7 q 650 0 664 1 q 588 199 609 137 q 532 355 567 261 l
370 355 l 210 355 l 159 205 q 127 110 142 161 q 99 0 112 59 l 43 6 q 6 3
20 6 q -14 0 -8 0 q 74 211 29 105 q 155 403 119 317 q 253 638 191 490 m
370 422 l 502 422 l 371 760 l 240 422 l 370 422
(I inserted newlines).
This string is a sequence of drawing operations with their respective numerical parameters. For example "m 253 638" corresponds to "move to x:253 y:638" and "l 379 949" being "draw line to x:379 y:949". etc, etc..
You should have a look at the source here:
http://bazaar.launchpad.net/~davidchester/typeface.js/trunk/view/head:/js/typeface.js
You could adapt that renderer to extract your poligons. The major trick here is to let this page do the hard work for you and create the font definitions.

How to use SVG code converted to Raphaël JS on a web page?

I have seen several threads that adress this question but nothing that really solves my problem. I have a SVG file with Finland counties.. What I want to do is map like this: http://raphaeljs.com/australia.html.
I converted the SVG file to Raphael JS in here http://www.irunmywebsite.com/raphael/SVGTOHTML_LIVE.php and I'm tryig to sink that converted code into html page, but it just doesn't seem to work.. The question is why it isn't working..? Everything is supposed to be correct but it just don't draw anything. I also tryed to make exactly the same code as in raphael australia with those different paths from the map of Finland though (and tryed dirrerent converters as well).. But still nothing..
I'm pretty new with JavaScript and I have studyed and spended a lot of time with this SVG file as well.. so I'm getting little bit frustrated.. Can someone please help me..? I post the code on here under:
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Raphaël - Finland</title>
<style type="text/css" media="screen">
#canvas { height: 480px; margin: 0 auto; text-align: left; width: 640px; }
</style>
<script src="raphael.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
paper.setStart();
pohj_pohjanmaa=paper.path('M 148.9 256.5 L 149.8 256.1 L 150.6 256.8 L 150.6 257.7 L 148.7 258.4 L 146.9 257.2 L 145.4 257.6 L 146.4 261 L 145.1 261.9 L 143.5 260.9 L 141.8 261.4 L 140.3 257.7 L 141.2 256.1 L 146.2 254.9 L 147.6 256.5Z');
pohj_pohjanmaa.attr({'stroke-width':'1.9','stroke-miterlimit':'4','fill':'#000000','stroke':'none','stroke-opacity':'1'});
lappi=paper.path('M 215.6 213.7 L 218.3 212.3 L 221 213.1 L 221.9 212.4 L 221.8 209.9 L 219.9 208.6 L 220 206 L 221.4 205.7 L 222.1 201 L 219.3 199.9 L 217.4 195.8 L 218.1 193.1 L 220.4 192.2 L 220.3 189.7 L 231.4 192.3 L 238.2 191.4 L 236.4 186.6 L 226.8 170.3 L 227.9 166.6 L 242.6 139 L 243.2 132.2 L 236.2 127.1 L 229.1 112.6 L 218.3 108.2 L 214.6 92.9 L 219 85.1 L 219.9 78.1 L 218.7 76.1 L 213.8 76.1 L 221.9 69.3 L 220.3 63.9 L 220.9 58.8 L 228.6 48.7 L 224.2 37.5 L 211.1 31 L 210.8 28.2 L 206.8 25.7 L 202.7 19.9 L 200.3 21.4 L 198 20.6 L 196.4 23 L 190 28 L 182.6 26.1 L 178.4 27.6 L 175.8 33.8 L 171.4 37.7 L 169.2 41.1 L 170.1 43.5 L 168.6 46.1 L 165.9 61.8 L 166.5 71.1 L 165 76.4 L 161.9 75.6 L 159.1 77.3 L 155.4 82.8 L 155.8 88.2 L 153.2 88.1 L 152.3 90 L 148.7 85.6 L 142.1 82.7 L 135.9 78.1 L 132.8 79.8 L 131.1 82.7 L 127 84.2 L 122.6 86.1 L 121.6 84 L 116.8 83.5 L 112.2 80.1 L 109.5 81.3 L 109.8 76.1 L 99.3 54.8 L 93.1 52.7 L 89.3 54.6 L 86.7 57.7 L 88.2 61.7 L 87.4 64.4 L 82.5 60.6 L 79 64 L 83.5 69.7 L 83.8 73.7 L 87.2 74.6 L 92.1 84.8 L 95.6 85.9 L 96.9 89.1 L 100.3 90.8 L 101.6 94.7 L 106.5 95.8 L 113 98.8 L 120 105.3 L 120.1 109.6 L 121 112.2 L 123.1 111.9 L 124 116.1 L 128 120.3 L 126.3 122.2 L 125 124.4 L 125 127.2 L 125.2 135.7 L 122.9 141.5 L 124.6 144.6 L 128.8 145.4 L 127.7 147.7 L 128.5 150.5 L 125 152.3 L 124.8 157 L 131.9 173.5 L 129.3 176.4 L 128.8 184.8 L 126.1 187.1 L 125.4 189.5 L 124.5 192.2 L 125.2 194.7 L 124.5 196.5 L 125.6 202.4 L 128.7 205.3 L 128.8 208.4 L 131.3 212.5 L 131.6 215.5 L 133.1 219.6 L 133.1 222.9 L 134.8 222.7 L 136 220.8 L 137.4 222.6 L 140.5 223.7 L 141.5 225.2 L 140.4 227.5 L 141.2 228.4 L 142.7 227.4 L 143.3 229.3 L 144.6 229.2 L 145.6 228.3 L 147.7 228.6 L 148.9 230.3 L 150.3 230.1 L 151.2 231.1 L 151.2 231.2 L 153.4 228.9 L 156.6 227.3 L 157.1 225.1 L 165.1 225.5 L 172 221.1 L 172.6 225.6 L 186.3 226.8 L 191 225.2 L 197.4 214.9 L 199.4 215.8 L 201 215.1 L 203 220.2 L 213.2 221.8 L 217.6 219.9 L 217.8 217Z');
lappi.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});
pohj_pohjanmaa2=paper.path('M 244.1 234.8 L 245 232 L 243.4 229.3 L 247.6 226.5 L 250.5 226.2 L 249.2 217.1 L 244.8 204.4 L 241 199 L 238.2 191.4 L 231.4 192.3 L 220.3 189.7 L 220.4 192.2 L 218.1 193.1 L 217.4 195.8 L 219.3 199.9 L 222.1 201 L 221.4 205.7 L 220 206 L 219.9 208.6 L 221.8 209.9 L 221.9 212.4 L 221 213.1 L 218.3 212.3 L 215.6 213.7 L 217.8 217 L 217.6 219.9 L 213.2 221.8 L 203 220.2 L 201 215.1 L 199.4 215.8 L 197.4 214.9 L 191 225.2 L 186.3 226.8 L 172.6 225.6 L 172 221.1 L 165.1 225.5 L 157.1 225.1 L 156.6 227.3 L 153.4 228.9 L 151.2 231.1 C 151.3 231.2 151.4 231.3 151.5 231.4 L 151.6 233.4 L 152.7 233.4 L 153.3 232.7 L 156.2 237.7 L 156 239.6 L 154.8 240.9 L 154.8 243.1 L 153.8 244.2 L 154.7 245.7 L 154.6 250.4 L 153.3 252.2 L 154 253.6 L 155.9 254.7 L 156.6 256.1 L 157.1 259.2 L 158.5 260.7 L 158.4 261.5 L 157.5 261.5 L 155.3 259.7 L 153.3 259.6 L 152.9 260.6 L 153.1 261.8 L 156 264.8 L 156.6 266.5 L 155.9 267.2 L 154.5 267.1 L 154.2 265.5 L 151.3 263.8 L 148.6 263.8 L 147.1 264.9 L 143.9 265 L 142.8 265.9 L 142.2 267.1 L 140.4 267.3 L 139.6 271.2 L 136.7 273.2 L 135.2 279.7 L 133.3 281.2 L 133.2 282.2 L 130.6 283.9 L 127.5 287.2 L 127.1 288.3 L 125.9 290.2 L 125.9 292.4 L 125 292.9 L 123.8 292.1 L 122.5 294.1 L 121.4 295 L 120.3 296.7 L 118.8 299 L 118.6 302.5 L 121.6 306.6 L 123.4 306.6 L 124.8 307.8 L 126 307.2 L 124.7 305.4 L 125.9 303.1 L 129 302.5 L 130.4 308.2 L 132 309 L 132.7 312.1 L 135 313 L 137.4 320.4 L 146.7 331.7 L 149.3 331.4 L 150.3 325.3 L 152.5 324.4 L 159.5 329.2 L 163 329.2 L 164.5 330.4 L 165.8 333.3 L 170.4 333.2 L 172.8 326.4 L 174.1 325.6 L 173 314.3 L 180.4 307.4 L 185.6 305.7 L 184 303.6 L 184 293.1 L 181.6 291.5 L 179.9 291.8 L 177.7 289.9 L 178 287.8 L 176.9 285.3 L 174.9 284 L 178.7 280.2 L 180.7 279.6 L 181.4 277.2 L 185.7 275.1 L 187.2 270.8 L 191.1 268.9 L 191.2 267.8 L 195.8 268.9 L 196.6 266.6 L 196.2 260.4 L 193.7 258.3 L 195.6 255.2 L 199.8 255.2 L 201.9 253.5 L 204.4 253.9 L 206.5 255.3 L 207.4 249.7 L 209.6 248.3 L 220.5 246.4 L 221 241.4 L 227.1 238.5 L 228.4 239.5 L 230.6 238.9 L 232.5 234.9 L 233.4 235.6 L 238.6 235.9 L 244.1 234.8Z');
pohj_pohjanmaa2.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});
kainuu=paper.path('M 250.7 277.9 L 252.4 276.5 L 252.5 273.5 L 250.9 271.5 L 251.6 269.1 L 244 267.5 L 241.8 259 L 242.6 256 L 245.5 255 L 246.6 252.7 L 245.5 251.3 L 246.8 248.6 L 245.6 247.2 L 241.7 246.9 L 243.3 241.3 L 243.7 236.5 L 244.2 234.7 L 238.6 235.9 L 233.4 235.6 L 232.5 234.9 L 230.6 238.9 L 228.4 239.5 L 227.1 238.5 L 221 241.4 L 220.5 246.4 L 209.6 248.3 L 207.4 249.7 L 206.5 255.3 L 204.3 253.9 L 201.9 253.5 L 199.8 255.2 L 195.6 255.1 L 193.7 258.3 L 196.2 260.4 L 196.6 266.6 L 195.8 268.9 L 191.2 267.8 L 191.1 268.9 L 187.2 270.8 L 185.7 275.1 L 181.4 277.2 L 180.7 279.6 L 178.7 280.2 L 174.9 284 L 176.9 285.3 L 178 287.8 L 177.7 289.9 L 179.9 291.8 L 181.6 291.5 L 184 293.1 L 184 303.6 L 185.6 305.7 L 192.1 308.1 L 199.7 308.7 L 209 314.6 L 215 321.6 L 219 312.3 L 229.1 314.2 L 244.1 311.5 L 247.3 319.5 L 249.3 317.2 L 253.1 317.6 L 252.8 317.3 L 257.6 313.9 L 262.8 300.5 L 261.2 293.1 L 253.1 287.6 L 250.7 281.3Z');
kainuu.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});
etela_karjala=paper.path('M 225.9 363.5 L 224 364 L 226.6 369.9 L 228.5 370.5 L 232.6 374.3 L 232.9 375.9 L 235.1 377.7 L 234.2 379.8 L 236.3 381.3 L 238.4 380.1 L 239.6 381.6 L 239.6 384.1 L 242.4 388.7 L 244.1 397.8 L 247 399 L 248.1 401.7 L 247.2 402.9 L 248.9 406.3 L 247 411.8 L 260.4 404.6 L 263.1 401.8 L 269 391.3 L 273.4 384.7 L 276.2 383.6 L 281.5 373.8 L 287.7 354.1 L 285.9 349.5 L 280.6 345.2 L 278.9 339.3 L 275.1 336.7 L 270.4 332.9 L 263.7 329.9 L 261 326.1 L 253 317.6 L 249.3 317.3 L 247.2 319.5 L 244.1 311.5 L 229.1 314.2 L 219 312.4 L 216.6 317.8 L 219.6 321 L 221.9 321.2 L 222.5 326 L 223.8 327 L 222.8 328.5 L 223.4 334 L 225.7 335.3 L 225.7 338.6 L 223.7 342.3 L 225.3 343.8 L 228.8 351.1 L 233.6 353.6 L 230.4 355.9 L 233 359.5 L 230.3 363.3 L 226.5 361.7Z');
etela_karjala.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});
etela_savo=paper.path('M 173.8 428.4 L 173.9 430.3 L 176.1 432.3 L 177.4 432.5 L 177.6 434.9 L 179.2 434.2 L 181.6 438 L 183.9 436.9 L 183.9 434.5 L 186.9 434.6 L 186.9 438.6 L 191.1 440.7 L 193.5 439.9 L 196.8 439.1 L 199.2 435 L 201.5 434.8 L 202.9 431.9 L 205.6 432 L 207.1 430.1 L 209.6 430.6 L 217 429.9 L 220.8 425.2 L 222 422.4 L 224.1 424.1 L 229.7 424 L 230.4 421.5 L 235 421.7 L 239.6 420.2 L 242.4 415.5 L 246.1 414.3 L 246.9 411.9 L 247 411.8 L 248.9 406.3 L 247.2 402.9 L 248.1 401.7 L 247 399 L 244.1 397.8 L 242.4 388.7 L 239.6 384.1 L 239.6 381.6 L 238.4 380.1 L 236.3 381.3 L 234.2 379.8 L 235.1 377.7 L 232.9 375.9 L 232.6 374.3 L 228.5 370.5 L 226.6 369.9 L 225.1 370.3 L 221.2 374.2 L 219.2 374.2 L 219.2 378.6 L 217.4 378.4 L 216 380.7 L 217.6 381.9 L 216.7 383.8 L 219.4 383.7 L 219.5 386 L 222 385.4 L 225.5 389.7 L 224.4 392.3 L 217.5 389.6 L 213.2 390.1 L 210.6 387.8 L 206.8 387.6 L 204.6 383.8 L 197 377.1 L 193.3 379.6 L 191.7 377.6 L 188.5 378.4 L 187.7 379.6 L 185.5 378.7 L 183.1 379.9 L 181.5 381 L 184 383.8 L 181.8 384.6 L 180.5 390.1 L 177.9 388.7 L 174.2 391 L 172.1 395.2 L 175.4 401.3 L 174.5 402.8 L 175.2 410.9 L 178.4 415.6 L 177.6 418.5 L 174.8 417.6 L 174.4 418.6 L 172.9 422.6 L 172.4 427.4Z');
etela_savo.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});
pohj_savo=paper.path('M 222.8 328.5 L 223.8 327 L 222.5 326 L 221.9 321.2 L 219.6 321 L 216.6 317.8 L 215 321.6 L 209 314.6 L 199.7 308.7 L 192.1 308.1 L 185.6 305.7 L 180.4 307.4 L 173 314.3 L 174.1 325.6 L 172.8 326.4 L 170.4 333.2 L 169.4 337.1 L 171 339.3 L 171.5 347.2 L 174.5 351.5 L 172.7 352.7 L 174.1 354.1 L 172.9 356.1 L 168.6 356.7 L 174.8 364.5 L 176.7 364.1 L 179.3 368.1 L 180 372.4 L 177.1 375.6 L 177.1 376.9 L 180.5 379 L 182.1 378.8 L 183.1 379.9 L 185.5 378.7 L 187.7 379.6 L 188.5 378.4 L 191.7 377.6 L 193.3 379.6 L 197 377.1 L 204.6 383.8 L 206.8 387.6 L 210.6 387.8 L 213.2 390.1 L 217.5 389.6 L 224.4 392.3 L 225.5 389.7 L 222 385.4 L 219.5 386 L 219.4 383.7 L 216.7 383.8 L 217.6 381.9 L 216 380.7 L 217.4 378.4 L 219.2 378.6 L 219.2 374.2 L 221.2 374.2 L 225.1 370.3 L 226.6 369.9 L 224 364 L 225.9 363.5 L 226.5 361.7 L 230.3 363.3 L 233 359.5 L 230.4 355.9 L 233.6 353.6 L 228.8 351.1 L 225.3 343.8 L 223.7 342.3 L 225.7 338.6 L 225.7 335.3 L 223.4 334Z');
pohj_savo.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});
kanta_hame=paper.path('M 105.8 445.3 L 103.7 443.7 L 102.1 444.6 L 102.1 445.9 L 103.9 447 L 102.7 449.8 L 100.5 450.3 L 100.3 452.3 L 101.6 453.8 L 100.5 454.7 L 100.7 456.5 L 104.5 458.4 L 107.3 457 L 112.7 461.1 L 117.4 462.6 L 124.2 463.8 L 125.1 465.7 L 126.7 464.5 L 128.3 465.3 L 128.8 466.8 L 132.9 466 L 132.8 463.8 L 133.9 462.2 L 136.6 462.6 L 141 462 L 142.5 461.4 L 145.5 462.3 L 145.3 460.9 L 147.3 459.5 L 145.9 458.5 L 144.6 459.7 L 145 457.8 L 146.6 457.3 L 145.9 455.7 L 144.9 453.6 L 146.5 452.3 L 143.8 449.1 L 144.9 444.6 L 149.1 442.1 L 148.7 436.5 L 146.5 434.8 L 144.8 435.6 L 145.3 433.8 L 141.6 432.3 L 138.9 433.5 L 137.2 431.7 L 136.4 433.6 L 132.6 432.1 L 128.4 435.5 L 127.6 435 L 127.1 435.8 L 127.2 436.7 L 127.7 437.3 L 126.3 438.9 L 116 442.8 L 116.7 447.7 L 115.9 448.4 L 112.8 445.1 L 108.3 446.8 L 106.2 446.8Z');
kanta_hame.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});
paijat_hame=paper.path('M 164.2 410.7 L 167 412.1 L 170.1 416.9 L 174.5 418.7 L 173 422.7 L 172.4 427.5 L 173.9 428.5 L 174 430.4 L 176.1 432.4 L 177.4 432.6 L 177.6 434.9 L 176.2 435.7 L 175 438.8 L 171.9 440.9 L 168.6 440.9 L 168 442.9 L 168.9 444.8 L 169.6 448.2 L 167.7 448.1 L 166.9 449.6 L 169.3 450.7 L 168.1 452.9 L 168.2 455.4 L 170.3 456.8 L 170.6 459.1 L 171.2 459.4 L 171 461.5 L 169 462.6 L 167.1 460.9 L 164.1 461.5 L 164 459.5 L 162 460.9 L 160.7 460.7 L 156.5 462 L 155.5 460.7 L 155.2 460.8 L 154.2 457 L 153.5 456.3 L 151.1 458.8 L 148 455.1 L 145.9 455.7 L 144.9 453.6 L 146.5 452.3 L 143.8 449.1 L 144.9 444.6 L 149.1 442.1 L 148.7 436.5 L 146.5 434.8 L 144.8 435.6 L 145.3 433.8 L 141.6 432.3 L 141.2 424.4 L 142.5 425.2 L 154.1 424.1 L 156.4 415.7 L 159.9 414.1 L 161.8 415Z');
paijat_hame.attr({'stroke':'#000000','stroke-width':'1.88','stroke-miterlimit':'4','fill':'#000000','stroke-opacity':'1'});
ahvenanmaa=paper.path('M 47.7 465.5 L 48.9 464.8 L 50.1 466.6 L 49.7 468.3 L 48.5 468.9 L 47.5 466.7Z M 49.9 469.4 L 51.5 468.1 L 52.5 469.3 L 52.1 471.5 L 51.3 472.2 L 50.3 471.6Z M 47.9 472.4 L 46.7 472.8 L 45.9 471.9 L 46.4 470.4 L 47.9 471Z M 44.4 472.6 L 43.3 472.9 L 42.9 472.4 L 42.9 472.3 L 43.3 471 L 44.2 470.4 L 44.9 471.1Z M 45.7 475.8 L 44.2 477.2 L 43.5 476.7 L 43.3 476 L 43.3 474.7 L 44.6 474.1 L 45.4 475.2Z M 42.5 477.7 L 42.7 478.7 L 41.2 478.7 L 40.7 476.9 L 41.2 476.1 L 42.2 476.3 L 42.5 477.1Z M 41.2 479.6 L 42.1 481.6 L 41.9 482 L 41.8 482.8 L 40.1 482.7 L 39.7 480.9 L 38.9 480 L 39.7 478.7Z M 36.3 471.5 L 33 471.2 L 33 470.2 L 33.9 469.5 L 36.3 470.7Z M 34.5 473.3 L 35.3 472.6 L 35.9 473.5 L 35.4 474.6 L 36.2 475.8 L 35 477.5 L 34.2 477.5 L 34.3 475.3 L 33.4 474.3Z M 37.9 484.5 L 38.7 485.4 L 37.7 486.6 L 34.6 487.5 L 32.3 487.5 L 31.9 486.7 L 33.9 485 L 35.1 484.1Z M 36.1 482.3 L 36.8 481.5 L 37.6 481.7 L 38.6 482.7 L 38.7 483.4 L 36.9 483.2Z M 31.5 481.6 L 32 482.7 L 30.4 482.7 L 30.1 480.4 L 31.6 478.7 L 32.1 478.8 L 32.4 480Z M 30.2 482.7 L 30.2 483.7 L 29.7 484.8 L 30.6 485.7 L 30.4 486.9 L 28.9 487.9 L 28.6 486.3 L 27.6 486.5 L 26.9 484.9 L 24.8 483.4 L 23 483.8 L 22.8 482.3 L 22.1 481.4 L 20.6 481.2 L 19.8 480.3 L 19.5 478.4 L 18.1 476.8 L 17.1 476.8 L 16.3 476.6 L 15.9 478 L 14.8 478.1 L 14 476.3 L 14.4 474.3 L 13.6 473.5 L 14.1 472.2 L 17 470.9 L 18.3 471.4 L 19.7 471.1 L 20.8 469.7 L 22 470.5 L 21.7 472.7 L 22.6 473 L 23.4 472.1 L 23.1 471.4 L 23.1 470.5 L 22.4 469.3 L 20.3 469 L 22.2 466.5 L 24 465.7 L 26.4 468 L 28.5 468.4 L 29.5 470 L 30.8 470.6 L 31 472.1 L 32.5 474 L 31.3 477.2 L 28.7 477.6 L 27.1 475.8 L 26.1 475.7 L 25.2 477.2 L 26.7 478.3 L 25.4 481.3 L 25.8 481.8 L 27 481.8 L 27.8 481.3Z M 44.4 490.4 L 46.4 489.5 L 47 489.9 L 48.2 490.5 L 47.8 491 L 47.6 491.8 L 46.7 491.8 L 45.9 493 L 44 491.5Z');
ahvenanmaa.attr({'fill':'#000000','stroke':'none'});
/*
...and so on..
*/
var st = paper.setFinish();
/*********************************************************************************
The below lines use the set to transform your SVG to:
(1)Translate (Move) your image to the top left of the paper.
(2)Scale your vector image to fit inside the the paper.
Remove this comment and alter or remove the code below it.
*********************************************************************************/
var translate='t'+(-1*st.getBBox().x)+','+(-1*st.getBBox().y);
st.transform(translate+'s0.91,0.91,0,0');
/*********************************************************************************
The below lines use the set to add event handlers.
As you mouseover the above code window vectors they change colour.
If your trying to locate a path, click on the vector image above...
Remove this comment and alter or remove the code below it.
*********************************************************************************/
function callback(member)
{
member.mouseover(function (e) { this.ofill=this.attr('fill');this.attr({fill:'#ffffff'}); });
member.mouseout(function (e) { this.attr({fill:this.ofill}); });
member.click(function (e) { var thisPath=this.attr('path');alert('You just clicked on Element #'+this.id+'.To help you find it in the code its path starts with......'+thisPath); });
}
st.forEach(callback);
}
</script>
</head>
<body>
<div id="canvas">
<div id="paper"></div>
<div id="pohj_pohjanmaa"></div>
<div id="lappi"></div>
<div id="pohj_pohjanmaa2"></div>
<div id="kainuu"></div>
<div id="etela-karjala"></div>
<div id="etela-savo"></div>
<div id="pohj_savo"></div>
<div id="kanta_hame"></div>
<div id="paijat_hame"></div>
<div id="ahvenanmaa"></div>
<div id="varsinais-suomi"></div>
<div id="etela_pohjanmaa"></div>
<div id="keski_suomi"></div>
<div id="pirkanmaa"></div>
<div id="satakunta"></div>
<div id="kymenlaakso"></div>
<div id="keski_pohjanmaa"></div>
<div id="uusimaa"></div>
<div id="etela_karjala"></div>
<div id="pohjanmaa"></div>
</div>
</body>
</html>

The biggest thing that the converter did was pull that the path data from the SVG files that you fed it. My suggestion is to use that data, but with other code.
In order to simplify and keep things as DRY as possible, you will want to create two objects. One will contain path data for each county and the other will contain counties attribute data. With these objects you can run a simple for loop and build your map that way. I hope the following code helps.
note that pathData represents the path strings such as 'M 192.9 S 9494 ...290 Z'
Javascript
//create Raphael county map
var countyMap = Raphael("canvas", 640, 480);
//create county map object to hold extracted path data
var finlandCounty = {
pohj_pohjanmaa:'pathData',
lappi: 'pathData',
kainuu: 'pathData',
etela_karjala: 'pathData',
etela_savo: 'pathData'
};
//create attribute object
var countyAttr = {
'stroke-width':1.9,
'stroke-miterlimit':4,
fill:'#000000',
stroke:'none',
'stroke-opacity':1
};
//loop through county object list and create the map
for (var county in finlandCounty) {
county = countyMap.path(county).attr(countyAttr);
//set click event
county.click(function(){
alert('You just clicked on Element '+this.id);
}
//set hover event
county.hover(
function () {
this.animate({fill: "#ffffff"}, 400);
},function () {
this.animate({fill:countyAttr.fill}, 400);
});
}
}
HTML
<body>
<div id="canvas></div>
</body>

The biggest problem with your code is that I don't see anywhere where you actually create the paper object. You simply use the variable paper assuming that it's a Raphael paper object but from your code it actually looks like it's undefined.
You need to create a paper object:
var paper = Raphael('paper');
If you look at Jon Black's answer he calls his paper countyMap and it's initialized on this line:
var countyMap = Raphael("canvas", 640, 480);
The paper doesn't have to be called paper and the variable paper is not a special magic variable that will automatically create a Raphael paper object. You need to create the paper object yourself and you can name it anything you like.
I strongly encourage that you write your code by using another name (like canvas for example) instead of paper for the Raphael paper object just to get comfortable with how things really work and avoid confusing yourself.

Categories

Resources