Qlik Sense ExtensionHexagonal Binning23rd September 2015Brian Booden

Agenda

• Introduction• Motivation• D3.js – Finding examples and tutorials• Find some collaborators• Make it happen

• D3 Conversion and selections• Colour and Area Binning• Support for 10k+ Points• The Lasso and Hexagonal Shaped Problems• Other Features• Demo

• Promote and share

2

Introduction

• Supervising Qlik Architect @ Cooper Software• Certified QlikView Designer, Developer, Administrator• 7 years Qlik experience, 15 years in IT• 3 time presenter at Qonnections• Email: brian.booden@gmail.com• Twitter: @brian_booden• LinkedIn: uk.linkedin.com/in/qlikviewifsexpert

Motivation

• MedAir International• Crisis Response• Ebola Outbreak – Sierra Leone• Teamed with Patric and Johan from

Idevio• 8 teams • Winners – Axis Group• 2nd Place – Luminaries (Seebach,

Becher, Burel)• Learned a lot about APIs for Qlik

Sense• Made me want to learn more!

D3.js – Examples and Tutorials

• Find a visualisation• http://d3js.org/• https://

github.com/mbostock/d3/wiki/Gallery

• Harness existing code

• Convert from D3 to Sense – Tutorial

• http://blog.axc.net/tutorial-how-to-build-a-qlik-sense-extension-with-d3/

6

Find collaborators

• TIQ Solutions• Blog: http://irregular-bi.tumblr.com/ • Twitter: @irregularbi• Qlik Luminary• QlikView and Sense extensions

• Dependency Wheel• 2 Dimensional Heatmap

Ralf Becher Speros Kokenes• Axis Group• Blog: http://blog.axc.net/• Twitter: @sperosck• Qonnections Hackathon winner• SenseUtils.js and Lasso.js• QlikView and Sense extensions

• D3 Visualization Library

D3 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 D3 conversion tutorial as a guide• Get it on GitHub!

• Then, add selections…• Hook up the equivalent “click” event• Use selectValues to make the selections

7

The results of your work….

• How it feels when you make your first selection using your extension:

8

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 3rd Measure to colour sized hex based on

a separate measure

9

Support for 10k+ Points

• Natural limit for extensions = 10k points• Solution = Speros SenseUtils.js library• pageExtensionData : function(me, $el, layout,

callback)• Creates datapages containing max 10,000 points• Uses flattenPages : function(data) to extend dataset into

array• Call from inside paint function to initiate the callback function

and create matrix of the entire 10k+ dataset

10

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 = d3.select("#"+id).selectAll(".lassoable");

11

The red ‘Hit’ zone Hex layer sits on top of ‘Hit’ zone

Full ‘Hit’ zone achievedby attaching “lassoable” class

Other Features

• Sense-like styling (CSS)• SVG Issues• AngularJS 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

12

Demo

• Let’s see it, then…..

Branch, LinkedIn and Twitter

• Get your extension out there!• Use as many avenues as possible

• Branch, LinkedIn, 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?