drawing scatter plot with html5 canvas and pure javascript no libraries with logarithmic axes

Question

I posting my question because I couldn't find info anywhere, most tutorials require the use of fancy libraries and I just wan't to draw a html5 canvas scatter plot from two json multidimensional arrays containing the following data example:

{ 'dataset1' [ { "p0" : "0.69", "log(p0)" : "14", "p0_name" : "cn95" }, ]

and for the other axis

 { "p1" : "0.69", "log(p1)" : "14", "p1_name" : "dn95" }, 

the example I'm trying to recreate is something like this.

The biggest problem I have is getting the canvas use logarithmic scales. You can see from the example link that that is required to see something from the data. A fiddle would be great to play with and create my own! This is what I have so far:

http://jsfiddle.net/3L4humdv/ and this is the data im using link

Answer 1

Canvas cannot use logarithmic scale out of the box, you'll have to provide a function for your points to scale them yourselves.

I would suggest following procedure:

• Have a function taking value of one axis and its max.
• Normalize inside the function
• Then apply logarithmic function to the value and return
• Use the normalized value with canvas width/height to plot the point

Use the same function for drawing the graph container as well as the points/lines etc.

As an example, with a "pseudo" (as in no particular purpose) log function:

var ctx = canvas.getContext('2d'),
    w = canvas.width,
    h = canvas.height - 10, // give room for point/text
    maxHeight = 1000,
    axisStep = 100;

function myLog(v, max) {
  var n = v / max;          // normalize
  return n * n * n;         // some log formula
}

// draw scale per axis step
for(var i = 0; i < maxHeight; i += axisStep) {

   // get normalized value, multiply with canvas height and reverse axis
  var y = h - myLog(i, maxHeight) * h;

  // show axis mark each 100
  ctx.moveTo(0, y);
  ctx.lineTo(20, y);
}

ctx.lineWidth=2;
ctx.stroke();
ctx.fillStyle = "red";

// some random points between 0 and max height
for(var x = 30; x < w; x += 30) {
  var v = Math.random() * maxHeight,   // some value
      y = h - myLog(v, maxHeight) * h; // convert to y in canvas
  ctx.fillRect(x, y, 7, 7);
  ctx.fillText(v.toFixed(0), x + 9, y +7);
}

<canvas id=canvas width=500 height=500></canvas>

The same applies to the x value. Just replace the log function here with one appropriate for your purpose.

Hope this helps!