Porting d3.js visualisations to Qlik Sense

You may be aware that the JavaScript framework d3.js puts stunning visualisations at hand's reach of HTML5 practitioners and Qlik Sense developers willing to give it a go. I highly recommend you to visit d3js.org if you haven't yet done so and have fun browsing the interactive gallery. My guess is that a quick glance at the gallery will trigger within you a strong desire to port d3.js visualisations to Qlik Sense (just for fun if anything). If so, you're in luck as I'm just about to show you a quick example using Qlik Sense Desktop in a few easy steps.

1. Install Qlik Sense Desktop 
2. Launch the Qlik Sense Desktop application
3. Open Workbench, the Qlik Sense extension editor, by pointing your browser to "http://localhost:4848/workbencheditor/". You should see something like this:
   

   

   Qlik Sense's Workbench

4. Find an interesting visualisation on d3.js such as this one entitled Cluster Force Layout IV (Credit to Mike Bostock at http://bl.ocks.org/mbostock) which I'll base this example on.
5. View the source of the page at http://bl.ocks.org/mbostock/raw/7882658/ to reveal the JavaScript code. You do this by right-clicking the page with your browser and selecting "View page source" (I use Google Chrome). You should now see something like this:

   

   Visualisation source code

6. Create a new extension project in the Workbench by selecting the "New" button. Name the extension "ForceCluster" and select "chart-template". Workbench will automatically create a JavaScript file and a QEXT file. The JavaScript file is responsible for behaviour and rendering and the QEXT file simply holds metadata about your extension such as name, version and author.
7. Copy everything within the script tag in the page source (shown in the above screenshot) and paste it in the body of the paint function. The first few lines of the paint function should be as follows:

   

   Altered paint function

8. Now we need to apply a slight tweak to the code so that the d3.js framework can find the extension object in the page. To do so, search for the following line:

    var svg = d3.select("body").append("svg")  
      .attr("width", width)  
      .attr("height", height);  
   

   and replace it with:

        // Chart object width  
              var width = $element.width();  
              // Chart object height  
              var height = $element.height();  
              // Chart object id  
              var id = "container_" + layout.qInfo.qId;  
              // Check to see if the chart element has already been created  
              if (document.getElementById(id)) {  
                   // if it has been created, empty its contents so we can redraw it  
                    $("#" + id).empty();  
              }  
              else {  
                   // if it hasn't been created, create it with the appropiate id and size  
                    $element.append($('<div />').attr("id", id).width(width).height(height));  
              }  
              var svg = d3.select("#" + id).append("svg")  
                   .attr("width", width)  
                   .attr("height", height);  
   

   (Credit to Speros for his post entitled "Tutorial: How to Build a Qlik Sense Extension with D3" at http://blog.axc.net/?p=1617)
9. Select "Save all" in the Workbench toolbar.
10. As we're porting a d3.js visualisation we'll need to import the d3.js framework so Qlik Sense Desktop can find it. Point your browser to http://d3js.org/d3.v3.min.js and save the page as d3.v3.min.js somewhere locally.
11. Now import the JavaScript file into your extension project by selecting the "Import Asset" button () situated in the top left hand area of Workbench and browsing to the file you've just saved.
12. Finally in the first line of the ForceCluster.js file replace the following characters:

     ["jquery"]  
    

    with

     ["jquery", "extensions/ForceCluster/d3.v3.min"]  
    

    This is so the d3.js framework can be referenced within our JavaScript code.
13. Your animated visualisation should now be ready to use. In Qlik Sense desktop create a new app, then a new sheet, edit the latter and drag the "ForceCluster" chart from the chart toolbar on the left hand-side onto the design area. Assuming that you set up a data source for your app, select a dimension and a measure (these won't actually be used in this example, I'll cover that in a future post).

    

    Resulting interactive visualisation

Thank you for reading, this was a very simple first example to get you started. Eventually, of course you'd want to be able to bind the visualisation to some real data loaded in Qlik Sense, add labels and make selections. More on all that in another post.

Credits:

• Mike Bostock at http://bl.ocks.org/mbostock for his amazing work with d3.js.
• Speros for his post entitled "Tutorial: How to Build a Qlik Sense Extension with D3" at http://blog.axc.net/?p=1617.