Posts Tagged ‘Javascript’

P-Value Calculators and Graphers in Javascript

September 5th, 2010

There are a lot of online tools out there for computing p-values and test statistics associated with common statistical distributions such as the normal or Student’s t-distributions. Unfortunately, most of them are either ad-ridden or powered by Java (and hence slow to initially load and finicky when it comes to which browsers they work with). So one of my summertime projects this year was to create a website that solves both of those problems:

The website computes p-values and test statistics in real-time via javascript (and thus does not need Java or any other plug-in). The computations themselves are fairly straightforward and are performed via the trapezoid rule. The graphic on the right is composed of a static PNG that displays the appropriate distribution. The distribution’s image is transparent under the graph and opaque above the graph, which makes it easy to display the p-value graphically – the light blue area is actually just a blue rectangle that is drawn beneath the distribution’s image.

Additionally, through the magic of PHP the tool automatically creates a URL that links to the current computation (and thus makes it much more citable). So, for example, if you want to know the T-value that corresponds to a right-tailed test with 12 degrees of freedom and a p-value of 0.1, you could simply click here.

Anyway, if you’re a nerd like me then enjoy it and of course feel free to leave any feedback/suggestions that you might have.

A Case for Canvas

October 30th, 2008

I recently came across this page, which shows a rudimentary rotating 3D cube made entirely of javascript. Since I’m a code geek I of course thought it deserved a kudo or two, but it got me thinking; why isn’t the canvas tag more widely used (or supported natively in Internet Explorer)? For those of you who don’t know what the canvas tag is, it’s essentially an environment for drawing things on the fly in web pages, without having to use a plug-in like Flash. It is probably something that is easiest to appreciate through some examples, so I present to you the following simple comparison of what can be done with javascript alone versus javascript plus the canvas tag (scroll your mouse over the cubes to rotate them):

Javascript Only:

Javascript and the Canvas Tag:

The top cube makes use of 18 images (for drawing the lines via the trick described here) and about 1.0kB of javascript code. The bottom cube is animated using 509 bytes of javascript code in conjunction with the canvas tag. That’s it — no auxilliary images or plug-ins of any kind.

Personally, I think that’s pretty awesome, and I wish that the usage of the canvas tag would leave the realm of the tech demo. People need to realize its potential and start really using it. It’s supported in all major current browsers (OK, you have to do some trickery to get it to work in Internet Explorer, but it still requires no work on the part of the end-user) and it does things that simply can not be done otherwise without loading a plug-in like Flash. Consider the following variation of the 3D rotating cube:

Colour Cube via Canvas Tag:

I believe that it’s flat-out impossible to replicate the above coloured cube using only CSS and javascript without the canvas tag, but even if it is possible, it certainly won’t be easy or scalable — the canvas tag is both.

Related Links

  • Canvas Tutorial – A tutorial provided by Mozilla for using the canvas tag.