Game Changing Mobility

knowledge engineering blog

Month: August 2019

Interactive Data-Driven Visualization Using D3.js

We are always having a massive amount of data to deal with today. A visual representation is more perfect to express the data in a more meaningful way.

D3 is a successor to the earlier Protovis framework by Mike Bostock and team. Rather than any other libraries, D3.js allows great control over the final visual result and hence can be considered as a flexible way for data visualization.

What is D3.js?

Based on the data provided, the JavaScript library D3.js, manipulates documents. D3 stands for Data Driven Document. D3 helps us to bring life to data by using HTML, SVG and CSS.

We can certainly point out that D3 efficiently focuses on interactions, transitions and transformations which are making it more impressive and thus providing some awesome features for interactions and animations.

Why D3.js?

D3 is told to be data driven as it can use static data or can convert and use it from different formats like Arrays, Objects, CSV, JSON, XML etc… so as to produce different types of charts. Document Object Model (DOM) can be manipulated according to our data with D3.

More than 1000 different charts of D3.js are available on this site. You can easily look and use them for the different graphs you required and can also make changes in codes to get desired graphs.

How to work with D3.js?

As D3 is written in JavaScript someone who has experience in basic JavaScript coding can easily understand and learn it.

If you use npm you can install it as, npm install d3

To link directly to the latest release, you can copy this snippet on to your code:

<script src=""></script>

D3.js Examples

1. Creating Hello world using D3.js

A simple ‘Hello World’ can be displayed with the below code."body").append("span")

.text("Hello, world!");

2. Creating a pie chart using D3

For creating a pie chart, you can follow the below code referenced from this site .

// Create dummy data

vardata = {a:9, b:20, c:30, d:8, e:12}

// set the color scale

varcolor = d3.scaleOrdinal() .domain(data)

.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"])
// Compute the position of each group on the pie:

varpie = d3.pie() .value(function(d) {returnd.value; })

vardata_ready = pie(d3.entries(data))

// Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.

svg .selectAll('whatever')


.enter() .append('path')

.attr('d', d3.arc() .innerRadius(0) .outerRadius(radius) )

.attr('fill', function(d){ return(color( })
.attr("stroke", "black") .style("stroke-width", "2px") .style("opacity", 0.7)

D3.js creating pie chart

3. Creating a directive for D3 when working with Angular

If you are working with Angular you can create a directive that generates a graph and call that directive whenever you need a graph.

Let’s create an angular directive which can be used to generate both the pie chart and the donut chart.

// Import the libraries required

import { Directive, Input , Output , EventEmitter} from'@angular/core';

import { ElementRef } from'@angular/core';


// CSS selector that identifies this directive in a template here let’s use it as ‘appPiechart’




exportclassPiechartDirective {

//Define the input and output properties

@Input () chartOption : {};

@Output() piechartUpdated = newEventEmitter<D3.Selection<any, any, any, any>>();

//Create the parameters required

privatehost: D3.Selection<any, any, any, any>;

privatesvg: D3.Selection<any, any, any, any>;

privatewidth: number;

privateheight: number;

privateradius: number;

privatehtmlElement: HTMLElement;

privatepieData: number[];

privatesum: number;


constructor(privateel: ElementRef) {

this.htmlElement = this.el.nativeElement; =;

this.pieData = [];

this.sum = 0;





if(this.pieData.length !== 0){







// setup the radius, width and height, here we can provide the outer radius from the component html so that each pie chart be of the required size

privatesetup(): void {

this.radius = this.chartOption['outer_radius'];

this.width = (this.radius *2);

this.height = (this.radius *2);


// create the svg to show the pie chart

privatebuildSVG(): void {'');

this.svg ='svg')

.attr('height', this.height+40)

.attr('width', this.width+40)

.attr('viewBox', '0 0 '+(this.width+30)+' '+(this.height+30))


.attr('transform', `translate(${(this.width / 2)+7},${(this.height / 2)+ 20})`);


// function to build the pie chart

privatebuildPie(): void {

constpie = D3.pie()



this.sum = this.pieData.reduce((a, b) =>a + b, 0);

constarcSelection = this.svg.selectAll('.arc')




.attr('class', 'arc');



// Function to modify the pie chart as required

privatepopulatePie(arcSelection: D3.Selection<any, any, any, any>): void {

// Inner radius is defined for the donut chart, in case of pie chart the inner radius will be zero.

constinnerRadius = this.chartOption['inner_radius'];

constouterRadius = this.radius;

constarc = D3.arc()



// for each of the arc section drawing we are to give different colours.


.attr('d', arc)

.attr('fill', (datum, index) => {



// transition for each arc is provided so as to get better animations

.transition().delay(function(d,i) {

returni * 10; }).duration(1500)

.attrTween('d', function(d) {

vari = D3.interpolate(d.startAngle+0.1, d.endAngle);

returnfunction(t) {

d.endAngle = i(t);




// percentage of the data is shown with the animation on the pie/donut chart for the better understanding


.text((datum, index) => { letper = Math.round(this.pieData[index] * 100 / this.sum);return'' + per + '%'} )

.attr('font-size', 12)



.attr('transform', (d: any,index) => {

d.innerRadius = innerRadius;

d.outerRadius = outerRadius / 2;

return'translate(' + arc.centroid(d) + ')';


.attr('fill', (datum, index) => { return'white'; } )

.attr("dy", ".35em")

.style('text-anchor',(d: any,index) =>{






Now, as we have created the directive let’s call the directive on the component HTML template of angular. We can call the directive name ‘appPiechart’ within division where we require the chart.

Within the input properties ‘chartOption’ we are supposed to provide the data, colour and radius.

For a pie chart give inner radius as 0.

<divclass="pie-container"appPiechart [chartOption]="{data:pieData, colors:colors, outer_radius:90, inner_radius:0}"id="c2"></div>

D3.js For a pie chart give inner radius as 0.

For a donut chart give value to inner radius.

<divclass="pie-container"appPiechart [chartOption]="{data:donutData, colors:colors, outer_radius:90, inner_radius:55}"id="c1"></div>

D3.js donut chart



Easily we could create a pie and donut chart which is animated. Similarly, we can create many more charts with little effort. The wide availability of the different type of animated graph examples of D3 helps to put much effort into creating and modifying for better visualization.

Anusree P

What Makes Katalon a Fantastic Tool for Test Automation

Katalon: The friendly automation testing tool

Today there are many test automation tools available in the market.

But, why do we need an automation tool for testing at all?

What makes use of automation tool a “must-have” in the Software development industry?

In today’s software world, demand for high-quality apps and products within very tight deadlines gives very less time for testers to perform quality testing. It is just impossible to test the complete application/product manually every time there is a bug fix or new releases.

Also, when it comes to testing scenarios like a large number of users access the website or an application simultaneously, it leaves no choice for an organization than to hire several hundred thousand testers (and test machines too) to do a manual test.

However, these challenges can be overcome by a tester or an organization if they choose an appropriate automation tool that fits their testing requirement. Choosing the right automation tool helps in saving resources, time, effort and cost. It can also help in effective testing delivering a high-quality product meeting the deadline and thereby increasing organization revenue and achieving customer satisfaction.

Katalon Studio is one such test automation tool that provides advanced test generation capabilities, faster execution and excellent reporting features. With the evolving features, leveraging in-built features and templates, Katalon is becoming tester’s favourite automation testing tool.

What is Katalon?

Katalon is a free-license automation solution for testing web and mobile application. It is developed by Katalon LLC. Katalon’s first release to the public was in September 2016.

Katalon Studio is built on the open-source automation framework Selenium and Appium. It is a very user-friendly and simple tool with an intuitive interface. Katalon is becoming the number one testing tool in the software testing field. While with other test automation tools, it takes weeks to automate test scripts, Katalon Studio requires just a few hours to achieve the same.

Why Katalon?

What makes Katalon so powerful and unique in comparison to other test automation tools?

The main advantage of Katalon over other automation tools is that it requires very little coding experience.

While several other test automation tools require testers to have technical skills to design test scripts, Katalon Studio’s specialized IDE and simple interface make it very user-friendly for testers who have no prior coding experience. Testers with some development knowledge can use the advanced features of this tool for the automation purpose. Even a black box tester can use this tool efficiently for the automated testing of web and mobile applications.

The time and efforts required to design test scripts are greatly reduced using this tool. Reusability/ scalability aspects are some other major features of Katalon Studio. Katalon makes use of several of Selenium features, you can still leverage the features in Katalon Studio to build your own scripts.

What Makes Katalon a Fantastic Tool for Test Automation

Highlights/Features of Katalon:

  1. Katalon Studio plays an important role in DevOps toolchain. Tests can be easily integrated with CI tools like Jenkins and TeamCity using Console Mode Execution or non-GUI mode in Katalon studio. One can make avail of command-line mode execution by installing the Katalon Studio plugins using Katalon Store’s API keys. This is a very powerful feature supported by Katalon.
  2. Katalon Studio supports dual scripting interface. The black box testers with limited or no coding experience can use its simple interface to create test scripts. The tool has record and playback and manual mode for non-programmers. Katalon Recorder records the test actions, captures the web elements and plays the recorded steps. Testers can play their recorded scripts as many times as they want for their testing. The learning curve is very less as testers do not essentially need any coding experience in this case.
  3. Testers with an advanced level of coding experience can use the scripting mode for test script creation. Those who have knowledge in Groovy can easily edit the test scripts in scripting mode. Katalon Studio allows reuse of these automated test scripts.
  4. The tests recorded in Katalon Studio in one browser can be executed on multiple browsers (in parallel or sequential) speeding up the test cycle thus improving test coverage.
  5. Using its well-structured framework and leveraging built-in features, Katalon Studio enables to provide high-quality applications. For example, Katalon supports parametrizing test objects dynamically which means users can control object dynamically (sometimes the properties of object might change due to business rules). The Test Objects can be handled in both manual mode and in script mode. Katalon provides systematic and neat UI with menus, tree views and tables so that one can organize well their test cases, objects and data files. This makes Katalon well-structured framework.
  6. Features like Spy web utility is a great add-on in Katalon Studio. Using Spy web utility, object properties and locating method can be defined by the user themselves. This makes Katalon an intelligent tool.
  7. While we must use other third-party libraries to generate reports in other automation tools, Katalon provides reports in graphical format. Also, it generates reports in HTML, CSV or PDF format.
  8. Failures are reported with screenshots and logs.
  9. Script creation time is very less when compared to other test automation tools.
  10. Katalon Studio can be launched on Windows, Linux and Mac OS.

Cons of Katalon Studio:

  1. Katalon Studio supports only Apache Groovy for test script creation. However, it supports Java libraries and Java-compatible languages for test script execution.
  2. Katalon is not open source, it has closed source code leaving no option to the community to customize or use community-built packages.
  3. Katalon Studio does not support distributed testing currently.
  4. Katalon Studio is more focused on functionality testing and does not support any load or performance testing.
  5. Katalon Studio supports only web, mobile and API testing and does not support automating desktop application.
  6. Sometimes the tool just slows down and freezes, mobile automation testing takes even more time to record scripts.

Choosing a test automation tool depends on the testing requirement of an organization. If the organization is looking for a tool to test the functionality of their web/mobile applications, Katalon would be the right decision. Katalon Studio mainly focusses on functionality testing, but with very little focus on testing of design aspects like screen size, orientation etc.

Katalon: The future

As the tool is new and in early stages in the market and the features are still evolving, it sometimes throws some bugs and just gets stuck during test script execution. More updates and bug fix releases are expected in future to make it more stable and smooth-running tool.

Also, support to more scripting languages for test script creation would be a great plus.

However, with all the great benefits provided by the tool and with its simple UI, the tool has already won the hearts of testing engineers. In spite of the drawbacks, Katalon Studio is becoming an emerging tool for test automation and is gaining popularity in the software development industry. Overall Katalon is an amazing tool and has a great future.

Susan B John