Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visualizing your Data Natively on the HPCC Systems Platform with the “Visualizer Bundle”

29 views

Published on

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.

Published in: Data & Analytics
  • Be the first to comment

  • Be the first to like this

Visualizing your Data Natively on the HPCC Systems Platform with the “Visualizer Bundle”

  1. 1. 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"
  2. 2. 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
  3. 3. • 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
  4. 4. 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
  5. 5. https://github.com/hpcc-systems/Visualization Visualization Framework 2.0 (shameless plug) Visualizing your Data Natively with the "Visualizer Bundle" 6
  6. 6. • 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
  7. 7. • Open the workunit in ECL Watch and select the “Resources Tab”: Bundle Installation (cont.) Visualizing your Data Natively with the "Visualizer Bundle" 8
  8. 8. Bundle Installation (cont.) Visualizing your Data Natively with the "Visualizer Bundle" 9
  9. 9. • 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
  10. 10. 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
  11. 11. /* --------------------------------------------------------------- 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
  12. 12. 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
  13. 13. /*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
  14. 14. /*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
  15. 15. /*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
  16. 16. --- Live Demonstration --- Visualizing your Data Natively with the "Visualizer Bundle" 17
  17. 17. • 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
  18. 18. • 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

×