Visualize JavaScript

The development of computer graphics is pushing us toward the invention of ever new ways to graphically represent data. Various application programs were developed for visualizing data on local computers. However, everything has changed with the development of the Internet: it contains colossal volumes of information that we constantly want to present as something more convenient, friendlier, more understandable. What do we have today?

There are a considerable number of server libraries and utilities that can generate complex graphics. However, I believe that this approach is not always optimal. If we can do client-side rendering using JavaScript, then why not take this opportunity? The logic of this bundle is simple: the server generates data, and the client visualizes them.

Of course, you can use Flash, Silverlight, or Java applets, but in this review I would like to show you visualization libraries written in pure JavaScript.

1. JavaScript Information Visualization Toolkit (JIT)

JIT comes with four utilities:

1. RGraph - circular trees with nice animation;
2. Treemaps - display of large hierarchical structures in a limited space;
3. Hyperbolic Trees is a visualization method that is best suited for presenting related data;
4. Spacetree - extension of context-related nodes from a common tree;

Visit the homepage or look at one example .

2. MIT Simile Web Widgets

Using this toolkit, you can create visualizations of digital data sets (timelines, for example).

1. Timeplot - visualization of ongoing events over time;
   
2. Timeline - visualization of events (Google Maps for event information)
   

On the project home page you can find documentation and see some examples of the library.

3. MooWheel

MooWheel offers a beautiful way to render data using canvas . You can use it to display connections between people, places, things, etc.

Look at the project home page and a beautiful example .

4. JSViz

This library simplifies your life when generating 2D representations of information: network graphs, navigation, etc. Two examples are worth a look:

1. Musical recommendations
   
   
2. Directional graph
   
   
   

Other examples and documentation are on the home page .

5. Chronoscope

This is perhaps one of the most intelligent and powerful, but at the same time sophisticated visualization tools. He showed himself well in working with large amounts of data, providing an intuitive presentation of data. You can apply Chronoscope in four different ways:

1. Widget - allows you to place a chart on any page;
2. Microformats - independently recognizes the data enclosed in the table element . The easiest way to add comments to charts;
3. JavaScript API - using JavaScript to modify graphs on the fly;
4. GWT API - Integration with Google Web Toolkit.

It is better to contemplate all this beauty on the project home page , not forgetting to admire examples .

6. Processing.js

Processing.js is a porting to JavaScript Processing . Some of the methods that the library supports are:

1. Contour drawing;
2. Mathematical functions;
3. Access to mouse and keyboard;
4. Drawing images;
5. Color management.

In addition to them, there are many others that can be read on the project page .

conclusions

You probably looked at some examples of how some scripts work. As you may have noticed, some of them are still in the experimental stage of their development, therefore they experience problems with performance. Nevertheless, I am sure that the time will come when we will see much more scripts for presenting data on the Web, and browsers will learn how to quickly execute them.