Simple javascript-based data visualization: DVisual

Simple javascript-based data visualization: DVisual

I haven't updated my blog for a long time. I used to write a blog Summary after I learned the New Things algorithm. Last year, I also had an internship for a while, and I didn't have much time to get through the big blog, so it has not been updated for a long time.

I have read a lot of data visualization books recently, so I just want to make some things, and I am going to take "data visualization KIT development" as a graduation project, it took a week or two to write a DVisual file. Currently, only some basic charts are supported. Some cool icons and mouse operations may be added later.

Of course, if you want to draw a simple chart on html without any special requirements, you can try it now. This article will briefly introduce some usage methods in Chinese, it seems quite convenient for me to use it.

 

 

1. How to start

A. First, add the dvisual. js file to your html code.

 

<script type=text/javascript src=dvisual.js></script>

B. Create an instance and input your canvas id.

 

 

dvisual = new DVisual('canvas_id');

C. then you can create various chart elements. I have a unified method for all chart element classes, draw (dv ), therefore, complex images are combined by basic images such as Dot, line, and text. Here we add a bar chart: All parameters are input using args. args is a dictionary-like thing. Just write it as follows.

 

 

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 it using draw ().

dvisual.addElement(bar);dvisual.draw();

 

In this way, we can get an image like this: You can also merge the above c, d into a sentence without affecting Image Generation.

2. Available classes and optional parameters.

 

The detailed description can be found in the doc. Here is a brief summary of the parameters in table 1 (You should not use the basic graphic elements on the dot/line surface ).

A. DVBarchart ()

This is the class we used to draw the above figure. In addition to the normal bar, it can also draw stacked bar. Let's 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 args content. The rest is the same as in the first step. The style parameter controls the chart type. We can see that we have not passed in the Y parameter at this time, because the data is no longer two-dimensional, but each bar has several pieces of data, so we use stackedY to pass in the value, stackedClass is used to input the name of the stacked data on each bar. As for stackedColor, the function is obvious. Of course, you can also choose not to input it so that it is random (this applies to all colors ), to see the effect:

 

B. DVMulBarChart

If we want to create a multi-dimensional bar chart with multiple bars under each label, 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 not required, because at this time, each X [I] should correspond to a Z. the length array, so it should look like the above, the image is drawn as follows:

C. DVLineChart ()

When it comes to graphs, the first thing that comes to mind is the scatter plot and line chart. This is implemented in DVLineChart. It not only supports scatter points and line charts, but also area charts ), that is, the area that consists of the X axis, and the bubble chart. Let's take a look at the example below:

 

divisual.addElement(new DVLineChart({'X':[1,2,3,4,5,6],                                     'Y':[1,2,3,4,5,6],                                     'style':'dot|line'}));

X and Y are the x and y values of all vertices. The following style is set to dot | line, which has four types: dot, line, area, and bubble, the first three types can be used in combination. The bubble can only be used independently because it involves different data. The drawing is as follows: (if you change the style to 'dot | line | area', the right side is like this:

 

For a bubble chart, the difference is that we want to add the radius of each bubble, so it should be like this:

 

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 multiple line segments or Multiple Buckets 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'}));

It can be seen that the parameters change from X, Y, bubbleRadius to Xs, Ys, Zs, and "classes" indicates the names of different types of data. Of course, you can also import the color colors, not added here, it is random.

 

We can see that the source of the drawn image is not in the bottom left corner. Therefore, the image uses a red line to identify the 0-value coordinate.

 

E. DVHistChart

 

This is relatively simple. Just pass in a series of values. You can also set the statistical interval through the sec, and set the yStyle to display the 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 the two graphs are very simple. You can simply refer to Tutorial.


 

3. Summary

This component currently only implements these basic things and is perfect as much as possible, such as the name of x and Y axes, whether the table is drawn, and the content displayed in Pie, you can set these parameters. If you may add some new tall images or increase the mouse operation response, you can continue to enrich them ~~~~