22 October, 2008 10:26 am

Advanced Data Visualization Tools using Javascript

Posted by Richard Wong under Javascript | 12 Comments

With the advance in computer graphics, the way we visualize data have changed drastically in the last 20 years. Visualization Software are developed to take advantage of the graphical power of local computers. But now everything is changing with the Internet. We are consuming a large amount of data online and the desire and expectation to visualizing those data is increasing too. So we need to look at solutions to visualize data for the web.

There are already server side tools or libraries that generate complex graphics. But I think that is not always the best solution. A lot of the visuals could be done on the client side with the browser. It is quite logical to send just the data and let the browser handle the rendering and interaction.

Of course there are a number of client side technology you could use including Flash, Sliverlight, or even Java Applet. But here I want to show you some amazing open source tools built with pure Javascript. With most of the browsers improving their Javascript engines, Javascript is really becoming quite powerful and people are doing a lot of cool stuffs with it and here are some of them:

Continue reading »

20 October, 2008 11:38 pm

Attractive Javascript Logging Console - Blackbird

Posted by Richard Wong under Javascript, Tools | 0 Comment

Everyone who programmed in Javascript will know that one of the most common way to debug across browsers is the alert() function. Although, you can use tools like Firebug and their console api to output. It doesn’t work on IE or Safari. So a pure Javascript based solution would be great.

Blackbird is one of the latest script that does just that. It offers:

a dead-simple way to log messages in JavaScript and an attractive console to view and filter them. You might never use alert() again.

All you need to do is include the Blackbird script and style. Then you can start logging messages using their APIs including different message types and profiling as shown below:

log.debug( message )
Add a debug message to Blackbird
message: the string content of the debug message
log.info( message )
Add an info message to Blackbird
message: the string content of the info message
log.warn( message )
Add a warning message to Blackbird
message: the string content of the warn message
log.error( message )
Add an error message to Blackbird
message: the string content of the warn message
log.profile( label )
Start/end a time profiler for Blackbird. If a profiler named string does not exist, create a new profiler. Otherwise, stop the profiler string and display the time elapsed (in ms).

Blackbird

21 September, 2008 11:02 am

Charts and Graphs Plotting with JQuery plugins

Posted by Richard Wong under JQuery, Javascript | 7 Comments

Charts are important in visualising data to give a more profound understanding of the nature of given problem. A good charting solution for should render charts dynamically from raw data and allow multiple type of data presentation.

Traditionally we generate charts on the server-side but that means it will take up more bandwidth by the image all the way across the internet. Ideally we would just send the data to the browser and it will render the chart. With the advance in javascript and browser support, we have many powerful chart components out there based on Javascript. Now with the help of javascript frameworks, we can create charts in just a few lines of code.

Continue reading »

18 August, 2008 2:41 pm

Raphaël - simplify development of Vector Graphics

Posted by Richard Wong under Javascript | 0 Comment

When it comes to cross browsers vector graphics, there have always been debate about whether to use SVG/VML or Canvas/VML. Even if you made the decision, you still need to know how to implement them.

Now Raphaël is aiming to simplify development with vector graphics across browsers. It provides us with a simple adapter to work with vector graphics using SVG/VML.

Below is an example of the basic:

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);

// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white (#fff)
circle.attr("stroke", "#fff");

If you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.

Raphaël - javascript library

8 July, 2008 12:27 am

Becoming a better Javascript Programmer using JSLint

Posted by Richard Wong under Javascript, Tools | 1 Comment

I have recently came across this interesting and useful Javascript tool called JSLint. You feed in your javascript code and JSLint will scan through and looks for problems in your code.

You might ask what is the different between this and debugging using Firebug? Well, although it is only a syntax checker and validator, it is much more stricter and follows proper Code Conventions. In other word, it will tell you errors you normally won’t get.

As you know, Javascript sometimes allows code to be implemented in a sloppy way which could be very troublesome for large complex projects. So I have been using this tool as a reference point to tighten up my javascript code.

So go and paste your code at JSLint and see how your code is doing. But I must warning you, it might hurt your feeling!

Source: JSLint

Previous Posts