D3 Examples - Dashboard I

xxxxxxxxxx
 
•<!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();
​
            function refresh() {
                var filteredData = data.filter(function (row, idx) {
                    return (filter.State ? filter.State === row["State"] : true) &&
                        (filter.BreachType ? filter.BreachType === row["Type of Breach"] : true) &&
                        (filter.SubmissionQuarter ? filter.SubmissionQuarter === row["Submission Quarter"] : true);
                });
                var byDate = d3.nest()
                    .key(function (row) { return row["Submission Date"]; })
                    .rollup(function(leaves) { 
                        return d3.sum(leaves, function (d) { return parseFloat(d["Individuals Affected"]); }); 
                    })
                    .entries(filteredData).sort(function (l, r) { 
                        if (l.key === r.key) return 0;
                        if (l.key < r.key) return -1;
                        return 1;
                    })
                ;
                line
                    .data(byDate.map(function (row) {
                        return [row.key, row.values];
                    }))
                    .render()
                ;
                table._db.jsonObj(filteredData);
                table.render();
            }
        });
    </script>
</body>
</html>
    