Interactive Data Visualization using D3.js

An effective Data visualization is paramount to any organization in today's world. The ability to understand hidden patterns in datasets has made visualizations a robust tool specifically in the area of Machine Learning/ Deep neural networks.

D3.js is an effective framework for developing high quality, interactive visualizations. The powerful combination of Scalable vector graphics, HTML and styling sheets makes it a go-to library for Data Visualization engineers.

As part of an academic assignment, I wanted to replicate the ISACA's (Information Systems Audit and Control Association) Barometer report on Digital Transformation in enterprises. Although the report is an old one (2017), from a Data Visualization perspective it provides insights on some of the key motivations for companies to evaluate the need for emerging technologies, who within an organization is responsible for evaluating these novel technologies and covers the digital/data literacy aspect of employees of the companies. The visual representation shows how organization leaders were just 23% receptive to any emerging technologies. It also exhibits Big Data Analytics(38%) and AI/ML(20%) as the Top 2 technologies that had the most potential to deliver transformational value, which has proved right for a lot of organizations who have considered investing in the areas of Advanced analytics.

The key concepts of D3 framework revolve around -

Selection

var donut = svg
  .selectAll('parts')
  .data(cleared_data)
  .enter()
  .append('path')
  .attr('d', arc)
  .attr("fill", function(d){
     return color_val(d.data.key)
    })

D3 allows for DOM element selections using the 2 prime methods - select() and selectAll()

2. Binding Data

Data is bound using the data() method.

var bar = chart.selectAll("g")
    .data(data)
    .enter()
    .append("g");

3. Visualization operations: Scaling, Transformation & Rotation

The common visual operations like transformations are performed using transform() followed by translate() / rotate(). The figure below shows how the Bar chart is rotated horizontally.

var svg4 = d3.select("#barnew3").append("svg")
    .attr("width", 320)
    .attr("height", 220)
    .append("g")
    .attr("transform", 
          "translate(" + 15 + "," + 60 + ")");

4. Animations

D3 leverages animations to enable user interaction and allow for better exploration. This work focuses primarily on using 'easing' functions as transitions. The figure below shows an example.

   function update(){
        donut.transition()
        .attr("stroke","black")
        .attr("stroke-width",5);
    }

Here is the final version of the work:

?