Shulou(Shulou.com)06/01 Report--

How to use front-end code in the browser to build a Tableau, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Tableau continues to take the lead in Gartner's latest professional analysis of business intelligence software. Microsoft is also in the leadership quadrant because of PowerBI's excellent performance. And former leaders such as SAP,SAS,IBM,MicroStrategy have been gradually opened up the gap.

Because of its flexibility and excellent data performance, Tableau has become an undisputed leader in the field of BI. Its data-driven visualization and core idea comes from Leland Wilkinson's The Grammar Of Graphics, which is also affected by R's graphics library ggplot.

In the open source field of data visualization, we are familiar with the echarts developed by Baidu. After years of development, echarts is indeed very powerful and can be described as excellent. But Ant Financial Services Group's open source syntax-driven visualization library G2, based on The Grammar Of Graphics, is eye-catching. Let's take a look at how to use G2 and 500 lines of pure front-end code to implement a Tableau-like data analysis function.

Demo see https://codepen.io/gangtao/full/OZvedx/

See https://gist.github.com/gangtao/e053cf9722b64ef8544afa371c2daaee for the code

Data loading

The first step is to load data:

Three libraries are mainly used for data loading:

Axios Promise-based HTTP client

Alasql JS-based open source SQL database

Data table plug-in for jquery datatable JQuery

The data is loaded as requested by REST through a file in csv format that I store in GitHub. The following code changes the Promise of Axios into async/wait mode.

/ / Ajax async requestconst request = {get: url = > {return new Promise ((resolve, reject) = > {axios .get (url) .then (response = > {resolve ({data: response.data});}) .catch (error = > {resolve ({data: error});}}

Once encapsulated, we can send a REST request with the request.get () method to get the csv file.

Let csv = await request.get (url)

This step may encounter the problem of cross-domain requests, and files on github support cross-domain requests.

The advantage of storing the data in a SQL database is that when you prepare the data for the next step, you can easily use SQL for query and analysis.

Class SqlTable {constructor (data) {this.data = data;} async query (sql) {/ / following line of code does not run in full page view due to security concern. / / const query_str = sql.replace (/ (? X [f.name]); f.min = d3.min (data, x = > x [f.name]); f.mean = d3.mean (data, x = > x [f.name]); f.median = d3.median (data, x = > x [f.name]); f.deviation = d3.deviation (data, x = > x [f.name]) } else {f.values = Array.from (new Set (data.map (x = > x [f.name]));}} return summary;}

Here we use the type of data to determine whether each field is numeric or character. For character fields, we use JS6's Set to get all the Unique data. For the numerical type, we use the max,min,mean,median,deviation method of d3 to calculate the corresponding maximum, minimum, average, median and deviation.

The other is to use SQL query to further process the data.

In the example in the figure above, we use constraints to get a subset of Iris data.

In addition, G2 also provides the functions of Dataset:

Parsing source data, converting csv and dsv,geojson into standard JSON, viewing Connector

Processing data, including filter,map,fold (supplementary data) and other operations, view Transform

Statistics function, summary statistics, percentage, box sealing and other statistics functions, view Transform

Special data processing, including geographic data, rectangular tree map, mulberry map, text cloud data processing, view Transform

Data processing is a big topic, and our goal is to complete a data analysis tool with as little code as possible, so this step is only to use the SQL query provided by alasql to process the data.

Data presentation

After the data is processed, it is our core content, and the data is displayed.

The main purpose of this step is to use the selection controls provided by select2 to build graphical syntax to drive data presentation. As shown in the figure above, the corresponding G2 code graphic syntax is:

G2chart.facet ('rect', {fields: [' Admit', 'Dept'], eachView (view) {view.interval (). Position (' Gender*Freq'). Color ('Gender'). Label (' Freq');}})

The graphic syntax mainly consists of the following main elements:

Geometric marker Geometry

Geometric tags define what geometry is used to represent data. G2 now supports the following geometric tags:

The geom type describes point points and is used to draw various point maps. A path path, a line connected by disordered points, often used to draw a path map. Line line, the points are connected into a line according to the x-axis to form a line diagram. The area map is formed between the area fill diagram and the coordinate system, and the upper and lower range can also be specified. Interval uses rectangle or arc, using area to represent the size of the graph, generally constitute a bar chart, pie chart and other charts. Polygon polygons, which can be used to build color block maps, maps and other chart types. The link between two points of edge, used to build edges in tree diagrams and diagrams, and connecting lines in flowcharts. Schema custom graphics, used to build box chart (or box beard chart), candle chart (or K chart, stock chart) and other charts. Heatmap is used to draw the thermal map.

It should be noted here that intervalstack is officially supported, but the document does not mention it. When I read the API document of G2, I also found that the document is not very clear, and there are many places where it is not clear how to use API. This is also an area where open source software is worth improving.

Drawing Properties Attributes

Graphic attributes correspond to different elements in visual coding. You can refer to the visual attributes in my another blog data visualization.

There are mainly the following kinds of graphic attributes.

Position: location, mapped to x-axis, y-axis in 2D coordinate system

Color: color, including hue, saturation, and brightness

Size: size. Different geometric tags have different definitions of size.

Shape: shape, the shape of geometric marks determines the form of representation of a specific chart type, such as point graph, which can be represented by dots, triangles, pictures, etc. Line graphs can be represented by broken lines, curves, dots and lines, etc.

Opacity: transparency, transparency of graphics, this attribute can be replaced by color in a sense, it needs to be in the form of 'rgba', so we are independent in G2.

When building the syntax, we bind the graphic properties to one or more data fields.

Coordinate system Coordinates

The coordinate system is a two-dimensional positioning system composed of two kinds of position scales, which describes how the data is mapped to the plane where the graph is located.

G2 provides the following coordinate systems:

CoordType explains that the rect Cartesian coordinate system currently supports only two dimensions and is composed of two mutually perpendicular axes x and y. The polar polar coordinate system is composed of two dimensions: angle and radius. Theta is a special polar coordinate system, which has a fixed radius and only maps data to angles. It is often used to draw pie charts. Helix helical coordinate system, based on Archimedes helix. Facet Facet

Facet, divide a piece of data into several subsets according to a dimension, then create a matrix of charts, and draw each subset of data into the pane of the graphic matrix. Facets actually provide two functions:

Divide the dataset according to the specified dimensions

Typeset the chart.

G2 supports the following facet types:

Facet type indicates the default type of rect, and specifies 2 dimensions as rows and rows to form the matrix of the chart. List specifies a dimension, and you can specify how many columns a row has, beyond automatic line wrapping. Circle specifies a dimension that is distributed along the circle. Tree specifies multiple dimensions, each as a level of the tree, to expand the multi-tier chart. Mirror specifies a dimension to form a mirror chart. Matrix specifies a dimension that forms the facet of the matrix.

Note that in my code, only list and rect are supported for simplicity, using list when binding one field and rect when binding two fields.

In addition to the elements mentioned above, of course there are many other elements that we do not include and support, such as axes, legends, tips, and so on.

For more information about the syntax of graphics, please refer to here.

The core code for generating graphic syntax is as follows:

Function getFacet (faced, grammarScript) {let facedType = "list"; let facedScript = "" grammarScript = grammarScript.replace (chartScriptName, "view"); if (faced.length = = 2) {facedType = "rect";} let facedFields = faced.join ("','") facedScript = facedScript + `$ {chartScriptName} .facet ('${facedType}', {\ n`; facedScript = facedScript + `fields: ['${facedFields}'],\ n` FacedScript = facedScript + `eachView (view) {\ n`; facedScript = facedScript + `${grammarScript};\ n`; facedScript = facedScript +`}\ n`; facedScript = facedScript + `);\ n`; return facedScript} function getGrammar () {let grammar = {}, grammarScript = chartScriptName + "."; grammar.geom = $('# geomSelect'). Val (); grammar.coord = $('# coordSelect'). Val (); grammar.faced = $('# facetSelect'). Val () Geom_attributes.map (function (attr) {grammar [attr] = $('#'+ attr + "attr"). Val (); grammarScript = grammarScript + grammar.geom + "()"; geom_attributes.map (function (attr) {if (grammarattr] .length > 0) {grammarScript = grammarScript + "." + attr + "('" + grammarattr] .join ("*") + "'";}) If (grammar.coord) {grammarScript = grammarScript + ";\ n" + chartScriptName + "." + "coord ('" + grammar.coord + "');";} else {rammarScript = grammarScript + ";";} if (grammar.faced) {if (grammar.faced.length = = 1 | | grammar.faced.length = = 2) {grammarScript = getFacet (grammar.faced, grammarScript);} console.log (grammarScript) return grammarScript;}

Here are a few points to pay attention to:

Using the template string of JS can effectively construct code snippets

Use eval to execute constructed syntax-driven code to respond to select's change events for good interactivity. In the production environment, we should pay attention to the security risks of this method, because the pure front end, eval can bring less threat, in production, this execution can be run in a safe sandbox

You need to understand the syntax of graphics. Not any combination can drive effective graphics.

Here is a small hint for multiple selection of select2. By default, the order of multiple selection is fixed and does not depend on the order of selection. However, many graphic syntax is related to the order of fields, so we use the following method to correspond to the selection event of select.

Function updateSelect2Order (evt) {let element = evt.params.data.element; let $element = $(element); $element.detach (); $(this). Append ($element); $(this) .trigger ("change");}

To do this is to move the currently selected item to the last location of the data after each selection.

Some examples

All right, let's take a look at some examples of how to use graphical syntax to analyze and explore data.

Iris data set and scatter point diagram

Graphic syntax:

G2chart.point (). Position ('Sepal.Length*Petal.Length'). Color (' Species'). Size ('Sepal.Width') Car dataset line chart

Graphic syntax:

G2chart.line () .position ('id*speed')

Switch to polar coordinates:

Graphic syntax:

G2chart.line (). Position ('id*speed'); g2chart.coord (' polar'); Berkeley data bar chart

Data processing:

SELECT SUM (Freq) as f, Gender FROM table GROUP BY Gender

Graphic syntax:

G2chart.interval (). Position ('Gender*f'). Color (' Gender'). Label ('f'); Berkeley data stack histogram

Data processing:

SELECT SUM (Freq) as f, Gender, Admit FROM table GROUP BY Gender, Admit

Graphic syntax:

G2chart.intervalStack (). Position ('Gender*f'). Color (' Admit') Berkeley data pie chart

Data processing:

SELECT SUM (Freq) as f, Gender FROM table GROUP BY Gender

Graphic syntax:

Application of g2chart.intervalStack (). Position ('f'). Color ('Gender'). Label (' f'); g2chart.coord ('theta') Berkeley data facet

Graphic syntax:

G2chart.facet ('rect', {fields: [' Dept', 'Admit'], eachView (view) {view.coord (' theta'); view.intervalStack (). Position ('Freq'). Color (' Gender');}})

More analytical graphics are left for everyone to try.

This article shares an example of using pure front-end technology to build a Tableau-like BI application, the entire code statistics:

JS 370th line JS6

HTML 69 + 9 + 5 = 83 lines

CSS 21 Lin

With a total of 474 lines, it's not bad to be able to complete a good-looking BI tool with so little code. Of course, this is mainly because the open source community provides so many good front-end libraries for application, all I need to do is to make them work together effectively. This can only be regarded as a prototype, immature in terms of function and quality, but there should be a lot of people who want to embed one in their own applications if they can achieve the data analysis function of BI without any server in the browser.

After reading the above, have you learned how to use the front-end code to build a Tableau in the browser? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.