EnvironmentChange

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Gold Coast Environment Impact</title>
    <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.css" rel="stylesheet"/>
    <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.Default.css" rel="stylesheet"/>
    <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/MarkerCluster.css" rel="stylesheet"/>
    <link type="text/css" href="https://unpkg.com/dc@4/dist/style/dc.css" rel="stylesheet"/>

<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.css">

<div class="container" >
    <div class="row">
        <h2>Gold Coast - Environment Change</h2>
        <div id="map" class="col-sm-offset-2 col-sm-8">
            <i>Impact on Gold Coast</i>
            
            
            <div class="clearfix"></div>
        </div>
    </div>
    <!--<div class="row">
        <div id="depth">
            <strong>Depth (m)</strong>
            <span class="reset" style="display: none;">range: <span class="filter"></span></span>
            <a class="reset" href="javascript:depthChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

<div class="clearfix"></div>
        </div>
    </div>-->
    <div class="row">
        <div class="col-sm-12">
            
            <div id="state"><strong>State Road</strong>
                
                <a href="javascript:stateChart.filterAll();dc.redrawAll()" class="reset" style="display: none">reset </a>
                <div class="clearfix"></div>
            </div>
            <div id="year">
                <strong>Year</strong>
                
                <a href="javascript:yearChart.filterAll();dc.redrawAll()" class="reset" style="display: none">reset </a>
                <div class="clearfix"></div>
            </div>
            <div id="hazard">
                <strong>Hazard Type</strong>
                
                <a href="javascript:hazardChart.filterAll();dc.redrawAll()" class="reset" style="display: none">reset </a>
                <div class="clearfix"></div>
            </div>
            <div id="rbc"><strong>Road, Bridge or Culvert</strong>
                
                <a href="javascript:rbcChart.filterAll();dc.redrawAll()" class="reset" style="display: none">reset </a>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div id="street" class="col-md-6 col-md-offset-2" style="float: left"><strong>Street</strong>
                
                <a href="javascript:streetChart.filterAll();dc.redrawAll()" class="reset" style="display: none">reset </a>
                <div class="clearfix"></div>
            </div>
            <div id="roadtype" class="col-md-6 col-md-offset-2" style="float:right;">
                <strong>Road Type</strong>
                
                <a href="javascript:roadtypeChart.filterAll();dc.redrawAll()" class="reset" style="display: none">reset </a>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="dc-data-count">
                <a href="javascript:dc.filterAll(); dc.redrawAll()">Reset All</a>
            </div>
            <div id="paging">
                Showing <span id="begin"></span>-<span id="end"></span> of <span id="size"></span> <span id="totalsize"></span>
                <input id="last" class="btn" type="Button" value="Last" />
                <input id="next" class="btn" type="button" value="Next" />
            </div>
        </div>
        <table class="table table-striped table-hover dc-data-table">
        </table>
    </div>
</div>

d3.csv("roads_CC_2_ssm_1.csv")
        .then(function (data) {
            drawMarkerSelect(data);

let RandBGroup = RandBDim.group();
                let hazardGroup = hazardDim.group();
                // let hazardyearGroup = hazardyearDim.group();
                let yearGroup = yearDim.group();
                let streetGroup = streetDim.group();

/*const depthGroup = depthDim.group().reduce(
                    /!* callback for when data is added to the current filter results *!/
                    (p, v) => {
                        ++p.count;
                        p.sumDepth += v.Depth;
                        p.avgDepth = p.sumDepth / p.count;
                        return p;
                    },
                    /!* callback for when data is removed from the current filter results *!/
                    (p, v) => {
                        --p.count;
                        p.sumDepth -= v.Depth;
                        p.avgDepth = p.count ? p.sumDepth / p.count : 0;
                        return p;
                    },
                    /!* initialize p *!/
                    () => ({
                        count: 0,
                        avgDepth: 0,
                        })
                );*/
                const depthGroup = streetDim.group().reduce(
                    /* callback for when data is added to the current filter results */
                    (p, v) => {
                        v.Depth = + v.Depth;
                        ++p.count;
                        p.max = Math.max(p.Depth,v.Depth);
                        return p;
                    },
                    /* callback for when data is removed from the current filter results */
                    (p, v) => {
                        v.Depth = + v.Depth;
                        --p.count;
                        p.max = p.count ? Math.max(p.Depth, v.Depth) : 0;
                        return p;
                    },
                    /* initialize p */
                    () => ({
                        count: 0,
                        max: 0
                    })
                );

let roadtypeGroup = roadtypeDim.group();
                let stateGroup = stateDim.group();
                let rbcGroup = rbcDim.group();

markerChart
                    .dimension(RandBDim)
                    .group(RandBGroup)
                    .width(900)
                    .height(340)
                    .center([-27.97,153.37])
                    .zoom(10)
                    .cluster(true);

/*depthChart /!* dc.barChart('#volume-month-chart', 'chartGroup') *!/
                    .width(420)
                    .height(180)
                    .margins({top: 10, right: 50, bottom: 30, left: 40})
                    .dimension(depthDim)
                    .group(depthGroup)
                    .valueAccessor(function (d) {
                        // console.log(d)
                        return d.value.max;
                    })
                    .elasticY(true)
                    // (_optional_) whether bar should be center to its x value. Not needed for ordinal chart, `default=false`
                    .centerBar(true)
                    // (_optional_) set gap between bars manually in px, `default=2`
                    .gap(1)
                    // (_optional_) set filter brush rounding
                    // .round(Math.floor)
                    // .alwaysUseRounding(true)
                    .x(d3.scaleLinear().domain([0, 5]))
                    .renderHorizontalGridLines(true);*/
                stateChart
                    .dimension(stateDim)
                    .group(stateGroup)
                    .radius(80)
                    .width(200)
                    .height(200)
                    .renderLabel(true)
                    .renderTitle(true);
                yearChart
                    .dimension(yearDim)
                    .group(yearGroup)
                    .radius(80)
                    .width(200)
                    .height(200)
                    .renderLabel(true)
                    .renderTitle(true);
                hazardChart
                    .dimension(hazardDim)
                    .group(hazardGroup)
                    .height(180)
                    .elasticX(true)
                    .ordering(function (d) {
                        return d.value;
                    });
                streetChart
                    .dimension(streetDim)
                    .group(streetGroup)
                    .height(610)
                    .data(function (d) {
                        return d.top(20);
                    })
                    .ordering(function (d) {
                        return d.SHAPE_Leng;
                    })
                    .elasticX(true)
                ;
                roadtypeChart
                    .dimension(roadtypeDim)
                    .group(roadtypeGroup)
                    .valueAccessor(d => d.value)
                    .height(380)
                    .elasticX(true)
                    .ordering(function (d) {
                        return d.key;
                    });
                rbcChart
                    .dimension(rbcDim)
                    .group(rbcGroup)
                    .height(180)
                    .data(function (d) {
                        return d.top(20);
                    })
                    .elasticX(true)
                    .ordering(function (d) {
                        return -d.value;
                    });

envTable /* dc.dataTable('.dc-data-table', 'chartGroup') */
                    .dimension(hazardyearDim)
                    // Specify a section function to nest rows of the table
                    .section(d => {
                        return d.Hazard;
                    })
                    .columns([
                        'Hazard',
                        'Year',
                        'STREET',
                        'Depth',
                        'Affected Length'
                    ])
                    .size(Infinity)
                    // (_optional_) sort using the given field, `default = function(d){return d;}`
                    .sortBy(d => d.Hazard_Year)
                    // (_optional_) sort order, `default = d3.ascending`
                    .order(d3.ascending)
                    // (_optional_) custom renderlet to post-process chart using [D3](https://d3js.org)
                    .on('renderlet', table => {
                        table.selectAll('.dc-table-group').classed('info', true);
                    })
                    .on('preRender', update_offset)
                    .on('preRedraw', update_offset)
                    .on('pretransition', display);

// return {marker: markerChart, pie: yearChart, hazard: hazardChart, year: yearChart, street: streetChart};
                // use odd page size to show the effect better

// use odd page size to show the effect better
                function update_offset() {
                    var totFilteredRecs = ndx.groupAll().value();
                    var end = ofs + pag > totFilteredRecs ? totFilteredRecs : ofs + pag;
                    ofs = ofs >= totFilteredRecs ? Math.floor((totFilteredRecs - 1) / pag) * pag : ofs;
                    ofs = ofs < 0 ? 0 : ofs;

envTable.beginSlice(ofs);
                    envTable.endSlice(ofs+pag);
                }

d3.select("#next")
                    .on("click", next);
                d3.select("#last")
                    .on("click", last);

dc.renderAll();

}

});

</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js

https://unpkg.com/dc@4/dist/dc.js

https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js

https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js

https://cdn.jsdelivr.net/npm/dc.leaflet@0.5.0/dc.leaflet.js

https://cdn.jsdelivr.net/npm/dc.leaflet@0.5.0/dc.leaflet.js.map