These are some notes about JavaScript that can be useful for working with data:

Arrays

Arrays are the simplest way of working with JavaScript and they are fundamental to infovis.

These are the main operations:

  • new Array(size) creates a sized array with all undefined elements
  • [item1,item2] creates an array of 2 elements
  • myarray.length returns the length
  • myarray.push(value) appends a single item
  • myarray.concat(myarray2) appends another array

Consider extraction of parts of the array using splice: myarray.splice(index, howMany, [element1][, ..., elementN] and in particular:

  • myarray.splice(10,5) takes 5 elements from the 11th

Also splice allows to insert or replace elements. The elements selected by splice (also 0) are replaced by the elements passed as arguments

  • myarray.splice(10,1,value) replaces the 11th value
  • myarray.splice(10,0,value) inserts value after 11th value

Then we have:

  • myarray.pop() removes last element
  • myarray.shift() removes first element
  • myarray.unshift(value) prepends a value

Reference

Cloning Objects

Cloning is distinguished between shallow and deep (see this). Let's start with shallow cloning: Arrays can be shallow cloned using:

[].concat(inarray)

Objects can be shallo cloned using the extend function:

Object.extend = function(destination, source) {
  for (var property in source)
    destination[property] = source[property];
  return destination;
};
myobj  = { a:10,b:20}
Object.extend({},myobj)

Function operator and scope

Functions are created with the function operator function (args) { body }. It is important to understand how variables referenced in functions are solved.

var zyx = 5
function top()
{
    var xyz = 10
    return function (q)
    {
        return q + xyz + zyx // value of xyz is fixed here, while zyx is solved dynamically
    }
}

function use(fx,x)
{
    var xyz = 20 // it is ignored
    zyx = 2 // it is used here
    return fx(x)
}

print (use(top(),100)) // 112

Exceptions

/*
  Exception Statement
  */

try
{
    x()
}
catch(e)
{
}
/*
  Exception Statement with Finally
  */

try
{
    x()
}
catch(e)
{
    print("exception!")
}
finally
{
    print("final")
}
/*
 Exception Types

 # ECMAScript exceptions:
    * Error: name,message
    * EvalError
    * RangeError
    * ReferenceError
    * SyntaxError: message fileName lineNumber
    * TypeError
    * URIError
# DOM exceptions:
    * DOMException
    * EventException
    * RangeException
 */


 /*
  Conditional Exception Types
  */

try
{
    throw "InvalidNameException"
    x()
}
catch(e if e == "InvalidNameException")
{
    print("matched exception ",e)
}
catch(e)
{
}
/*
 * Then Error type
 */

try
{
    throw new Error("ciao")
}
catch(e if e instanceof Error)
{
    // do something
}

/*
 * Then Error type
 * https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Error
 */

 function sub()
 {
     throw new Error("ciao") // message
 }
try
{
    sub()
}
catch(e)
{
    print("Name:",e.name," Number:",e.lineNumber," Message:",e.message)
    print("Stack <",e.stack,">")
}

/**
 * Wrapping Call with
 */


function safeInvoke(fx1,fxerror)
{
    try
    {
        return fx1()
    }
    catch(e)
    {
        fxerror(e)
        return undefined
    }
}

safeInvoke(function () {  }, print)

Google Visualization API

Details here

1. First use <script> for accessing the API

  <script type="text/javascript" src="http://www.google.com/jsapi"></script>

2. Then in another script section load the library and the specific packages

  google.load('visualization', '1', {'packages':['piechart']});

3. Associate your function to the loading status:

  google.setOnLoadCallback(drawChart);

4. Declare a target div for the content

  <div id="chart_div"></div>

5. Fill in your function drawChart with commands, associated to the target div.

  var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

6. Pass data to chart

  chart.draw(data,null);

Example: http://code.google.com/apis/ajax/playground/?type=visualization#pie_chart

Resources