d3 Charts for an Analytics Tool

Background

dRSTin is a data calculation and monitoring engine where visualization/charting is a form of output. The calculated data needs to be auto-charted in the best possible manner by taking as less inputs from user as possible. At the same time, users need to be given the flexibility to render the charts as per their choice.   Since we are competing against the big visualization tools available in the market, our charts need to be as appealing and user friendly.   The main function of the application is to monitor the data and report exceptions. So, the charts need to highlight the exceptions, if present.  

Requirements

General Requirements

  1. All Charts have to handle negative values. If it cannot, it has to take care of it in the ‘canrender’ function. For data having negative values, the axes will contain a zero-line and the data-points have to be aligned to it. For charts that do not have axis lines, negative values have to be handled w.r.t that chart.   2. All charts need to be able to handle both (a) Too few data points and (b) Too many data points In both the cases the charts have to be rendered in a visually understandable and appealing manner. The goal is to show as much information as possible by making the user click (or any other action) as less as possible.   3. All charts have to be responsive. The charts have to re-fit themselves to the size of the block allocated to it.    4. Charts have to behave uniformly, which is why the events of hover, click, zoom etc. need to be handled centrally. This is applicable for most charts. However, there may be exceptions.   5. There should not be repetitions or copies of any same functionality. To ensure uniformity/maintainability, any behavior that is applicable to more than one chart has to be handled thru one common function. During development of new charts, the common functions need to be used wherever applicable.   6. If a chart can be reused to create another chart, only one common function should be maintained for rendering the charts. The parent charting functions should  internally call the common function by passing appropriate attributes. E.g. one code for rendering pie & donut charts. Pie calls it by passing attribute radius=0. donut calls it by passing attribute radius=5. Same for linechart & scatterplot   7. All charts have to handle ‘alert’ records (explained in Understanding Data Structure section) and display them.   8. For each new chart, the required attributes need to be identified first. If the attributes/attributedeteminers are not already present, functions need to be written to determine the attributes from the data/metadata. OR userinput configurations need to be defined to get the attribute from the users. Refer Understanding Attributes for better understanding.  

New Charts

Create following new charts within Asmaka’s framework using D3   1. Sankey Chart   Please refer the following chart. http://www.brightpointinc.com/labs/federal_budget/   A similar chart is required wherein the radius/width of the circle/branch is determined by the value of the data. The animations are also required.   Note: The dimension hierarchy attribute required for this chart is readily available. No need to determine that.       2. Bullet Chart   Please visit the following link for references http://visualbi.com/blogs/business-intelligence/dashboards/bullet-charts-use-cases/     3. Stack Chart   The stack chart should be able to handle as many dimensions and facts as possible. Few examples are shown below. Depending on the number of dimensions/facts, the chart has to be rendered accordingly. While rendering (>2)-dimension stack charts, the drill-down, if any, also has to be taken care of.        

 

Fixing Existing Charts

Some of the charts have already been created. But A) They need some fixing in terms of overlapping labels, placement within the div etc. B) The look-n-feel can also be improved if possible. C) More moving attributes can be created to give users more flexibility in terms of rendering. (E.g. of an existing attribute - giving user the option to determine the circle size in a line chart or to have no circle at all)      

Understanding The Data Structure

The data that comes from the backend has the following structure   {   "metadata":[{}],   "data":[{}],   "alertcols":{},   "locationdata":[{}] }   Metadata:   The metadata contains information about each of the columns present in ‘data’. It has the following attributes   {       "synonyms": "",       "isindexed": "false",       "datatypecatalog": "string",       "fntype":"aggfn",  //Operation type. Present only if this col is result of an operation.       "fnapplied":"sum", //The operation that was applied. This needs to be used for drill-down/up/sankeychart etc.       "inhierarchies": "Country->State->City,Dept->City->Branch", //The hierarchy chains of which this column is part of. Required for drill & sankeychart       "datatype": "StringType",       "type": "column",       "issaved": "false",       "value": "City",  //column name       "hassubtotal": "false",  //if aggregation contains subtotal       "isderived": "false",       "dftype": "dimension",   //dimension or fact       "dimsubtypes": ""        //if dimension is of type location or duration. Currently blank     }     Data:   Contains the actual data to be plotted. E.g.   [     {       "Client Name": "Sundeep Enterprise",       "Client group": "Vijay",       "City":"Kolkata",       "Dept":"GST",       "Filing Status": "Individual",       "Work Type": "GSTR-3B(June)",       "Work Description": "GSTR-3B for June'18",       "Assigned To": "Sarfaraz",       "Date Assigned": "2018-07-12 00:00:00.0",       "Target Date": "2018-07-18 00:00:00.0",       "Due Date": "2018-07-20 00:00:00.0",       "Date Closed": "16/07/2018",       "Due Date Status": 0,       "Priority": "High",       "Work Status": "Done",       "Beyond target date": 0,       "Late by": "-2.0",                   "ALERTSTATUS": "alert text",          //Column present only if exception is detected in the record "ALERTCOLOR": "#FF5733" //Column present only if exception is detected in the record       }   ]   Alertcols:   dRSTin has the capability to detect exceptions for given KPIs. The exception records are marked with 2 additional columns/attributes as shown in the Data section above. The alert records are colored using the ‘ALERTCOLOR’ attribute. The alert text is shown on hover. Refer screenshot below. This attribute gives the names of the alert columns. It has a fixed value of   {   "text":"ALERTSTATUS",   "color":"ALERTCOLOR" }         Locationdata:   For data that contains information about a location, this attribute contains the lat-lon information so that geo-plotting can be done. A sample record is given below   [   {     "location":"Kolkata",     "lat":"22.572645",     "lon":"88.363892"   }  ]  

Understanding Attributes

Attributes are determined from the data/metadata etc. The attribute configuration looks like this   {   "name": "axes",   "displayname": "Axes",   "value": {"horizontal":"Country", "vertical":"Population"}, //null in default config. Populated by the determining method   "isdetermined": true,            //initially false, determining method sets it to true after determination   "determiningmethod": "determineaxes",   "appliesto": [     "linechart",     "barchart",     "piechart",     "donutchart",     "scatterplot",     "columnchart",     "areachart",     "geochart"   ],   "userinput": [     {       "keyname": "horizontal",       "keydisplayname": "Horizontal Axes",       "type": "select"     },     {       "keyname": "vertical",       "keydisplayname": "Vertical Axes",       "type": "select"     },     {       "keyname": "color",       "keydisplayname": "Legends",       "type": "select"     }   ] }   Attributes that can be identified by the system have a determining method with the following signature.   function (vistype, chartinginfo, datawithmeta)      

Charting functions

For each chart, a new js file needs to be created and added to the application. The charting function signature is as given below.   charts.linechart = function (divid, attributes, datawithmeta)   For each chart, a corresponding ‘canrender’ function also needs to be created. The function signature is as given below   charts.linechart.canrender = function(datawithmeta, attributes)