Archive

Javascript

JSData is an open source project I just started. I felt like there weren’t enough good libraries for data-visualization in jQuery and Javascript.

JSData extends jQuery and uses HTML5 Canvas to draw out the data. It is 100% interactive and I plan on making it even more interactive, to the point where you can edit the data from the graph itself.

Even though this is in ultra alpha, I felt like releasing it to the community as a baby would be good for educational purposes if not for implementation purposes yet.

 

Anywho, you can find this project on my GitHub account or:

HERE

 

-Brandon

I have been having some fun with Array construction lately. You can do some really fun, elegant things with JavaScript. Here are some fun and cool looking snippets that make some pretty useful/awesome Arrays using abstraction.


makeEmptyArray(size):

function makeEmptyArray(size){
   return Array(size).join(' ').split(" ");
}

Before we do some awesome stuff, we need arrays that don’t have undefined elements. We do this by making an array, then joining and splitting the array so that its elements are not undefined (Array(size) makes an array with all undefined elements, this won’t do if we want to map the array). You can picture it this way: imagine you have 5 boxes, but these 5 boxes are collapsed and still need to be constructed before you can start putting things in them, and that is exactly what this function does.


fillArray(size,filler):

function fillArray(size,filler){
   return makeEmptyArray(size).map(function(){ return filler; });
};

Here we have a simple function that fills in the empty array with some filler.


zeroes(size):

function zeroes(size){
   return fillArray(size,0);
}

This is just an example of a function that would be practical.


mapArray(size,mapFunc):

function mapArray(size,mapFunc){
   return makeEmptyArray(size).map(mapFunc);
}

Here is a really fun function that is also really simple in design. It allows you to make an extremely custom array with just a few lines of code.


range(start,end):

function range(start,end){
   return start>=end ? [] : mapArray(end-start, function(){ return start++; });
}

This small function will create an array from start to end with end being exclusive, and if there is a problem with the indexes it just returns an empty array.

In practice, range(0,7) would return [0,1,2,3,4,5,6].


grid(width,height):

function grid(width, height, gridFunc){
   return mapArray(height, function(){ return mapArray(width, gridFunc); });
}

Don’t you love abstraction? This function makes a grid with a width width and a height height using gridFunc as the manner of filling in the elements.

Using this, a simple line of code can fill in a grid of zeroes:

var zeroRectangle = grid(7,4,function(){ return 0 });

Identity Matrix

function identityMatrix(n){
   var i = 0;
   function gridFunc(value,index,array){
      var y = Math.floor((i++)/n);
      return index == y ? 1 : 0;
   };
   return grid(n,n,gridFunc);
}

I think this function shows just how powerful abstraction can be when it comes to arrays.


Here are all of the functions from this post in one code snippet.

All of the code:

function makeEmptyArray(size){
   return Array(size).join(' ').split(" ");
}

function mapArray(size,mapFunc){
   return makeEmptyArray(size).map(mapFunc);
}

function range(start,end){
   return start>=end ? [] : mapArray(end-start, function(){ return start++; });
}

function grid(width, height, gridFunc){
   return mapArray(height, function(){ return mapArray(width, gridFunc); });
}

function identityMatrix(n){
   var i = 0;
   function gridFunc(value,index,array){
      var y = Math.floor((i++)/n);
      return index == y ? 1 : 0;
   };
   return grid(n,n,gridFunc);
}

Isn’t abstraction fun?

-Brandon Layton