We Keep Coding

Local vs Absolute Coordinates in Snap.svg

https://jsfiddle.net/foreyez/mfcqx7vw/
var s = Snap("#svg");
var block = s.rect(100, 100, 100, 100, 20, 20);
block.attr({
fill: "rgb(236, 240, 241)",
stroke: "#1f2c39",
strokeWidth: 3
});
block.animate({ transform: "T0,0" }, 200);
I'm trying to translate this box to 0,0 - which would be the upper left side of the screen. But it doesn't move. So it's treating my capital T as lowercase t and using local coordinates. How do I get it to use absolute?

Snap is transforming absolutely already. It's just that the current SVG hasn't been moved by a transform, it's been set with x,y.
So you have 2 choices, animate the x,y or animate the transform and leave x,y alone.
Behind the scenes in the DOM, a transform does NOT change the x,y. It has a separate transform attribute. The two are not linked in any way.
block.animate({ transform: "t-100,-100", 200 );
jsfiddle
or
block.animate({ x: 0, y: 0 }, 200 );
jsfiddle
It depends really what you are trying to achive, there's no right or wrong way, but if you wanted a solution that will work for circles and groups for example (as a circle doesn't have an x,y it has cx, cy) then a transform may be the way to go.
Think about the svg elements as being on graph paper. You can either reposition the element on the graph paper, or move the whole graph paper.
Now, if you really wanted to do a relative transform, you would have to have a transform on it in the first place for it to be relative to (otherwise its relative to default of 0,0 top left).
So if we start off by creating a rect without using x,y and using a transform of t100,100 to move it into the same place
var block = s.rect(0, 0, 100, 100, 20, 20).transform('t100,100');
jsfiddle
You could then move it relative to that initial transform positioning, by including the existing transform first. So it would look like...
block.animate({ transform: block.transform() + "t-100,-100" }, 200);
jsfiddle
This will relatively will move it -100,-100 more to the left, and up.
If you wanted absolute, it would be..
block.animate({ transform: "t0,0", 200 );

How to move to another position and " animate " a circle in Raphael js

I have created a dot as a small circle and wanted to animate to see how it works it moving from the x : 300, y : 390 , r: 5 to 300, 130 . I have searched on the web how to animate a circle and found more about how to animate the RADIUS of it, but is not what I need. I want the same radius dot to move from one point to the otherone. I found some things about along the path / " .animateAlong()" . Is this what i need ? Which are the attribute this " along the path are expecting ?
I want the circle to move animate once the code runs. Don't want to change the position by mouse listening.
Would appreciate some clarity about it , if possible a simple code example for me to see how does it works.

You just need to set the respective attribute you want to animate, in this case cx & cy (cx, cy is center for circle, rects have x,y).
myCircleElement.animate({ cy: 150 }, 2000);

How to get mouse coordinates inside a scrollable div or svg from the top left corner?

I have a scrollable svg element (it's width and height are constant but it is actually larger in dimension, and hence gets scrollbars because I have set overflow: scroll;).
This svg element is inside the body with other content. The body can also be scrolled around.
Without using JQuery, how do I get the mouse coordinates from the top left corner of the svg? By top left, I mean the top left including regions of the svg that have been scrolled out. (If I scroll to the very right in my svg I should get a high x value because the point is horizontally far from the actual left of the svg regardless of how it is scrolled).
Here is my attempt:
return new Vector(event.pageX - svg.offsetLeft + svg.scrollLeft,
event.pageY - svg.offsetTop + svg.scrollTop);
It doesn't work. scrollLeft and scrollTop are always 0.

Try leaving the SVG at its natural width and height and place it inside a <div> that has { overflow: scroll } and do the same computation on the DIV.
That should work in case there are browser quirks with reading the scrollLeft/scrollTop properties on SVG elements (I haven't tested yet to see if that's the case).
Update: you can use getBoundingClientRect() like this
var rect = container.getBoundingClientRect();
var x = e.clientX + container.scrollLeft - rect.left;
var y = e.clientY + container.scrollTop - rect.top;
Live example: http://jsfiddle.net/aag5fd39/1/

jQuery Flot: Set width of chart (without labels)

Is there any way to set the actual size of the chart (without its labels)?
I have a container that is 880 pixels width and I'd like to have the chart extend exactly to that and have the axes rather stick out. Right now it's of course applying padding so that the axes can fit in the designated area.
I fiddled around with fixed labelWidth options and negative margins applied to the container but that didn't get me anywhere useful.

To make the axes stick out, you can set the labelWidth and labelHeight of the axes (y and x, respectively) to a negative value and give the container a margin, so there's enough room outside.
CSS:
#placeholder {
border 2px solid red;
margin: 30px;
}
Flot options:
var options = {
xaxis: { labelHeight: -10 },
yaxis: { labelWidth: -10 }
}
There is still a gap between the container border and the plot, as you can see in jsFiddle. You can control that with the grid's minBorderMargin property, but it doesn't completely hide the plot border, so you may want to set the grid's borderWidth to 0, or set borderColor. I updated the jsFiddle with that.

Raphael Rectangle Border

When I draw a simple rectangle using the following code the bottom and right edge borders are thicker that the top and left edge borders. Why is this and can I stop it?
var paper = Raphael(10, 50, 500, 500);
var rect = paper.rect(100, 100, 100, 100);

Your rectangle's top and left borders, which are using the default 1 pixel stroke-width, are falling exactly on the top and left borders of your SVG element (as represented by a Raphael paper object. As opposed to pixel based drawing solutions, this means the line is essentially straddling the element's border, resulting in 0.5 pixels of your border stroke being clipped.
To solve, you simply need to shift your drawing over or shift the beginning offset of your SVG element's coordinates.
Here's a fiddle that shows one solution.

The square looks fine to me: http://jsfiddle.net/cMXBC/2/
Could you have some rogue css somewhere that is modifying the stroke of the rect? Try right-clicking the square and inspecting the rectangle in Firebug or with the Chrome inspector to see if there is any style that has been added.