As part of the 2018 HPCC Systems Summit Community Day event: Up first, Nicole Navarro, New College of Florida, briefly discusses her poster, Measuring the Geo-Social Distribution of Opioid Prescriptions. Nicole won 2nd place in the 2018 HPCC Systems Poster Presentations Competition. Following, Gordon Smith presents his breakout session in the User Interfaces track. The Visualizer Bundle continues to improve with new features and enhancements enabling the user to create slick, sophisticated reports directly from ECL without needing additional plugins or third-party tools. Join me in this session as I look at how to leverage this bundle to visualize your data as well as a quick look under the covers to see how it integrates with ECL and ECL Watch. Gordon is primarily responsible for the areas of the platform that developers interact with including the ECL IDE, ECL Watch, and the visualization framework. Learn about the simplicity of being able to clone the source on GitHub to get a development environment up and running quickly. Visualizations and dashboards can be created easily. The continual learning, mentoring, code development, and more keep Gordon's work exciting. Gordon encourages all developers to be active in the open source community.

2. Innovation and
Reinvention Driving
Transformation
OCTOBER 9, 2018
2018 HPCC Systems® Community
Day
Gordon Smith – Enterprise / Lead Architect
Visualizing your Data Natively with the "Visualizer Bundle"

3. https://github.com/hpcc-systems/Visualizer
• First released December 2016
• ECL specified visualizations
• Uses HPCC Systems Visualization Framework
• Embeds “lite” web page into Workunit (as external resource)
• Viewable from ECL Watch -> WU Details -> Resources
Visualizer Bundle
Visualizing your Data Natively with the "Visualizer Bundle" 3

4. • Updated to use Visualization Framework (@hpcc-js) 2.0
• Grid replaced with a DGrid
• HandsonGrid removed
• New 2D Visualization:
• Radial Bar
• New Multi-D Visualization:
• Radar
Visualizer Bundle 2.0 Change Log
Visualizing your Data Natively with the "Visualizer Bundle" 4

5. New Visualization Categories:
• 2D Linear:
• Contour
• Hex Bin
• Scatter Plot
• Relational
• Network
• Dashboard
• More on that later…
Visualizer Bundle 2.0 Change Log (cont.)
Visualizing your Data Natively with the "Visualizer Bundle" 5

6. https://github.com/hpcc-systems/Visualization
Visualization Framework 2.0 (shameless plug)
Visualizing your Data Natively with the "Visualizer Bundle" 6

7. • Run “Self Test” to confirm all is good:
Bundle Installation
Visualizing your Data Natively with the "Visualizer Bundle" 7
import Visualizer;
Visualizer.main;
ecl bundle install https://github.com/hpcc-systems/Visualizer.git

8. • Open the workunit in ECL Watch and select the “Resources Tab”:
Bundle Installation (cont.)
Visualizing your Data Natively with the "Visualizer Bundle" 8

9. Bundle Installation (cont.)
Visualizing your Data Natively with the "Visualizer Bundle" 9

10. • TwoD
• [Label, Value]
• TwoDLinear
• [Value, Value]
• MultiD
• [Label, Value, Value, Value, …]
• Choropleth
• [Location ID, Value]
• Relational
• [ID, Label, Icon]
• [Source ID, Target ID, Label]
Visualizer Namespaces (Data Shapes)
Visualizing your Data Natively with the "Visualizer Bundle" 10

11. IMPORT Visualizer;
ds := DATASET([ {"English", 45},
{"History", 17},
{"Geography", 77},
{"Chemistry", 16},
{"Irish", 26},
{"Spanish", 67},
{"Biology", 66},
{"Physics", 46},
{"Math", 98}],
{STRING subject, INTEGER4 year});
OUTPUT(ds, NAMED("chartData"));
Visualizer.TwoD.RadialBar("myChart", /*datasource*/, "chartData");
Quick Start – 2D Data – Radial Bar Chart
Visualizing your Data Natively with the "Visualizer Bundle" 11

12. /* ---------------------------------------------------------------
Two Dimensional "Ordinal" Visualizations
Default Data requirements (can be overridden by mappings):
* 2 Columns
- Column 1 (string): Label
- Column 2 (number): Value
All other columns will be ignored. See __test for an example.
*/
Quick Start – 2D Data – Radial Bar Chart
Visualizing your Data Natively with the "Visualizer Bundle" 12

13. Visualizer.TwoD.RadialBar(
"myChart", string: Visualization ID
/*datasource*/, string: WUID | LogicalFile | Roxie
Defaults to current WU when omitted
"chartData", string: Result Name Ignored for LogicalFiles
/*mappings*/, dataset: Maps Column Name <--> field ID
/*filteredBy*/, dataset: Specifies filter condition
/*properties*/ dataset: Viz “dermatology” properties
);
Quick Start – 2D Data – Radial Bar Chart
Visualizing your Data Natively with the "Visualizer Bundle" 13

14. /*mappings*/, dataset: Maps Column Name <--> field ID
mappings := DATASET([
{"Subject Taken", "subject"},
{"Exam Year", "year"}
], Visualizer.KeyValueDef);
Quick Start – 2D Data – Radial Bar Chart - mappings
Visualizing your Data Natively with the "Visualizer Bundle" 14

15. /*filteredBy*/, dataset: Specifies filter condition
filteredBy := DATASET([
{"myColumnChart", [{"Exam Year", "year"}]},
{"myPieChart", [{"Subject Taken", "subject"}]}
], Visualizer.FiltersDef);
Quick Start – 2D Data – Radial Bar Chart - filteredBy
Visualizing your Data Natively with the "Visualizer Bundle" 15

16. /*properties*/ dataset: Viz “dermatology” properties
properties := DATASET([
{"xAxisType", "time"},
{"xAxisTypeTimePattern", "%Y-%m-%d"},
{"yAxisType", "pow"},
{"yAxisTypePowExponent", 0.3}
], Visualizer.KeyValueDef);
Quick Start – 2D Data – Radial Bar Chart - properties
Visualizing your Data Natively with the "Visualizer Bundle" 16

17. --- Live Demonstration ---
Visualizing your Data Natively with the "Visualizer Bundle" 17

18. • User IMPORTs "Visualizer.ecl"
• eclcc autodetects "Visualizer.manifest":
Appendix A: How it works
Visualizing your Data Natively with the "Visualizer Bundle" 18
<Manifest>
<Resource filename="./res/index.html" />
<Resource filename="./res/index.css" />
<Resource filename="./res/index.min.js" />
</Manifest>
• eclcc embeds the external resources directly into the archive.xml file
• ECL Watch renders the embedded resources

19. • Visualizer Bundle:
• https://github.com/hpcc-systems/Visualizer
• Visualization Framework + @hpcc-js packages:
• https://github.com/hpcc-systems/Visualization
• Visualization Samples + Dermatology:
• https://raw.githack.com/hpcc-systems/Visualization/master/demos/gallery/gallery.html
• https://raw.githack.com/hpcc-systems/Visualization/master/apps/docs/index.html
• Myself:
• gordon.smith@lexisnexisrisk.com
Appendix B: Useful Links
Visualizing your Data Natively with the "Visualizer Bundle" 19