2. 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
1
3. 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
4. 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!
5. 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
5
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
7. 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
6
8. The results of your work….
• How it feels when you make your first selection using
your extension:
7
9. 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
8
10. 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
9
11. 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");
10
The red ‘Hit’ zone
Hex layer sits on top
of ‘Hit’ zone
Full ‘Hit’ zone achieved
by attaching “lassoable” class
12. 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
11
14. 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!
15. Download & Questions
• Download Hexagonal Binning for Qlik Sense at Qlik
Branch
• http://branch.qlik.com/projects/showthread.php?351-Hexagonal-Binning
Questions?
