Simple JavaScript-based visualization of data: dvisual

is also a long time did not update the blog, the main is to learn new things new algorithm to write a summary of the blog, last year is also around the internship for a while, there is not too much time to thoroughly understand tome, so it has not been updated for long.

Recently read a lot of data visualization of the book, so it is logical to do something, but also ready to "development of data Visualization kit" as a graduation design to engage in, spent one or two weeks to write a dvisual out, currently only support some basic chart drawing, the following may be added some more cool icons, and mouse operation and other functions bar.

Of course, if you want to draw a simple chart on the HTML, and there are no other special requirements, it is also possible to try it now, this article is simple to introduce some of the use of Chinese methods, I feel that this use is quite convenient

GitHub address, Welcome to star ~~~~~~.

There is a tutorial, English: Tutorial address, too English trouble to see below it:

====================================================================

1. How to get Started

A. First of all, add this dvisual.js file to your HTML code.

<script type= "Text/javascript" src= "Dvisual.js" ></script>

B. Then create a new instance and pass in the ID of your canvas.

dvisual = new Dvisual (' canvas_id ');

C. Then you can create a variety of chart elements, all of the chart element classes I have a unified method of Draw (DV), so the complex image is composed of the point line and the text of the base image combination. Here we add a bar chart: All parameters are passed to the args, and args is a dictionary-like thing, just write it down like this.

args = {' X ': ["ClassA", "ClassB", "ClassC", "CLASSD"]       , ' Y ': [5,9,4,8]};bar = new Dvbarchart (args);

D. Add the chart to our Dvisual instance and draw at the end using draw ()

Dvisual.addelement (BAR);d Visual.draw ();

So we can get an image like this: you can, too. The c,d merged into one sentence does not affect the generation of images.

2. Available classes and optional parameters.

This can be found in the doc for detailed instructions. Here is a simple summary of the parameters of a table (you should not use the underlying graphic elements on the point line).

A.dvbarchart ()

This is the class we used to draw the graph above, and in addition to the usual bar, it can draw stacked bar and look at the code:

args = {' X ': ["bar1", "Bar1", "Bar3"],        ' stackedclass ': ["Stacked_1", "Stacked_2"],        ' stackedy ': [[1,2],[3,4],[ 5,6]],        ' style ': ' Stacked ',        ' stackedcolor ': [New Dvcolor (55,185,241,0.5), New Dvcolor (207,231,62,0.5)]}

This gives the contents of the args, the other is the same as in the first step, and the style parameter controls the type of the chart. We can see that we have not passed the "Y" parameter at this time, because the data is not two-dimensional, but each bar has a few data, so we use Stackedy to pass in the value, Stackedclass to pass the data name stacked on each bar, As for Stackedcolor, the effect is obvious, of course you can not pass in, so it is random (this applies to all color), to see the effect:

B.dvmulbarchart

If we want to create a multi-dimensional histogram, where there are more than one bar under each label, then we need to use Dvmulbarchart:

args = {' X ': ["A", ' B '], ' Ys ': [[[3,2,4],[5,7,8]], ' Z ': ["First", "second", "Third"]}dvisual.addelement (New Dvmulbarchart ( args));

"Y" is also not required, because at this time for each x[i], should be corresponding to a z.length long array, so it should be the above look, the image is drawn as follows:

C.dvlinechart ()

When it comes to graphs, the first thought may actually be scatter plots and line charts, which are implemented in Dvlinechart, which not only supports scatter and wiring, but also area maps (area), which are areas of the x-axis, and bubble charts, not to mention, to see examples:

Divisual.addelement (New Dvlinechart ({' X ': [1,2,3,4,5,6],                                     ' Y ': [1,2,3,4,5,6],                                     ' style ': ' Dot|line '});

x, y and Y are all the points, it is intuitive, the following style is set here as Dot|line, it has four kinds: Dot,line,area and bubble, of which the first three can be combined, bubble because there are different data, so can only be used alone. The drawing is as follows: (If you change the style to ' Dot|line|area ') It is the right:

For bubble charts, unlike above, we want to add the radius of each bubble, so this should be the case:

Divisual.addelement (New Dvlinechart ({' X ': [1,2,3,4,5,6], ' Y ': [1,2,3,4,5,6],                                    ' Bubbleradius ': [1,2,3,4,5,6],                                    ' style ': ' bubble '));

D.dvmullinechart

Of course, like bar, if we have more than one line or multiple bubble to draw, we need to use Dvmullinechart.

Dvisual.addelement (New Dvmullinechart ({' Xs ': [[[1,-2,3,4,5,6],[1,2,3,4,5,6]],                                        ' Ys ': [[1,2,3,4,3,6],[- 3,5,2,7,5,2]],                                        ' Zs ': [[3,2,1,4,5,7],[3,2,7,6,8,4]],                                        ' classes ': [' A ', ' B '],                                        ' style ': ' Bubble '});

As you can see, the parameters are changed from X,y,bubbleradius to xs,ys,zs,"classes" to represent the names of different kinds of data, and of course you can also pass in the color colors, which is not added, is random.

You can see that the origin of the drawn image is not in the lower-left corner, so the image is marked with a red line for 0-value coordinates.

E.dvhistchart

This is relatively simple, pass in a series of values, you can also set the statistical interval through the SEC, as well as Ystyle set the display number or percentage.

Dviusal.addelement (New Dvhistchart ({' X ': [4.845526425588935, 4.259344936827764, 3.8098053040235538, 1.952000211472447, 4.635797415383389, 4.024019790968537, 3.3602908242946734, 5.904528760874355, 4.198898591038685, 3.590128975916881, 4.332713128186926, 3.1865396813511784, 2.5162865661667198, 4.712821025260148, 3.71360994330834, 3.8493524061913744, 3.7159258918857536, 5.51399789047954, 3.6300232108929382, 3.545076471891732, 3.0676446553817147 , 3.2444930114999093, 3.5479330646839933, 4.976746738515327, 3.9332813190873934, 5.006312033998867, 3.404727953308918, 3.5033407619438233, 3.079551989356432, 3.8632840581876042, 3.157986089467415, 3.4195326824382866 , 3.8080356643280124, 2.957309227091329, 4.118392736251364, 3.6411410599078917, 3.7624757886685964, 4.8647889699576226, 5.21796736714372, 3.976067213322964, 5.126928746440573, 3.974656703704623, 3.233580498913617, 4.395312593899124, 4.068962687058488, 3.891929789953702, 4.469243993566407, 4.334454703693426, 3.9209889294562856, 3.4434304992247453, 4.497549493028219, 3.416343894896489, 4.665283209646114, 4.680609105269387, 4.983997832840491, 3.6712180044043317, 3.265064804033842, 3.4698542145767295, 3.600410757683259, 3.258705331315113, 3.4711330714824475 , 5.850035283124024, 4.4280162444420395, 2.9032881754752737, 3.8438971175165753, 4.876106607781984, 2.558687703308084, 3.5013932005344044, 3.5555419525521454, 5.1907150725045845, 4.011722379620389, 3.527897189378135 , 4.10495828533477, 6.62176464809461, 4.2726902430636144, 3.900071148628866, 2.575252541466217, 5.328266087881893, 2.5589399335225336, 5.724120236174612, 4.4515392634560085, 4.7151321389757594, 2.8531894976428953, 3.4703243319242265, 2.2640882905146724, 5.0719845838182795, 3.574145032952119, 4.477360695988922, 5.779618114520955 , 4.456319741265055, 3.8274174274387756, 6.050865845999171, 5.286157426108568, 4.197556181625366, 3.2386132037552726 , 4.409816073319034, 4.225877761979799, 5.313407146149141, 5.042124222577709, 3.979632468039347], ' yStyle ': ' VALue '})) 

F.dvpiechart and Dvradarchart

The parameters of these two graphs are simple, see Tutorial directly.

3. Summary

This component currently only implements these basic things, as far as possible, such as the name of the x, Y axis, whether the table is drawn, the content shown in pie, which you can set by the parameters, if possible to add some new tall graphics, and increase the mouse operation response and so on, will continue to enrich it is the ~ ~ ~

Finally, ask for a star~~~!!! on GitHub. ~ ~ ~!!!

Simple JavaScript-based visualization of data: dvisual