Date post: | 14-Feb-2017 |
Category: |
Documents |
Upload: | brian-booden |
View: | 210 times |
Download: | 1 times |
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: [email protected]• 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?