Qlik Sense Extension Hexagonal Binning 23 rd September

Qlik Sense Extension Hexagonal Binning 23 rd September 2015 Brian Booden

Agenda • • • Introduction Motivation D 3. js – Finding examples and tutorials Find some collaborators Make it happen • • • D 3 Conversion and selections Colour and Area Binning Support for 10 k+ Points The Lasso and Hexagonal Shaped Problems Other Features Demo • Promote and share

Introduction • • Supervising Qlik Architect @ Cooper Software Certified Qlik. View Designer, Developer, Administrator 7 years Qlik experience, 15 years in IT 3 time presenter at Qonnections Email: brian. booden@coopersoftware. co. uk Twitter: @brian_booden Linked. In: uk. linkedin. com/in/qlikviewifsexpert

Motivation • • • Med. Air International Crisis Response Ebola Outbreak – Sierra Leone Teamed with Patric and Johan from Idevio 8 teams Winners – Axis Group 2 nd Place – Luminaries (Seebach, Becher, Burel) Learned a lot about APIs for Qlik Sense Made me want to learn more!

D 3. js – Examples and Tutorials • Find a visualisation • http: //d 3 js. org/ • https: //github. com/mbostock/ d 3/wiki/Gallery • Harness existing code • Convert from D 3 to Sense – Tutorial • http: //blog. axc. net/tutorialhow-to-build-a-qlik-senseextension-with-d 3/

Find collaborators Speros Kokenes Ralf Becher • • • TIQ Solutions Blog: http: //irregular-bi. tumblr. com/ Twitter: @irregularbi Qlik Luminary Qlik. View and Sense extensions • • Dependency Wheel 2 Dimensional Heatmap • • • Axis Group Blog: http: //blog. axc. net/ Twitter: @sperosck Qonnections Hackathon winner Sense. Utils. js and Lasso. js Qlik. View and Sense extensions • D 3 Visualization Library 5

D 3 Conversion and selections • Finding a code example • • • “Borrow” the CSS Create the appropriate SVGs to make visible in Sense Use an example static dataset (usually in the example) Use Speros’ great D 3 conversion tutorial as a guide Get it on Git. Hub! • Then, add selections… • Hook up the equivalent “click” event • Use select. Values to make the selections

The results of your work…. • How it feels when you make your first selection using your extension:

Colour and Area Binning • 2 Ways to denote density of points in hexagons • Colour • Size (Area) • Colour • Transpose standard Qlik Sense colour scales • Diverging, Sequential • Blues, Reds, Greens • Size • Choose maximum and minimum hex size • Potential to add a 3 rd Measure to colour sized hex based on a separate measure

Support for 10 k+ Points • Natural limit for extensions = 10 k points • Solution = Speros Sense. Utils. js library • page. Extension. Data : function(me, $el, layout, callback) • Creates datapages containing max 10, 000 points • Uses flatten. Pages : function(data) to extend dataset into array • Call from inside paint function to initiate the callback function and create matrix of the entire 10 k+ dataset

The Lasso and hexagonal shaped problems! • Using Speros’ awesome lasso. js…. • Can we lasso from inside the bins? We can now! • . attr("class", "lassoable") • var lasso_area = d 3. select("#"+id). select. All(". lassoable"); The red ‘Hit’ zone Hex layer sits on top of ‘Hit’ zone Full ‘Hit’ zone achieved by attaching “lassoable” class

Other Features • • Sense-like styling (CSS) SVG Issues Angular. JS solution Multiple Properties and options • • Binning Mode (Colour or Area) Colour range Colour Expression (Sequential, Diverging etc) Max Radius Fill Mesh Title & Static Layout Center Hexagons

Demo • Let’s see it, then…. .

Branch, Linked. In and Twitter • Get your extension out there! • Use as many avenues as possible • Branch, Linked. In, Twitter, Blogs • People will use your extension, if you promote it!

Download & Questions • Download Hexagonal Binning for Qlik Sense at Qlik Branch • http: //branch. qlik. com/projects/showthread. php? 351 -Hexagonal-Binning Questions?