xxxxxxxxxx<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="main.css" rel="stylesheet"/> <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="../../dc.leaflet.js-master/web/css/leaflet-legend.css" rel="stylesheet"/>--> <!-- <link type="text/css" rel="stylesheet" href="css/dc.css">--> <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.css"> <style> div.dc-chart { float: left; } </style></head><body><div class="container-fluid pl-4 pr-4 container-class"> <div class = "row pt-4"> <div class = "col-12 align-center heading-color"> <h2>Gold Coast - Environment Change</h2> </div> </div> <div class="row pt-2"> <div class="col-3"></div> <div id="map" class="col-9 heading-color"> <!-- <span class="reset" style="display: none;">Selected: <span class="filter"></span> </span>--> <!-- <a href="javascript:markerChart.filterAll();dc.redrawAll()" class="reset" style="display: none">reset </a>--> <div class="clearfix"></div> </div> <div class ="col"></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 mt-4 ml-2"> <div class="col-6"> <!-- <div class="clearfix"></div>--> <div class="row"> <div class="col-5 mr-2 card-class" id="state"><strong>State Road</strong> <!-- <span class="reset" style="display: none;">Selected: <span class="filter"></span> </span>--> <a href="javascript:stateChart.filterAll();dc.redrawAll()" class="reset" style="display: none; color:#00b6dd">reset </a> <div class="clearfix"></div> </div> <div id="year" class = "col-5 ml-2 card-class"> <strong>Year</strong> <!-- <span class="reset" style="display: none;">Selected: <span class="filter"></span> </span>--> <a href="javascript:yearChart.filterAll();dc.redrawAll()" class="reset" style="display: none; color:#00b6dd">reset </a> <div class="clearfix"></div> </div> </div> <div class = "row mt-4"> <div id="hazard" class = "col-5 mr-2 card-class"> <strong>Hazard Type</strong> <!-- <span class="reset" style="display: none;">Selected: <span class="filter"></span> </span>--> <a href="javascript:hazardChart.filterAll();dc.redrawAll()" class="reset" style="display: none; color:#00b6dd">reset </a> <div class="clearfix"></div> </div> <div id="rbc" class = "col-5 ml-2 card-class"><strong>Road, Bridge or Culvert</strong> <!-- <span class="reset" style="display: none;">Selected: <span class="filter"></span> </span>--> <a href="javascript:rbcChart.filterAll();dc.redrawAll()" class="reset" style="display: none; color:#00b6dd">reset </a> <div class="clearfix"></div> </div> </div> </div> <div class = "col-6"> <div class="row"> <div id="street" class="col-6 mr-2 card-class"><strong >Street</strong> <!-- <span class="reset" style="display: none;">Selected: <span class="filter"></span> </span>--> <a href="javascript:streetChart.filterAll();dc.redrawAll()" class="reset" style="display: none;color:#00b6dd">reset </a> <div class="clearfix"></div> </div> <div id="roadtype" class="col-5 card-class"> <strong>Road Type</strong> <!-- <span class="reset" style="display: none;">Selected: <span class="filter"></span> </span>--> <a href="javascript:roadtypeChart.filterAll();dc.redrawAll()" class="reset" style="display: none;color:#00b6dd">reset </a> <div class="clearfix"></div> </div> </div> </div> </div> <div class="row"> <div class="col-md-8"> <div class="dc-data-count mb-2"> <a href="javascript:dc.filterAll(); dc.redrawAll()" style="color:#00b6dd">Reset All</a> </div> <div id="paging" class = "table-heading"> 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-content"> </table> </div></div><script src="crossfilter.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.15.0/d3.min.js"></script><script src="https://unpkg.com/dc@4/dist/dc.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.6.0/leaflet.js"></script><!--Optional--><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster.js"></script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/dc.leaflet@0.5.0/dc.leaflet.js"></script><!--<script type="text/javascript" src="https://protect-eu.mimecast.com/s/o7mzcqlyvhvykdhoriim?domain=cdn.jsdelivr.net"></script>--><script> dc.config.defaultColors(d3.schemeCategory10); const markerChart = new dc_leaflet.markerChart("#map"); // const depthChart = new dc.BarChart("#depth"); const yearChart = dc.pieChart("#year"); const hazardChart = new dc.RowChart("#hazard"); const streetChart = new dc.RowChart("#street"); const stateChart = dc.pieChart("#state"); const roadtypeChart = new dc.RowChart("#roadtype"); const rbcChart = new dc.RowChart("#rbc"); const envTable = new dc.DataTable('.dc-data-table'); let ofs = 0, pag = 50; let roads = {1:"Freeways/Motorways", 2: "Highways", 3: "Secondary", 4: "Local Connector", 5: "Street/Local - property access", 6: "Private or Restricted", 7: "4WD and Tracks", 8: "Malls", 9: "Construction Lines", 10:"Unconstructed/Dedicated", 11: "Ferry", 12: "Bikeways/Walkways", 13: "Busways"}; d3.csv("roads_CC_2_ssm_1.csv") .then(function (data) { drawMarkerSelect(data); function drawMarkerSelect(data) { data.forEach(d => { d.Depth = +d.Depth; d["Affected Length"] = +d.SHAPE_Leng; // pre-calculate month for better performance d.close = +d.close; // coerce to number d.open = +d.open; }); data.map(function (d) { if(d.Depth === -9999){ d.Depth = 0; } }); console.log(data); let ndx = crossfilter(data); let all = ndx.groupAll() ; let RandBDim = ndx.dimension(function(d) { return [d.y, d.x]; }); let hazardDim = ndx.dimension(function (d) { return d.Hazard; }); let hazardyearDim = ndx.dimension(function (d) { return d.Hazard_year; }); let yearDim = ndx.dimension(function (d) { return d.Year; }); let streetDim = ndx.dimension(function (d) { return d.STREET; }); let roadtypeDim = ndx.dimension(function (d) { return roads[d.ROADTYPE]; }); let stateDim = ndx.dimension(function (d) { if(d.STATE_CTRL === "F"){ return "False"; } else{ return "True"; } }); let rbcDim = ndx.dimension(function (d) { return d.Bridge_Cul; }); /*let shapelenDim = ndx.dimension(function (d) { return d.SHAPE_Leng });*/ let depthDim = ndx.dimension(function (d) { if (d.Depth === -9999){ return 0; }else{ return d.Depth; } }); 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://protect-eu.mimecast.com/s/aVtlCrmREIWRPpumYOpi?domain=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); } function display() { var totFilteredRecs = ndx.groupAll().value(); var end = ofs + pag > totFilteredRecs ? totFilteredRecs : ofs + pag; d3.select('#begin') .text(end === 0? ofs : ofs + 1); d3.select('#end') .text(end); d3.select('#last') .attr('disabled', ofs-pag<0 ? 'true' : null); d3.select('#next') .attr('disabled', ofs+pag>=totFilteredRecs ? 'true' : null); d3.select('#size').text(totFilteredRecs); if(totFilteredRecs != ndx.size()){ d3.select('#totalsize').text("(filtered Total: " + ndx.size() + " )"); }else{ d3.select('#totalsize').text(''); } } function next() { ofs += pag; update_offset(); envTable.redraw(); } function last() { ofs -= pag; update_offset(); envTable.redraw(); } d3.select("#next") .on("click", next); d3.select("#last") .on("click", last); // d3.select('#street').style("cursor", "pointer"); // d3.select('#state').style("cursor", "pointer"); // d3.select('#year').style("cursor", "pointer"); // d3.select('#rbc').style("cursor", "pointer"); // d3.select('#hazard').style("cursor", "pointer"); // d3.select('#roadtype').style("cursor", "pointer"); dc.renderAll(); } });</script></body></html> Updated missing url https://protect-eu.mimecast.com/s/o7MzCqlYVHVyKDHoRIim?domain=cdn.jsdelivr.net to https://protect-eu.mimecast.com/s/o7mzcqlyvhvykdhoriim?domain=cdn.jsdelivr.net
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://protect-eu.mimecast.com/s/o7MzCqlYVHVyKDHoRIim?domain=cdn.jsdelivr.net