Dashboard I

Sample Dashboard

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://viz.hpccsystems.com/v1.14.0-rc4/dist-amd/hpcc-viz.js"></script>
    <script src="https://viz.hpccsystems.com/v1.14.0-rc4/dist-amd/hpcc-viz-common.js"></script>
</head>
<body style="padding:0px; margin:0px; overflow:hidden">
    <div id="placeholder" style="width:100%; height:100vh">
    </div>
    <script>
        require(["d3", "src/common/Database", "src/layout/Grid", "src/layout/Tabbed", "src/chart/Bar", "src/chart/Pie", "src/chart/Line", "src/map/ChoroplethStates", "src/other/Table", "json!./data.json"], function (d3, Database, Grid, Tabbed, Bar, Pie, Line, ChoroplethStates, Table, data) {
            //  Init Data  ---
            var byState = d3.nest()
                .key(function (row) { return row["State"]; })
                .rollup(function (leaves) {
                    return leaves.length;
                })
                .entries(data)
            ;
            var byBreachType = d3.nest()
                .key(function (row) { return row["Type of Breach"]; })
                .rollup(function (leaves) {
                    return leaves.length;
                })
                .entries(data)
            ;
            var bySubmissionQuarter = d3.nest()
                .key(function (row) { return row["Submission Quarter"]; })
                .rollup(function (leaves) {
                    return leaves.length;
                })
                .entries(data)
            ;
            var filter = {};

//  Create Widgets  ---
            var stateChoro = new ChoroplethStates()
                .autoScaleMode("data")
                .columns(["StateID", "Row Count"])
                .data(byState.map(function (state, idx) {
                    return [state.key, state.values];
                }))
                .on("click", function (row, col, sel) {
                    filter.State = sel ? row.StateID : null;
                    refresh();
                })
            ;

var breachTypeBar = new Bar()
                .columns(["BreachType", "Row Count"])
                .data(byBreachType.map(function (breachType, idx) {
                    return [breachType.key, breachType.values];
                }))
                .on("click", function (row, col, sel) {
                    filter.BreachType = sel ? row.BreachType : null;
                    refresh();
                })
            ;

var submissionQuarterPie = new Pie()
                .columns(["SubmissionQuarter", "Row Count", "SubmissionQuarter2"])
                .data(bySubmissionQuarter.map(function (submissionQuarter, idx) {
                    return ["Q" + submissionQuarter.key, submissionQuarter.values, submissionQuarter.key];
                }))
                .on("click", function (row, col, sel) {
                    filter.SubmissionQuarter = sel ? row.SubmissionQuarter2 : null;
                    refresh();
                })
            ;

var line = new Line()
                .xAxisType("time")
                .xAxisTypeTimePattern("%Y-%m-%dT%H:%M:%S.%LZ")
                .xAxisFocus(true)
                .yAxisType("pow")
                .yAxisTypePowExponent(0.4)
                .yAxisDomainLow(0)
                .yAxisDomainPadding(0)
                .columns(["Date", "Individuals Affected"])
            ;

var debugTable = new Table()
                .pagination(true)
            ;
            debugTable._db.jsonObj(data);

var table = new Table()
                .pagination(true)
                .columns(debugTable.columns())
            ;

var bottomTabs = new Tabbed()
                .addTab(line, "Individuals Affected by Date")
                .addTab(table, "Data")
                .addTab(debugTable, "Debug")
            ;
            var frame = new Grid()
                .target("placeholder")
                .setContent(0, 0, stateChoro, "States")
                .setContent(0, 1, breachTypeBar, "Type of Breach", 1, 2)
                .setContent(0, 3, submissionQuarterPie, "Submission Quarter")
                .setContent(1, 0, bottomTabs, null, 2, 4)
                .render()
            ;

refresh();

Modified http://viz.hpccsystems.com/v1.14.0-rc4/dist-amd/hpcc-viz.js to a secure url

Modified http://viz.hpccsystems.com/v1.14.0-rc4/dist-amd/hpcc-viz-common.js to a secure url

https://viz.hpccsystems.com/v1.14.0-rc4/dist-amd/hpcc-viz.js

https://viz.hpccsystems.com/v1.14.0-rc4/dist-amd/hpcc-viz-common.js