Skip to content

Instantly share code, notes, and snippets.

@GordonSmith
Last active October 21, 2018 06:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save GordonSmith/c4816bcfeb03f2f4e9f10b256bfd2e2d to your computer and use it in GitHub Desktop.
Save GordonSmith/c4816bcfeb03f2f4e9f10b256bfd2e2d to your computer and use it in GitHub Desktop.
Tutorial 5b: HPPC Platform Workunit, Alternative View
license: Apache-2.0

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.

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'));
body {
padding:0px;
margin:0px;
overflow:hidden;
}
#placeholder {
width:100%;
height:100vh;
}
#placeholder .map_Layered .mesh {
stroke-width: 0.05px
}
<!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>
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