Tutorial 5b: HPCC Platform Workunit Data + Choropleth
Same data as in Tutorial 5 - this time calculating the population delta between females and males as a % of total population and rendering it in an Irish Choropleth.
Last active
October 21, 2018 06:55
-
-
Save GordonSmith/c4816bcfeb03f2f4e9f10b256bfd2e2d to your computer and use it in GitHub Desktop.
Tutorial 5b: HPPC Platform Workunit, Alternative View
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: Apache-2.0 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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')); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| padding:0px; | |
| margin:0px; | |
| overflow:hidden; | |
| } | |
| #placeholder { | |
| width:100%; | |
| height:100vh; | |
| } | |
| #placeholder .map_Layered .mesh { | |
| stroke-width: 0.05px | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Workunit Irish Choropleth</title> | |
| <meta charset="utf-8"> | |
| <link rel="stylesheet" href="index.css"> | |
| <!-- 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> | |
| // Load Example JavaScript (via GetLibs)--- | |
| System.import('./index.js'); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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" }, "W20181021-065153"); | |
| 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(); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment