Flask + D3.js - Data Dashboard - Part 4

So far, we have created 2 graphs, pie-chart and bar-chart, to represent our data. We however, still need to add interaction between them.

In this article, we will be adding the functionality of updating barchart whenever a selection is made on piechart. You can get the whole project code at this github link.

If you recall, in pieChart.js we addded updateBarChart on up event of pie-chart slice. We will add code for this updateBarChart function.

Open updateBarChart.js file and create the following function:

    
    function updateBarChart(group, colorChosen, datasetBarChart) {
    }
    
    

The above function accepts the group that was clicked, the color that group belongs to and data-values

Now add following code inside the function:

    
    var currentDatasetBarChart = datasetBarChosen(group, datasetBarChart);
    var basics = d3BarChartBase();
    var margin = basics.margin,
               width = basics.width,
              height = basics.height,
               colorBar = basics.colorBar,
               barPadding = basics.barPadding,
               misc = basics.misc
               ;
          
    var xScale = d3.scaleLinear()
               .domain([0, currentDatasetBarChart.length])
               .range([0, width])
               ;
          
              
    var yScale = d3.scaleLinear()
             .domain([0, d3.max(currentDatasetBarChart, function(d) { return d.measure; })])
             .range([height,0])
             ;
            
    var svg = d3.select("#barChart svg");
          
    // Title
    svg.selectAll("text.title")
        .attr("x", (width + margin.left + margin.right)/2)
        .attr("y", misc.title)
        .attr("class","title")              
        .attr("text-anchor", "middle")
        .text("Age-group Breakdown of Survivors from "+group)
           ;
            
    var plot = d3.select("#barChartPlot")
              .datum(currentDatasetBarChart)
              ;
        
        
  • We begin by defining currentDatasetBarChart variable, which holds the age-group values for selected cabin class
  • Then, we set the dimensions of svg just like we did in barChart.js and define x-axis and y-axis of our svg
  • In svg variable, we define capture svg element. Using this variable we capture title element and add custom title text for the selected group
    
    plot.selectAll("rect")
        .data(currentDatasetBarChart)
        .transition()
        .duration(750)
        .attr("x", function(d, i) {
            return xScale(i);
            })
        .attr("width", width / currentDatasetBarChart.length - barPadding)  
        .attr("y", function(d) {
            return yScale(d.measure);
            }) 
        .attr("height", function(d) {
            return height-yScale(d.measure);
            })
        .attr("fill", colorChosen)
            ;
          
    plot.selectAll("text.yAxis") 
        .data(currentDatasetBarChart)
        .transition()
        .duration(750)
        .attr("text-anchor", "middle")
        .attr("x", function(d, i) {
            return (i * (width / currentDatasetBarChart.length)) + ((width / currentDatasetBarChart.length - barPadding) / 2);
        })
        .attr("y", function(d) {
            return yScale(d.measure) - misc.ylabel;
        })
        .text(function(d) {
            return formatAsInteger(d.measure)+"%";
            })
        .attr("class", "yAxis")                   
        ;
        
    
    
  • In plot variable, we select each bar of bar-chart and update data values based on the selected group to render new bar heights. We add animation for updating the bars gracefully using .transition. We also update the color of bars using fill attribute and passing colorChosen we passed initially.
  • Finally we update the x-axis (age-group) values and y-axis (bar-height measures) for each bar. Again, we use transition to give animation effect while updating.

We are done with plotting charts on our dashboard and adding interactive functionality between them. Finally we are going to call the functions we just built. We will write this code in main.js file. Open file in editor and add following code:

    
    queue()
        .defer(d3.json, piechartDataUrl)
        .defer(d3.json, barchartDataUrl)
        .await(ready);
        
    function ready(error, dataset, datasetBarChart) {
        d3PieChart(dataset, datasetBarChart);
        d3BarChart(datasetBarChart);
        }
    
    

queue allows you to control how many tasks run at the same time. When all the tasks complete, or an error occurs, the queue passes the results to your await callback. We are loading our javascript libraries using queue and once they are loaded, we call d3PieChart function to render all the charts we have coded.

Now open your terminal again and run the code using:

    
    python run.py
    
    

Above code should execute the file successfully. Once it does, open your browser and go to localhost:5000 to see the dashboard in action.



Takeaways

We have successfully created our interactive data dashboard. We worked on D3.js and saw how conveniently it allows us to create interactions between various charts. No doubt D3.js is powerful yet flexible. Again, you can get access to complete working code at this github link.


Note, References & Links: