GordonSmith · October 21, 2018 06:55 · Oct 21, 2018 · Aug 8, 2018 · Sep 18, 2016 · Sep 18, 2016
diff --git a/index.js b/index.js
@@ -26,7 +26,7 @@ var layeredMap = new Layered()
     .projection("Mercator")
     ;
 
-var wu = Workunit.attach({ baseUrl: "https://play.hpccsystems.com:18010" }, "W20160918-054119");
+var wu = Workunit.attach({ baseUrl: "https://play.hpccsystems.com:18010" }, "W20181021-065153");
 wu.fetchResults().then(results => {
     return results[0].fetchRows();
 }).then(rows => {

diff --git a/.block b/.block
@@ -0,0 +1 @@
+license: Apache-2.0
diff --git a/README.md b/README.md
@@ -1,3 +1,3 @@
-Tutorial 5b:  HPCC Platform Workunit Data + Choropleth
+__Tutorial 5b__:  HPCC Platform Workunit Data + Choropleth
 
-Same data as in Tutorial 5 - this time calculating the population difference between females and males as a % of total population.
+Same data as in [Tutorial 5](https://bl.ocks.org/GordonSmith/71e28d9345fe6c3e64cf) - this time calculating the population delta between females and males as a % of total population and rendering it in an Irish Choropleth.
diff --git a/index.css b/index.css
@@ -9,8 +9,6 @@
     height:100vh;
 }
 
-.topcorner {
-    position: absolute;
-    top: 8px;
-    right: 8px;
+#placeholder .map_Layered .mesh {
+    stroke-width: 0.05px
 }
diff --git a/index.html b/index.html
@@ -1,51 +1,23 @@
 <!DOCTYPE html>
 <html>
+
 <head>
-    <title>Tutorial 5:  Workunit Column Chart</title>
+    <title>Workunit Irish Choropleth</title>
     <meta charset="utf-8">
     <link rel="stylesheet" href="index.css">
-    <script src="http://cdn.rawgit.com/hpcc-systems/Visualization/v1.14.4/dist-amd/hpcc-viz.js"></script>
+
+    <!--  GetLibs:  An in-browser module loader for quick demos  -->
+    <script src="https://unpkg.com/getlibs"></script>
 </head>
+
 <body>
     <div id="placeholder">
+        <!--  Placeholder for Visualization  -->
     </div>
     <script>
-        require(["src/other/Comms", "src/common/Palette", "src/map/Layered", "src/map/TopoJSONChoropleth", "src/map/Graticule"], function (Comms, Palette, Layered, TopoJSONChoropleth, Graticule) {
-            var myPal = Palette.rainbow("boysGirls", ["#3182bd", "#9ecae1", "#deebf7", "white", "#fee0d2", "#fc9272", "#de2d26"]);
-
-            var nd = new TopoJSONChoropleth()
-                .region("ND")
-                .opacity(0.75)
-                .meshStrokeWidth(0.75)
-            ;
-            var ie = new TopoJSONChoropleth()
-                .region("IE")
-                .paletteID("boysGirls")
-                .opacity(0.75)
-                .meshStrokeWidth(0.75)
-            ;
-            var widget = new Layered()
-                .target("placeholder")
-                .layers([
-                    nd,
-                    ie,
-                    new Graticule().opacity(0.25).meshStrokeWidth(0.75)
-                ])
-                .projection("orthographic")
-                .autoScaleMode("none")
-                .centerLat(53.5)
-                .centerLong(-8)
-                .zoom(40)
-                .render()
-            ;
-
-            var connection = Comms.createESPConnection("http://52.51.90.23:8010/?Widget=WUDetailsWidget&Wuid=W20160918-054119"); //  URL copied from ECL Watch WU Details Page
-            connection.send({}, function (response) {
-                var data = response.ie_population.map(function (row) { return [row.location, ((row.females - row.males) / row.total) * 100]; });
-                ie.data(data.concat([["min", -5], ["max", 5]]));  //  Force colors to be balanced around 0
-                widget.render();
-            });
-        });
+        //  Load Example JavaScript  (via GetLibs)---
+        System.import('./index.js');
     </script>
 </body>
+
 </html>
diff --git a/index.js b/index.js
@@ -0,0 +1,36 @@
+import { Palette } from "@hpcc-js/common";
+import { Layered, TopoJSONChoropleth, topoJsonFolder } from "@hpcc-js/map";
+import { Workunit } from "@hpcc-js/comms";
+
+topoJsonFolder("https://unpkg.com/@hpcc-js/map/TopoJSON");
+
+var myPal = Palette.rainbow("boysGirls", ["#3182bd", "#9ecae1", "#deebf7", "white", "#fee0d2", "#fc9272", "#de2d26"]);
+
+var nd = new TopoJSONChoropleth()   //  Northern Ireland
+    .region("ND")
+    .opacity(0.75)
+    ;
+
+var ie = new TopoJSONChoropleth()   //  Republic of Ireland
+    .region("IE")
+    .paletteID("boysGirls")
+    .opacity(0.75)
+    ;
+
+var layeredMap = new Layered()
+    .target("placeholder")
+    .layers([
+        nd,
+        ie
+    ])
+    .projection("Mercator")
+    ;
+
+var wu = Workunit.attach({ baseUrl: "https://play.hpccsystems.com:18010" }, "W20160918-054119");
+wu.fetchResults().then(results => {
+    return results[0].fetchRows();
+}).then(rows => {
+    var data = rows.map(row => [row.location, ((row.females - row.males) / row.total) * 100]);
+    ie.data(data.concat([["min", -5], ["max", 5]]));  //  Force colors to be balanced around 0
+    layeredMap.render().render();
+});
diff --git a/index.html b/index.html
@@ -42,7 +42,7 @@
             var connection = Comms.createESPConnection("http://52.51.90.23:8010/?Widget=WUDetailsWidget&Wuid=W20160918-054119"); //  URL copied from ECL Watch WU Details Page
             connection.send({}, function (response) {
                 var data = response.ie_population.map(function (row) { return [row.location, ((row.females - row.males) / row.total) * 100]; });
-                ie.data(data.concat([["min", -4], ["max", 4]]));  //  Force colors to be balanced around 0
+                ie.data(data.concat([["min", -5], ["max", 5]]));  //  Force colors to be balanced around 0
                 widget.render();
             });
         });

diff --git a/preview.png b/preview.png
diff --git a/README.md b/README.md
@@ -1,19 +1,3 @@
 Tutorial 5b:  HPCC Platform Workunit Data + Choropleth
 
-Fetching data from a HPCC Platform Workunit and rendering it in a Visualization, the three steps:
-
-1 - Establish a connection (the URL is copy/pasted from trom the ECL Watch WU Details Page)
-```
-var connection = Comms.createESPConnection("http://52.51.90.23:8010/?Widget=WUDetailsWidget&Wuid=W20160601-120359"); //  URL copied from ECL Watch WU Details Page
-```
-
-2 - Send the request + wait for the response
-```
-connection.send({}, function (response) {
-});
-```
-
-3 - Pick the result set we are niterested in and transform the data for the visualization
-```
-var data = response.ie_population.map(function (row) { return [row.location, row.males, row.females, row.total]; });
-```
+Same data as in Tutorial 5 - this time calculating the population difference between females and males as a % of total population.
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -32,6 +32,7 @@
                     new Graticule().opacity(0.25).meshStrokeWidth(0.75)
                 ])
                 .projection("orthographic")
+                .autoScaleMode("none")
                 .centerLat(53.5)
                 .centerLong(-8)
                 .zoom(40)

diff --git a/README.md b/README.md
@@ -1 +1,19 @@
-Tutorial 5b:  HPPC Platform Workunit, alternative view
+Tutorial 5b:  HPCC Platform Workunit Data + Choropleth
+
+Fetching data from a HPCC Platform Workunit and rendering it in a Visualization, the three steps:
+
+1 - Establish a connection (the URL is copy/pasted from trom the ECL Watch WU Details Page)
+```
+var connection = Comms.createESPConnection("http://52.51.90.23:8010/?Widget=WUDetailsWidget&Wuid=W20160601-120359"); //  URL copied from ECL Watch WU Details Page
+```
+
+2 - Send the request + wait for the response
+```
+connection.send({}, function (response) {
+});
+```
+
+3 - Pick the result set we are niterested in and transform the data for the visualization
+```
+var data = response.ie_population.map(function (row) { return [row.location, row.males, row.females, row.total]; });
+```
diff --git a/dataset.ecl b/dataset.ecl
@@ -0,0 +1,10 @@
+r := record
+	string location;
+	unsigned4 males;
+	unsigned4 females;
+	unsigned4 total;
+end;
+
+d := dataset([{'Carlow', '27431', '27181', '54612'}, {'Dublin City', '257303', '270309', '527612'}, {'Dun Laoghaire-Rathdown', '98567', '107694', '206261'}, {'Fingal', '134488', '139503', '273991'}, {'South Dublin', '129544', '135661', '265205'}, {'Kildare', '104658', '105654', '210312'}, {'Kilkenny', '47788', '47631', '95419'}, {'Laois', '40587', '39972', '80559'}, {'Longford', '19649', '19351', '39000'}, {'Louth', '60763', '62134', '122897'}, {'Meath', '91910', '92225', '184135'}, {'Offaly', '38430', '38257', '76687'}, {'Westmeath', '42783', '43381', '86164'}, {'Wexford', '71909', '73411', '145320'}, {'Wicklow', '67542', '69098', '136640'}, {'Clare', '58298', '58898', '117196'}, {'Cork City', '58812', '60418', '119230'}, {'Cork', '198658', '201144', '399802'}, {'Kerry', '72628', '72873', '145502'}, {'Limerick City', '27947', '29159', '57106'}, {'Limerick', '67868', '66835', '134703'}, {'North Tipperary', '35340', '34982', '70322'}, {'South Tipperary', '44244', '44188', '88432'}, {'Waterford City', '22921', '23811', '46732'}, {'Waterford', '33543', '33520', '67063'}, {'Galway City', '36514', '39015', '75529'}, {'Galway', '88244', '86880', '175124'}, {'Leitrim', '16144', '15654', '31798'}, {'Mayo', '65420', '65218', '130638'}, {'Roscommon', '32353', '31712', '64065'}, {'Sligo', '32435', '32958', '65393'}, {'Cavan', '37013', '36170', '73183'}, {'Donegal', '80523', '80614', '161137'}, {'Monaghan', '30441', '30042', '60483'}], r);
+output(d, named('ie_population'));
+
diff --git a/index.css b/index.css
@@ -0,0 +1,16 @@
+body {
+    padding:0px; 
+    margin:0px; 
+    overflow:hidden;
+}
+
+#placeholder {
+    width:100%; 
+    height:100vh;
+}
+
+.topcorner {
+    position: absolute;
+    top: 8px;
+    right: 8px;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Tutorial 5:  Workunit Column Chart</title>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="index.css">
+    <script src="http://cdn.rawgit.com/hpcc-systems/Visualization/v1.14.4/dist-amd/hpcc-viz.js"></script>
+</head>
+<body>
+    <div id="placeholder">
+    </div>
+    <script>
+        require(["src/other/Comms", "src/common/Palette", "src/map/Layered", "src/map/TopoJSONChoropleth", "src/map/Graticule"], function (Comms, Palette, Layered, TopoJSONChoropleth, Graticule) {
+            var myPal = Palette.rainbow("boysGirls", ["#3182bd", "#9ecae1", "#deebf7", "white", "#fee0d2", "#fc9272", "#de2d26"]);
+
+            var nd = new TopoJSONChoropleth()
+                .region("ND")
+                .opacity(0.75)
+                .meshStrokeWidth(0.75)
+            ;
+            var ie = new TopoJSONChoropleth()
+                .region("IE")
+                .paletteID("boysGirls")
+                .opacity(0.75)
+                .meshStrokeWidth(0.75)
+            ;
+            var widget = new Layered()
+                .target("placeholder")
+                .layers([
+                    nd,
+                    ie,
+                    new Graticule().opacity(0.25).meshStrokeWidth(0.75)
+                ])
+                .projection("orthographic")
+                .centerLat(53.5)
+                .centerLong(-8)
+                .zoom(40)
+                .render()
+            ;
+
+            var connection = Comms.createESPConnection("http://52.51.90.23:8010/?Widget=WUDetailsWidget&Wuid=W20160918-054119"); //  URL copied from ECL Watch WU Details Page
+            connection.send({}, function (response) {
+                var data = response.ie_population.map(function (row) { return [row.location, ((row.females - row.males) / row.total) * 100]; });
+                ie.data(data.concat([["min", -4], ["max", 4]]));  //  Force colors to be balanced around 0
+                widget.render();
+            });
+        });
+    </script>
+</body>
+</html>
diff --git a/preview.png b/preview.png
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+Tutorial 5b:  HPPC Platform Workunit, alternative view
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Tutorial 5b: HPPC Platform Workunit, alternative view