Visualize javascript data

The development of computer graphics is pushing us to the invention of new ways of graphical presentation of data. Various application programs were developed for data visualization on local computers. However, everything has changed with the development of the Internet: it contains colossal amounts 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 produce client-side rendering using JavaScript, why not take advantage of this opportunity? The logic of such a 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 the 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 the common tree;

Visit the homepage or look at one of the examples .

2. MIT Simile Web Widgets

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

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

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

3. MooWheel

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

Look at the home page of the project and a beautiful example .

4. JSViz

This library simplifies your life when generating 2D representations of information: network graphs, navigation, etc. It is worth looking at two examples:

1. Musical recommendations
   
   
2. Directed 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 complex visualization tools. It showed itself well in working with large amounts of data, providing an intuitive view of the data. You can use the Chronoscope in four different ways:

1. Widget - allows you to place a chart on any page;
2. Microformats - independently recognize 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’s home page , not forgetting to admire examples .

6. Processing.js

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

1. Drawing contours;
2. Mathematical functions;
3. Access to the 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 .

findings

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