ssmaroju · March 1, 2019 21:52
diff --git a/dc.leaflet.js b/dc.leaflet.js
 /*!
 *  dc.leaflet 0.4.0
 *  http://dc-js.github.io/dc.leaflet.js/
 *  Copyright 2014-2015 Boyan Yurukov and the dc.leaflet Developers
 *  https://github.com/dc-js/dc.leaflet.js/blob/master/AUTHORS
 *
 *  Licensed under the Apache License, Version 2.0 (the "License");
 *  you may not use this file except in compliance with the License.
 *  You may obtain a copy of the License at
 *
 *      http://www.apache.org/licenses/LICENSE-2.0
 *
 *  Unless required by applicable law or agreed to in writing, software
 *  distributed under the License is distributed on an "AS IS" BASIS,
 *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 *  See the License for the specific language governing permissions and
 *  limitations under the License.
 */
 (function() { function _dc_leaflet(dc) {
        'use strict';

        var dc_leaflet = {
            version: '0.4.0'
        };

        dc_leaflet.leafletBase = function(_chart) {
            _chart = dc.marginMixin(dc.baseChart(_chart));

            _chart.margins({left:0, top:0, right:0, bottom:0});

            var _map;

            var _mapOptions=false;
            var _defaultCenter=false;
            var _defaultZoom=false;

            var _cachedHandlers = {};

            var _createLeaflet = function(root) {
                // append sub-div if not there, to allow client to put stuff (reset link etc.)
                // in main div. might also use relative positioning here, for now assume
                // appending will put in right position
                var child_div = root.selectAll('div.dc-leaflet');
                child_div = child_div.data([0]).enter()
                    .append('div').attr('class', 'dc-leaflet')
                    .style('width', _chart.effectiveWidth() + "px")
                    .style('height', _chart.effectiveHeight() + "px")
                    .merge(child_div);
                return L.map(child_div.node(),_mapOptions);
            };

            var _tiles=function(map) {
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                }).addTo(map);
            };

            _chart.createLeaflet = function(_) {
                if(!arguments.length) {
                    return _createLeaflet;
                }
                _createLeaflet = _;
                return _chart;
            };

            _chart._doRender = function() {
                if(! _chart.map()){
                    _map = _createLeaflet(_chart.root());
                    for(var ev in _cachedHandlers)
                        _map.on(ev, _cachedHandlers[ev]);

                    if (_defaultCenter && _defaultZoom) {
                        _map.setView(_chart.toLocArray(_defaultCenter), _defaultZoom);
                    }

                    _chart.tiles()(_map);
                    _chart._postRender();
                }
                else
                    console.warn("WARNING: Leaflet map already rendered.");

                return _chart._doRedraw();
            };

            _chart._doRedraw = function() {
                return _chart;
            };

            _chart._postRender = function() {
                return _chart;
            };

            _chart.mapOptions = function(_) {
                if (!arguments.length) {
                    return _mapOptions;
                }
                _mapOptions = _;
                return _chart;
            };

            _chart.center = function(_) {
                if (!arguments.length) {
                    return _defaultCenter;
                }
                _defaultCenter = _;
                return _chart;
            };

            _chart.zoom = function(_) {
                if (!arguments.length) {
                    return _defaultZoom;
                }
                _defaultZoom = _;
                return _chart;
            };

            _chart.tiles = function(_) {
                if (!arguments.length) {
                    return _tiles;
                }
                _tiles = _;
                return _chart;
            };

            _chart.map = function() {
                return _map;
            };

            _chart.toLocArray = function(value) {
                if (typeof value === "string") {
                    // expects '11.111,1.111'
                    value = value.split(",");
                }
                // else expects [11.111,1.111]
                return value;
            };

            // combine Leaflet events into d3 & dc events
            dc.override(_chart, 'on', function(event, callback) {
                var leaflet_events = ['zoomend', 'moveend'];
                if(leaflet_events.indexOf(event) >= 0) {
                    if(_map) {
                        _map.on(event, callback);
                    }
                    else {
                        _cachedHandlers[event] = callback;
                    }
                    return this;
                }
                else return _chart._on(event, callback);
            });

            return _chart;
        };

 //Legend code adapted from http://leafletjs.com/examples/choropleth.html
        dc_leaflet.legend = function() {
            var _parent, _legend = {};
            var _leafletLegend = null;
            var _position = 'bottomleft';

            _legend.parent = function (parent) {
                if(!arguments.length)
                    return _parent;
                _parent = parent;
                return this;
            };

            function _LegendClass() {
                return L.Control.extend({
                    options: {position: _position},
                    onAdd: function (map) {
                        this._div = L.DomUtil.create('div', 'info legend');
                        map.on('moveend',this._update,this);
                        this._update();
                        return this._div;
                    },
                    _update: function () {
                        if (!_parent.colorDomain)
                            console.warn('legend not supported for this dc.leaflet chart type, ignoring');
                        else {
                            var minValue = _parent.colorDomain()[0],
                                maxValue = _parent.colorDomain()[1],
                                palette = _parent.colors().range(),
                                colorLength = _parent.colors().range().length,
                                delta = (maxValue - minValue)/colorLength,
                                i;

                            // define grades for legend colours
                            // based on equation in dc.js colorCalculator (before version based on colorMixin)
                            var grades = [];
                            grades[0] = Math.round(minValue);
                            for (i= 1; i < colorLength; i++) {
                                grades[i] = Math.round((0.5 + (i - 1)) * delta + minValue);
                            }

                            var div = L.DomUtil.create('div', 'info legend');
                            // loop through our density intervals and generate a label with a colored
                            // square for each interval
                            this._div.innerHTML = ""; //reset so that legend is not plotted multiple times
                            for (i = 0; i < grades.length; i++) {
                                this._div.innerHTML +=
                                    '<i style="background:' + palette[i] + '"></i> ' +
                                    grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] + '<br>' : '+');
                            }
                        }
                    }
                });
            }

            _legend.LegendClass = function(LegendClass) {
                if(!arguments.length)
                    return _LegendClass;
                _LegendClass = LegendClass;
                return _legend;
            };

            _legend.render = function () {
                // unfortunately the dc.js legend has no concept of redraw, it's always render
                if(!_leafletLegend) {
                    // fetch the legend class creator, invoke it
                    var Legend = _legend.LegendClass()();
                    // and constuct that class
                    _leafletLegend = new Legend();
                    _leafletLegend.addTo(_parent.map());
                }

                return _legend.redraw();
            };

            _legend.redraw = function () {
                _leafletLegend._update();
                return _legend;
            };

            _legend.leafletLegend = function () {
                return _leafletLegend;
            };

            _legend.position = function (position) {
                if(!arguments.length) return _position;
                _position = position;
                return _legend;
            };

            return _legend;
        };

        dc_leaflet.markerChart = function(parent, chartGroup) {
            var _chart = dc_leaflet.leafletBase({});

            var _renderPopup = true;
            var _cluster = false; // requires leaflet.markerCluster
            var _clusterOptions=false;
            var _rebuildMarkers = false;
            var _brushOn = true;
            var _filterByArea = false;

            var _filter;
            var _innerFilter=false;
            var _zooming=false;
            var _layerGroup = false;
            var _markerList = [];
            var _currentGroups=false;

            _chart.renderTitle(true);

            var _location = function(d) {
                return _chart.keyAccessor()(d);
            };

            var _marker = function(d, map) {
                var marker = new L.Marker(_chart.toLocArray(_chart.locationAccessor()(d)), {
                    title: _chart.renderTitle() ? _chart.title()(d) : '',
                    alt: _chart.renderTitle() ? _chart.title()(d) : '',
                    icon: _icon(d, map),
                    clickable: _chart.renderPopup() || (_chart.brushOn() && !_filterByArea),
                    draggable: false
                });
                return marker;
            };

            var _icon = function(d, map) {
                return new L.Icon.Default();
            };

            var _popup = function(d, marker) {
                return _chart.title()(d);
            };

            _chart._postRender = function() {
                if (_chart.brushOn()) {
                    if (_filterByArea) {
                        _chart.filterHandler(doFilterByArea);
                    }

                    _chart.map().on('zoomend moveend', zoomFilter, this );
                    if (!_filterByArea)
                        _chart.map().on('click', zoomFilter, this );
                    _chart.map().on('zoomstart', zoomStart, this);
                }

                if (_cluster) {
                    _layerGroup = new L.MarkerClusterGroup(_clusterOptions?_clusterOptions:null);
                }
                else {
                    _layerGroup = new L.LayerGroup();
                }
                _chart.map().addLayer(_layerGroup);
            };

            _chart._doRedraw = function() {
                var groups = _chart._computeOrderedGroups(_chart.data()).filter(function (d) {
                    return _chart.valueAccessor()(d) !== 0;
                });
                if (_currentGroups && _currentGroups.toString() === groups.toString()) {
                    return;
                }
                _currentGroups=groups;

                if (_rebuildMarkers) {
                    _markerList=[];
                }
                _layerGroup.clearLayers();

                var addList=[];
                groups.forEach(function(v, i) {
                    var key = _chart.keyAccessor()(v);
                    var marker = null;
                    if (!_rebuildMarkers && key in _markerList) {
                        marker = _markerList[key];
                    }
                    else {
                        marker = createmarker(v, key);
                    }
                    if (!_chart.cluster()) {
                        _layerGroup.addLayer(marker);
                    }
                    else {
                        addList.push(marker);
                    }
                });

                if (_chart.cluster() && addList.length > 0) {
                    _layerGroup.addLayers(addList);
                }
            };

            _chart.locationAccessor = function(_) {
                if (!arguments.length) {
                    return _location;
                }
                _location= _;
                return _chart;
            };

            _chart.marker = function(_) {
                if (!arguments.length) {
                    return _marker;
                }
                _marker= _;
                return _chart;
            };

            _chart.icon = function(_) {
                if (!arguments.length) {
                    return _icon;
                }
                _icon= _;
                return _chart;
            };

            _chart.popup = function(_) {
                if (!arguments.length) {
                    return _popup;
                }
                _popup= _;
                return _chart;
            };

            _chart.renderPopup = function(_) {
                if (!arguments.length) {
                    return _renderPopup;
                }
                _renderPopup = _;
                return _chart;
            };


            _chart.cluster = function(_) {
                if (!arguments.length) {
                    return _cluster;
                }
                _cluster = _;
                return _chart;
            };

            _chart.clusterOptions = function(_) {
                if (!arguments.length) {
                    return _clusterOptions;
                }
                _clusterOptions = _;
                return _chart;
            };

            _chart.rebuildMarkers = function(_) {
                if (!arguments.length) {
                    return _rebuildMarkers;
                }
                _rebuildMarkers = _;
                return _chart;
            };

            _chart.brushOn = function(_) {
                if (!arguments.length) {
                    return _brushOn;
                }
                _brushOn = _;
                return _chart;
            };

            _chart.filterByArea = function(_) {
                if (!arguments.length) {
                    return _filterByArea;
                }
                _filterByArea = _;
                return _chart;
            };

            _chart.markerGroup = function() {
                return _layerGroup;
            };

            var createmarker = function(v, k) {
                var marker = _marker(v, _chart.map());
                marker.key = k;
                if (_chart.renderPopup()) {
                    marker.bindPopup(_chart.popup()(v, marker));
                }
                if (_chart.brushOn() && !_filterByArea) {
                    marker.on("click", selectFilter);
                }
                _markerList[k]=marker;
                return marker;
            };

            var zoomStart = function(e) {
                _zooming=true;
            };

            var zoomFilter = function(e) {
                if (e.type === "moveend" && (_zooming || e.hard)) {
                    return;
                }
                _zooming=false;

                if (_filterByArea) {
                    var filter;
                    if (_chart.map().getCenter().equals(_chart.center()) && _chart.map().getZoom() === _chart.zoom()) {
                        filter = null;
                    }
                    else {
                        filter = _chart.map().getBounds();
                    }
                    dc.events.trigger(function () {
                        _chart.filter(null);
                        if (filter) {
                            _innerFilter=true;
                            _chart.filter(filter);
                            _innerFilter=false;
                        }
                        dc.redrawAll(_chart.chartGroup());
                    });
                } else if (_chart.filter() && (e.type === "click" ||
                    (_markerList.indexOf(_chart.filter()) !== -1 &&
                        !_chart.map().getBounds().contains(_markerList[_chart.filter()].getLatLng())))) {
                    dc.events.trigger(function () {
                        _chart.filter(null);
                        if (_renderPopup) {
                            _chart.map().closePopup();
                        }
                        dc.redrawAll(_chart.chartGroup());
                    });
                }
            };

            var doFilterByArea = function(dimension, filters) {
                _chart.dimension().filter(null);
                if (filters && filters.length>0) {
                    _chart.dimension().filterFunction(function(d) {
                        if (!(d in _markerList)) {
                            return false;
                        }
                        var locO = _markerList[d].getLatLng();
                        return locO && filters[0].contains(locO);
                    });
                    if (!_innerFilter && _chart.map().getBounds().toString !== filters[0].toString()) {
                        _chart.map().fitBounds(filters[0]);
                    }
                }
            };

            var selectFilter = function(e) {
                if (!e.target) return;
                var filter = e.target.key;
                dc.events.trigger(function () {
                    _chart.filter(filter);
                    dc.redrawAll(_chart.chartGroup());
                });
            };

            return _chart.anchor(parent, chartGroup);
        };

        dc_leaflet.choroplethChart = function(parent, chartGroup) {
            var _chart = dc.colorChart(dc_leaflet.leafletBase({}));

            var _geojsonLayer = false;
            var _dataMap = [];

            var _geojson = false;
            var _renderPopup = true;
            var _brushOn = true;
            var _featureOptions = {
                'fillColor':'black',
                'color':'gray',
                'opacity':0.4,
                'fillOpacity':0.6,
                'weight':1
            };

            var _featureKey = function(feature) {
                return feature.key;
            };

            var _featureStyle = function(feature) {
                var options = _chart.featureOptions();
                if (options instanceof Function) {
                    options=options(feature);
                }
                options = JSON.parse(JSON.stringify(options));
                var v = _dataMap[_chart.featureKeyAccessor()(feature)];
                if (v && v.d) {
                    options.fillColor=_chart.getColor(v.d, v.i);
                    if (_chart.filters().indexOf(v.d.key) !== -1) {
                        options.opacity=0.8;
                        options.fillOpacity=1;
                    }
                }
                return options;
            };

            var _popup = function(d, feature) {
                return _chart.title()(d);
            };

            _chart._postRender = function() {
                _geojsonLayer=L.geoJson(_chart.geojson(), {
                    style: _chart.featureStyle(),
                    onEachFeature: processFeatures
                });
                _chart.map().addLayer(_geojsonLayer);
            };

            dc.override(_chart, '_doRedraw', function() {
                _geojsonLayer.clearLayers();
                _dataMap=[];
                _chart._computeOrderedGroups(_chart.data()).forEach(function (d, i) {
                    _dataMap[_chart.keyAccessor()(d)] = {'d':d, 'i':i};
                });
                _geojsonLayer.addData(_chart.geojson());
                return _chart.__doRedraw();
            });

            _chart.geojson = function(_) {
                if (!arguments.length) {
                    return _geojson;
                }
                _geojson = _;
                return _chart;
            };

            _chart.featureOptions = function(_) {
                if (!arguments.length) {
                    return _featureOptions;
                }
                _featureOptions = _;
                return _chart;
            };

            _chart.featureKeyAccessor = function(_) {
                if (!arguments.length) {
                    return _featureKey;
                }
                _featureKey= _;
                return _chart;
            };

            _chart.featureStyle = function(_) {
                if (!arguments.length) {
                    return _featureStyle;
                }
                _featureStyle= _;
                return _chart;
            };

            _chart.popup = function(_) {
                if (!arguments.length) {
                    return _popup;
                }
                _popup= _;
                return _chart;
            };

            _chart.renderPopup = function(_) {
                if (!arguments.length) {
                    return _renderPopup;
                }
                _renderPopup = _;
                return _chart;
            };

            _chart.brushOn = function(_) {
                if (!arguments.length) {
                    return _brushOn;
                }
                _brushOn = _;
                return _chart;
            };

            var processFeatures = function (feature, layer) {
                var v = _dataMap[_chart.featureKeyAccessor()(feature)];
                if (v && v.d) {
                    layer.key=v.d.key;
                    if (_chart.renderPopup())
                        layer.bindPopup(_chart.popup()(v.d, feature));
                    if (_chart.brushOn())
                        layer.on("click", selectFilter);
                }
            };

            var selectFilter = function(e) {
                if (!e.target) {
                    return;
                }
                var filter = e.target.key;
                dc.events.trigger(function () {
                    _chart.filter(filter);
                    dc.redrawAll(_chart.chartGroup());
                });
            };

            return _chart.anchor(parent, chartGroup);
        };

        dc_leaflet.bubbleChart = function (parent, chartGroup) {
            "use strict";

            /* ####################################
             * Private variables -- default values.
             * ####################################
             */
            var _chart = dc_leaflet.leafletBase({});
            var _selectedColor = 'blue';
            var _unselectedColor = 'gray';
            var _layerGroup = false;

            var _location = function (d) {
                return _chart.keyAccessor()(d);
            };

            var _r = d3.scaleLinear().domain([0, 100]);
            var _brushOn = true;

            var _marker = function (d, map) {
                var loc = _chart.locationAccessor()(d);
                var locArray = _chart.toLocArray(loc);

                var latlng = L.latLng(+locArray[0], +locArray[1]);
                var circle = L.circleMarker(latlng);

                circle.setRadius(_chart.r()(_chart.valueAccessor()(d)));
                circle.on("mouseover", function (e) {
                    // TODO - Tooltips!
                    //console.log(_chart.title()(d));
                });
                var key = _chart.keyAccessor()(d);
                var isSelected = (-1 !== _chart.filters().indexOf(key));

                circle.options.color = isSelected ? _chart.selectedColor() : _chart.unselectedColor();

                return circle;
            };

            /* ########################
             * Private helper functions
             * ########################
             */

            /* ################
             * Public interface
             * ################
             */


            /**
             #### .r([bubbleRadiusScale])
             Get or set bubble radius scale. By default bubble chart uses ```d3.scaleLinear().domain([0, 100])``` as its r scale .

             **/
            _chart.r = function (_) {
                if (!arguments.length) return _r;
                _r = _;
                return _chart;
            };

            _chart.brushOn = function (_) {
                if (!arguments.length) {
                    return _brushOn;
                }
                _brushOn = _;
                return _chart;
            };

            _chart.locationAccessor = function (_) {
                if (!arguments.length) {
                    return _location;
                }
                _location = _;
                return _chart;
            };
            /**
             #### .selectedColor([color])
             Get or set the color of a selected (filter) bubble.
             */
            _chart.selectedColor = function (_) {
                if (!arguments.length) {
                    return _selectedColor;
                }
                _selectedColor = _;
                return _chart;
            };

            /**
             #### .unselectedColor([color])
             Get or set the color of a bubble which is not currently in the filter.

             */
            _chart.unselectedColor = function (_) {
                if (!arguments.length) {
                    return _unselectedColor;
                }
                _unselectedColor = _;
                return _chart;
            };

            var createmarker = function (v, k) {
                var marker = _chart.marker()(v, _chart.map());
                marker.key = k;
                if (_chart.brushOn()) {
                    marker.on("click", selectFilter);
                }
                return marker;
            };

            _chart.marker = function (_) {
                if (!arguments.length) {
                    return _marker;
                }
                _marker = _;
                return _chart;
            };

            /* Render and redraw overrides */
            _chart._postRender = function () {
                if (_chart.brushOn()) {

                    _chart.map().on('click', function (e) {
                        _chart.filter(null);
                        _chart.redrawGroup();
                    });
                }
                _chart.map().on('boxzoomend', boxzoomFilter, this);
                _layerGroup = new L.LayerGroup();
                _chart.map().addLayer(_layerGroup);
            };

            _chart._doRedraw = function () {
                var groups = _chart._computeOrderedGroups(_chart.data()).filter(function (d) {
                    return _chart.valueAccessor()(d) !== 0;
                });
                _layerGroup.clearLayers();
                groups.forEach(function (v, i) {
                    var key = _chart.keyAccessor()(v);
                    var marker = null;

                    marker = createmarker(v, key);
                    _layerGroup.addLayer(marker);
                });
            };

            /* Callback functions */
            function boxzoomFilter(e) {
                var filters = [];

                _layerGroup.eachLayer(function (layer) {
                    var latLng = layer.getLatLng();
                    if (e.boxZoomBounds.contains(latLng)) {
                        filters.push(layer.key);
                    }
                });

                dc.events.trigger(function (e) {
                    _chart.replaceFilter([filters]);
                    _chart.redrawGroup();
                });
            }

            var selectFilter = function (e) {
                L.DomEvent.stopPropagation(e);
                var filter = e.target.key;
                if (e.originalEvent.ctrlKey || e.originalEvent.metaKey) {
                    // If ctrl/cmd key modifier was pressed on click, toggle the target
                    _chart.filter(filter);
                }
                else {
                    // If ctrl key wasn't pressed, clear selection and add target
                    _chart.replaceFilter([[filter]]);
                }
                _chart.redrawGroup();
            };


            return _chart.anchor(parent, chartGroup);
        };

        dc_leaflet.d3 = d3;
        dc_leaflet.crossfilter = crossfilter;
        dc_leaflet.dc = dc;

        return dc_leaflet;
    }
        if (typeof define === 'function' && define.amd) {
            define(["dc"], _dc_leaflet);
        } else if (typeof module == "object" && module.exports) {
            var _dc = require('dc');
            module.exports = _dc_leaflet(_dc);
        } else {
            this.dc_leaflet = _dc_leaflet(dc);
        }
    }
 )();

 //# sourceMappingURL=dc.leaflet.js.map
diff --git a/finalResult1.csv b/finalResult1.csv
diff --git a/index.html b/index.html
 <!--<!DOCTYPE  html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
 <!DOCTYPE  html>
 <html lang="en">
 <head>
    <title>BMT-Ecology</title>
    <link rel="shortcut icon" href="https://bmt.cloud.databricks.com/media/bmt-favicon.24e70a2e.ico">

    <meta charset="UTF-8">

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

   <link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/marker-icon.png" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/marker-icon-2x.png" />
    <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"/>
   


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!--<script src="https://gist.github.com/xhinking/9341806.js"></script>-->
    <style>
        #monthly-volume-chart g.y {
            display: none;
        }
        #container{width:100%;}
        #left{float:left;width:20px;}
        #right{float:right;width:20px;}
        #center{margin:0 auto;width:800px;}
        #paging {
            text-align: right;
        }
        #data-table th span { /*Glyphicon style*/
            float: right;
            font-size: 1em;
            color: #0080bf;
            display: inline-block;
        }
        #dc-table-graph th {
            cursor: pointer;
        }
        .dc-chart g.row text {fill: black;}

        #holder>div {
            padding:30px 0;
            clear:both;
        }
        .map {
            width:600px;
            height:350px;
        }

    </style>
 </head>
 <body>
 <div id="container">
    <div id="left"></div>
    <div id="right">

    </div>
    <div id="center"></div>
 </div>
 <div class="container">
    <h2>Turtle Nesting Study Area</h2>
    <div class="row">
        <div id="demo1" align="center">
            <!--<strong>Average Values (Top 20)</strong>-->
            <a class="reset" href="javascript:marker.filterAll();dc.redrawAll();" style="display: none;">reset</a>
            <div class="map"></div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="row">
        <div id="search-chart"></div>
        <!--<div style="clear:both;">-->
        <div id="year-chart" align="center">
            <strong>Year</strong>
            <a class="reset" href="javascript:yearChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

            <div class="clearfix"></div>
        </div>
        <div id="name-chart" align="center">
            <strong>Name</strong>
            <a class="reset" href="javascript:nameChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

            <div class="clearfix"></div>
        </div>
        <div id="descriptor-chart" align="center">
            <strong>Descriptor</strong>
            <a class="reset" href="javascript:descriptorChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

            <div class="clearfix"></div>
        </div>
        <div id="hectares-chart" align="center">
            <strong>Hectares by Location</strong>
            <a class="reset" href="javascript:hectaresChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

            <div class="clearfix"></div>
        </div>
        <div class="row">
            <div>
                <div class="dc-data-count" align="center">
                    <span class="filter-count"></span> selected out of <span class="total-count"></span> records | <a
                        href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
                </div>
            </div>
            <table class="table table-hover dc-data-table">
            </table>
        </div>
        <div class="clearfix"></div>
    </div>
 </div>
 <!--<script type="text/javascript" src="js/d3.js"></script>-->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>
 <!--<script src="https://d3js.org/d3-time.v1.min.js"></script>
 <script src="https://d3js.org/d3-time-format.v2.min.js"></script>-->
 <!--<script type="text/javascript" src="js/crossfilter.js"></script>-->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
 <!--<script type="text/javascript" src="js/dc.js"></script>-->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.6/dc.js"></script>

 <!--<script type="text/javascript" src="js/d3.js"></script>-->
 <!--<script type="text/javascript" src="js/crossfilter.js"></script>-->
 <!--<script type="text/javascript" src="js/dc.js"></script>-->


 <!--<script type="text/javascript" src="../dc.leaflet.js-master/web/js/leaflet.js"></script>-->
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>

 <!--<script src="../dc.leaflet.js-master/web/js/colorbrewer.js"></script>-->

 <!--<script type="text/javascript" src="../dc.leaflet.js-master/web/js/leaflet.markercluster.js"></script>-->
 <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="../dc.leaflet.js-master/web/js/dc.leaflet.js"></script>-->
 <script type="text/javascript" src="dc.leaflet.js"></script>

 <script type="text/javascript" src="turtleAreas.js"></script>

 </body>
 </html>
diff --git a/turtleAreas.js b/turtleAreas.js
 //# dc.js Getting Started and How-To Guide
 'use strict';
 // dc.config.defaultColors(d3.schemeCategory10);

 dc.config.defaultColors(d3.schemePaired);
 // Note: It is often a good idea to have these objects accessible at the global scope so that they can be modified or
 // filtered by other page controls.
 var yearChart = dc.pieChart('#year-chart');
 var nameChart = dc.pieChart('#name-chart');
 var descriptorChart = dc.pieChart('#descriptor-chart');
 var hectaresChart = dc.barChart('#hectares-chart');
 var sampleCount = dc.dataCount('.dc-data-count');
 var samplesTable = dc.dataTable('.dc-data-table');

 var groupname = "marker-select";
 // var marker = dc_leaflet.markerChart("#demo1 .map",groupname);
 var marker = dc_leaflet.markerChart("#demo1 .map");
 var pie = dc.pieChart("#demo1 .pie",groupname);
 var searchChart = dc.textFilterWidget("#search-chart");

 d3.csv('finalResult1.csv').then(function (data) {
    var numberFormat = d3.format('.2f');
    data.forEach(function (d) {
            d.Year = +d.Year;
            // d.Lab_Detection_Limit = (d.Lab_Detection_Limit==="NAN")? 1e-9:+d.Lab_Detection_Limit;
            d.Hectares = +d.Hectares;
            d.geo = +d.Latitude+","+d.Longitude;
    });
    //### Create Crossfilter Dimensions and Groups
    var xf = crossfilter(data);
    var all = xf.groupAll();

    var searchDimension = xf.dimension(function (d) {
        return d.Year + ' ' + d.Name + ' ' + d.Descriptor + ' ' + d.Hectares;
    });

    // Create categorical dimension
    var nameDim = xf.dimension(function (d) {
        return d.Name;
    });
    // Produce counts records in the dimension
    var nameGroup = nameDim.group();

    var nameDescDim = xf.dimension(function (d) {
        return d.Name;
    });
    // var nameDescriptorGroup = nameDescDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
    // print_filter(nameDescDim);


    // Create categorical dimension
    var descriptor = xf.dimension(function (d) {
        return d.Descriptor;
    });
    // Produce counts records in the dimension
    var descriptorGroup = descriptor.group();


    var yearDim = xf.dimension(function (d) {
        return d.Year;
    });

    var yearGroup = yearDim.group();

    var location = xf.dimension(function(d) { return d.geo; });
    var locationGroup = location.group().reduceCount();

    nameChart /* dc.pieChart('#gain-loss-chart', 'chartGroup') */
    // (_optional_) define chart width, `default = 200`
        .width(250)
    // (optional) define chart height, `default = 200`
        .height(250)
    // Define pie radius
        .radius(100)
    // Set dimension
        .innerRadius(30)
        .dimension(nameDim)
    // Set group
        .group(nameGroup);


    descriptorChart /* dc.pieChart('#gain-loss-chart', 'chartGroup') */
    // (_optional_) define chart width, `default = 200`
        .width(250)
        // (optional) define chart height, `default = 200`
        .height(250)
        // Define pie radius
        .radius(100)
        // Set dimension
        .innerRadius(30)
        .dimension(descriptor)
        // Set group
        .group(descriptorGroup);

    yearChart /* dc.pieChart('#quarter-chart', 'chartGroup') */
        .width(250)
        .height(250)
        .radius(100)
        .innerRadius(30)
        .dimension(yearDim)
        .group(yearGroup)
        .render();

    

     var nameDimension        = xf.dimension(function(d) {return d.Name;});
     var hectaresGroup = nameDimension.group().reduce(function (p, v) {
        p[v.Descriptor] = (p[v.Descriptor] || 0) + v.Hectares;
        return p;
     }, function(p, v) {
         p[v.Descriptor] = (p[v.Descriptor] || 0) - v.Hectares;
         return p;
     }, function() {
         return {};
     });
    function sel_stack(i) {
        return function(d) {
            return d.value[i];
        };
    }
 var desc = ['Optimal', 'Sub-optimal', 'Unsuitable'];
    hectaresChart
        .width(768)
        .height(480)
        .x(d3.scaleBand())
        .xUnits(dc.units.ordinal)
        .margins({left: 80, top: 20, right: 10, bottom: 20})
        .brushOn(false)
        .clipPadding(10)
        .title(function(d) {
            console.log(this);
            return d.key + '[' + this.layer + ']: ' + d.value[this.layer];
        })
        .dimension(nameDimension)
        .group(hectaresGroup, desc[0], sel_stack(desc[0]))
        .renderLabel(true);
    hectaresChart.legend(dc.legend());
    dc.override(hectaresChart, 'legendables', function() {
        var items = hectaresChart._legendables();
        return items.reverse();
    });

    for(var i = 1; i<desc.length; ++i)
        hectaresChart.stack(hectaresGroup, desc[i], sel_stack(desc[i]));
    hectaresChart.render();
    
    sampleCount /* dc.dataCount('.dc-data-count', 'chartGroup'); */
        .dimension(xf)
        .group(all)
        // (_optional_) `.html` sets different html when some records or all records are selected.
        // `.html` replaces everything in the anchor with the html given using the following function.
        // `%filter-count` and `%total-count` are replaced with the values obtained.
        .html({
            some: '<strong>%filter-count</strong> selected out of <strong>%total-count</strong> records' +
                ' | <a href=\'javascript:dc.filterAll(); dc.renderAll();\'>Reset All</a>',
            all: 'All records:<strong>%total-count</strong>'
        });


    samplesTable /* dc.dataTable('.dc-data-table', 'chartGroup') */
        .dimension(yearDim)
        // (_optional_) max number of records to be shown, `default = 25`
        .group(function () {
            return 'Parameters';
        })
        .size(50)
        .columns([
            'Year',
            'Name',
            'Descriptor',
            'Hectares'
        ])
        // (optional) sort using the given field, :default = function(d){return d;}
        .sortBy(function(d){ return -d.Value; })
        // (optional) sort order, :default ascending
        // .order(d3.descending())
 ;

        searchChart.dimension(searchDimension);

    marker.dimension(location)
            .group(locationGroup)
            .width(1200)
            .height(300)
            .center([-20.79647816005, 115.457927070833])
            .zoom(12)
            // .cluster(true);
            .renderPopup(false)
            .filterByArea(true);
        //#### Rendering

    //simply call `.renderAll()` to render all charts on the page
    // dc.renderAll();




    dc.renderAll();

 });

 //#### Versions

 //Determine the current version of dc with `dc.version`
 d3.selectAll('#version').text(dc.version);

 // Determine latest stable version in the repo via Github API
 d3.json('https://api.github.com/repos/dc-js/dc.js/releases/latest').then(function (latestRelease) {
    /*jshint camelcase: false */
    /* jscs:disable */
    d3.selectAll('#latest').text(latestRelease.tag_name);
 });
	/*!
	* dc.leaflet 0.4.0
	* http://dc-js.github.io/dc.leaflet.js/
	* Copyright 2014-2015 Boyan Yurukov and the dc.leaflet Developers
	* https://github.com/dc-js/dc.leaflet.js/blob/master/AUTHORS
	*
	* Licensed under the Apache License, Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.
	* You may obtain a copy of the License at
	*
	* http://www.apache.org/licenses/LICENSE-2.0
	*
	* Unless required by applicable law or agreed to in writing, software
	* distributed under the License is distributed on an "AS IS" BASIS,
	* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	* See the License for the specific language governing permissions and
	* limitations under the License.
	*/
	(function() { function _dc_leaflet(dc) {
	'use strict';

	var dc_leaflet = {
	version: '0.4.0'
	};

	dc_leaflet.leafletBase = function(_chart) {
	_chart = dc.marginMixin(dc.baseChart(_chart));

	_chart.margins({left:0, top:0, right:0, bottom:0});

	var _map;

	var _mapOptions=false;
	var _defaultCenter=false;
	var _defaultZoom=false;

	var _cachedHandlers = {};

	var _createLeaflet = function(root) {
	// append sub-div if not there, to allow client to put stuff (reset link etc.)
	// in main div. might also use relative positioning here, for now assume
	// appending will put in right position
	var child_div = root.selectAll('div.dc-leaflet');
	child_div = child_div.data([0]).enter()
	.append('div').attr('class', 'dc-leaflet')
	.style('width', _chart.effectiveWidth() + "px")
	.style('height', _chart.effectiveHeight() + "px")
	.merge(child_div);
	return L.map(child_div.node(),_mapOptions);
	};

	var _tiles=function(map) {
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '© <a href="https://openstreetmap.org/copyright">OpenStreetMap</a> contributors'
	}).addTo(map);
	};

	_chart.createLeaflet = function(_) {
	if(!arguments.length) {
	return _createLeaflet;
	}
	_createLeaflet = _;
	return _chart;
	};

	_chart._doRender = function() {
	if(! _chart.map()){
	_map = _createLeaflet(_chart.root());
	for(var ev in _cachedHandlers)
	_map.on(ev, _cachedHandlers[ev]);

	if (_defaultCenter && _defaultZoom) {
	_map.setView(_chart.toLocArray(_defaultCenter), _defaultZoom);
	}

	_chart.tiles()(_map);
	_chart._postRender();
	}
	else
	console.warn("WARNING: Leaflet map already rendered.");

	return _chart._doRedraw();
	};

	_chart._doRedraw = function() {
	return _chart;
	};

	_chart._postRender = function() {
	return _chart;
	};

	_chart.mapOptions = function(_) {
	if (!arguments.length) {
	return _mapOptions;
	}
	_mapOptions = _;
	return _chart;
	};

	_chart.center = function(_) {
	if (!arguments.length) {
	return _defaultCenter;
	}
	_defaultCenter = _;
	return _chart;
	};

	_chart.zoom = function(_) {
	if (!arguments.length) {
	return _defaultZoom;
	}
	_defaultZoom = _;
	return _chart;
	};

	_chart.tiles = function(_) {
	if (!arguments.length) {
	return _tiles;
	}
	_tiles = _;
	return _chart;
	};

	_chart.map = function() {
	return _map;
	};

	_chart.toLocArray = function(value) {
	if (typeof value === "string") {
	// expects '11.111,1.111'
	value = value.split(",");
	}
	// else expects [11.111,1.111]
	return value;
	};

	// combine Leaflet events into d3 & dc events
	dc.override(_chart, 'on', function(event, callback) {
	var leaflet_events = ['zoomend', 'moveend'];
	if(leaflet_events.indexOf(event) >= 0) {
	if(_map) {
	_map.on(event, callback);
	}
	else {
	_cachedHandlers[event] = callback;
	}
	return this;
	}
	else return _chart._on(event, callback);
	});

	return _chart;
	};

	//Legend code adapted from http://leafletjs.com/examples/choropleth.html
	dc_leaflet.legend = function() {
	var _parent, _legend = {};
	var _leafletLegend = null;
	var _position = 'bottomleft';

	_legend.parent = function (parent) {
	if(!arguments.length)
	return _parent;
	_parent = parent;
	return this;
	};

	function _LegendClass() {
	return L.Control.extend({
	options: {position: _position},
	onAdd: function (map) {
	this._div = L.DomUtil.create('div', 'info legend');
	map.on('moveend',this._update,this);
	this._update();
	return this._div;
	},
	_update: function () {
	if (!_parent.colorDomain)
	console.warn('legend not supported for this dc.leaflet chart type, ignoring');
	else {
	var minValue = _parent.colorDomain()[0],
	maxValue = _parent.colorDomain()[1],
	palette = _parent.colors().range(),
	colorLength = _parent.colors().range().length,
	delta = (maxValue - minValue)/colorLength,
	i;

	// define grades for legend colours
	// based on equation in dc.js colorCalculator (before version based on colorMixin)
	var grades = [];
	grades[0] = Math.round(minValue);
	for (i= 1; i < colorLength; i++) {
	grades[i] = Math.round((0.5 + (i - 1)) * delta + minValue);
	}

	var div = L.DomUtil.create('div', 'info legend');
	// loop through our density intervals and generate a label with a colored
	// square for each interval
	this._div.innerHTML = ""; //reset so that legend is not plotted multiple times
	for (i = 0; i < grades.length; i++) {
	this._div.innerHTML +=
	'<i style="background:' + palette[i] + '"></i> ' +
	grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+');
	}
	}
	}
	});
	}

	_legend.LegendClass = function(LegendClass) {
	if(!arguments.length)
	return _LegendClass;
	_LegendClass = LegendClass;
	return _legend;
	};

	_legend.render = function () {
	// unfortunately the dc.js legend has no concept of redraw, it's always render
	if(!_leafletLegend) {
	// fetch the legend class creator, invoke it
	var Legend = _legend.LegendClass()();
	// and constuct that class
	_leafletLegend = new Legend();
	_leafletLegend.addTo(_parent.map());
	}

	return _legend.redraw();
	};

	_legend.redraw = function () {
	_leafletLegend._update();
	return _legend;
	};

	_legend.leafletLegend = function () {
	return _leafletLegend;
	};

	_legend.position = function (position) {
	if(!arguments.length) return _position;
	_position = position;
	return _legend;
	};

	return _legend;
	};

	dc_leaflet.markerChart = function(parent, chartGroup) {
	var _chart = dc_leaflet.leafletBase({});

	var _renderPopup = true;
	var _cluster = false; // requires leaflet.markerCluster
	var _clusterOptions=false;
	var _rebuildMarkers = false;
	var _brushOn = true;
	var _filterByArea = false;

	var _filter;
	var _innerFilter=false;
	var _zooming=false;
	var _layerGroup = false;
	var _markerList = [];
	var _currentGroups=false;

	_chart.renderTitle(true);

	var _location = function(d) {
	return _chart.keyAccessor()(d);
	};

	var _marker = function(d, map) {
	var marker = new L.Marker(_chart.toLocArray(_chart.locationAccessor()(d)), {
	title: _chart.renderTitle() ? _chart.title()(d) : '',
	alt: _chart.renderTitle() ? _chart.title()(d) : '',
	icon: _icon(d, map),
	clickable: _chart.renderPopup() \|\| (_chart.brushOn() && !_filterByArea),
	draggable: false
	});
	return marker;
	};

	var _icon = function(d, map) {
	return new L.Icon.Default();
	};

	var _popup = function(d, marker) {
	return _chart.title()(d);
	};

	_chart._postRender = function() {
	if (_chart.brushOn()) {
	if (_filterByArea) {
	_chart.filterHandler(doFilterByArea);
	}

	_chart.map().on('zoomend moveend', zoomFilter, this );
	if (!_filterByArea)
	_chart.map().on('click', zoomFilter, this );
	_chart.map().on('zoomstart', zoomStart, this);
	}

	if (_cluster) {
	_layerGroup = new L.MarkerClusterGroup(_clusterOptions?_clusterOptions:null);
	}
	else {
	_layerGroup = new L.LayerGroup();
	}
	_chart.map().addLayer(_layerGroup);
	};

	_chart._doRedraw = function() {
	var groups = _chart._computeOrderedGroups(_chart.data()).filter(function (d) {
	return _chart.valueAccessor()(d) !== 0;
	});
	if (_currentGroups && _currentGroups.toString() === groups.toString()) {
	return;
	}
	_currentGroups=groups;

	if (_rebuildMarkers) {
	_markerList=[];
	}
	_layerGroup.clearLayers();

	var addList=[];
	groups.forEach(function(v, i) {
	var key = _chart.keyAccessor()(v);
	var marker = null;
	if (!_rebuildMarkers && key in _markerList) {
	marker = _markerList[key];
	}
	else {
	marker = createmarker(v, key);
	}
	if (!_chart.cluster()) {
	_layerGroup.addLayer(marker);
	}
	else {
	addList.push(marker);
	}
	});

	if (_chart.cluster() && addList.length > 0) {
	_layerGroup.addLayers(addList);
	}
	};

	_chart.locationAccessor = function(_) {
	if (!arguments.length) {
	return _location;
	}
	_location= _;
	return _chart;
	};

	_chart.marker = function(_) {
	if (!arguments.length) {
	return _marker;
	}
	_marker= _;
	return _chart;
	};

	_chart.icon = function(_) {
	if (!arguments.length) {
	return _icon;
	}
	_icon= _;
	return _chart;
	};

	_chart.popup = function(_) {
	if (!arguments.length) {
	return _popup;
	}
	_popup= _;
	return _chart;
	};

	_chart.renderPopup = function(_) {
	if (!arguments.length) {
	return _renderPopup;
	}
	_renderPopup = _;
	return _chart;
	};


	_chart.cluster = function(_) {
	if (!arguments.length) {
	return _cluster;
	}
	_cluster = _;
	return _chart;
	};

	_chart.clusterOptions = function(_) {
	if (!arguments.length) {
	return _clusterOptions;
	}
	_clusterOptions = _;
	return _chart;
	};

	_chart.rebuildMarkers = function(_) {
	if (!arguments.length) {
	return _rebuildMarkers;
	}
	_rebuildMarkers = _;
	return _chart;
	};

	_chart.brushOn = function(_) {
	if (!arguments.length) {
	return _brushOn;
	}
	_brushOn = _;
	return _chart;
	};

	_chart.filterByArea = function(_) {
	if (!arguments.length) {
	return _filterByArea;
	}
	_filterByArea = _;
	return _chart;
	};

	_chart.markerGroup = function() {
	return _layerGroup;
	};

	var createmarker = function(v, k) {
	var marker = _marker(v, _chart.map());
	marker.key = k;
	if (_chart.renderPopup()) {
	marker.bindPopup(_chart.popup()(v, marker));
	}
	if (_chart.brushOn() && !_filterByArea) {
	marker.on("click", selectFilter);
	}
	_markerList[k]=marker;
	return marker;
	};

	var zoomStart = function(e) {
	_zooming=true;
	};

	var zoomFilter = function(e) {
	if (e.type === "moveend" && (_zooming \|\| e.hard)) {
	return;
	}
	_zooming=false;

	if (_filterByArea) {
	var filter;
	if (_chart.map().getCenter().equals(_chart.center()) && _chart.map().getZoom() === _chart.zoom()) {
	filter = null;
	}
	else {
	filter = _chart.map().getBounds();
	}
	dc.events.trigger(function () {
	_chart.filter(null);
	if (filter) {
	_innerFilter=true;
	_chart.filter(filter);
	_innerFilter=false;
	}
	dc.redrawAll(_chart.chartGroup());
	});
	} else if (_chart.filter() && (e.type === "click" \|\|
	(_markerList.indexOf(_chart.filter()) !== -1 &&
	!_chart.map().getBounds().contains(_markerList[_chart.filter()].getLatLng())))) {
	dc.events.trigger(function () {
	_chart.filter(null);
	if (_renderPopup) {
	_chart.map().closePopup();
	}
	dc.redrawAll(_chart.chartGroup());
	});
	}
	};

	var doFilterByArea = function(dimension, filters) {
	_chart.dimension().filter(null);
	if (filters && filters.length>0) {
	_chart.dimension().filterFunction(function(d) {
	if (!(d in _markerList)) {
	return false;
	}
	var locO = _markerList[d].getLatLng();
	return locO && filters[0].contains(locO);
	});
	if (!_innerFilter && _chart.map().getBounds().toString !== filters[0].toString()) {
	_chart.map().fitBounds(filters[0]);
	}
	}
	};

	var selectFilter = function(e) {
	if (!e.target) return;
	var filter = e.target.key;
	dc.events.trigger(function () {
	_chart.filter(filter);
	dc.redrawAll(_chart.chartGroup());
	});
	};

	return _chart.anchor(parent, chartGroup);
	};

	dc_leaflet.choroplethChart = function(parent, chartGroup) {
	var _chart = dc.colorChart(dc_leaflet.leafletBase({}));

	var _geojsonLayer = false;
	var _dataMap = [];

	var _geojson = false;
	var _renderPopup = true;
	var _brushOn = true;
	var _featureOptions = {
	'fillColor':'black',
	'color':'gray',
	'opacity':0.4,
	'fillOpacity':0.6,
	'weight':1
	};

	var _featureKey = function(feature) {
	return feature.key;
	};

	var _featureStyle = function(feature) {
	var options = _chart.featureOptions();
	if (options instanceof Function) {
	options=options(feature);
	}
	options = JSON.parse(JSON.stringify(options));
	var v = _dataMap[_chart.featureKeyAccessor()(feature)];
	if (v && v.d) {
	options.fillColor=_chart.getColor(v.d, v.i);
	if (_chart.filters().indexOf(v.d.key) !== -1) {
	options.opacity=0.8;
	options.fillOpacity=1;
	}
	}
	return options;
	};

	var _popup = function(d, feature) {
	return _chart.title()(d);
	};

	_chart._postRender = function() {
	_geojsonLayer=L.geoJson(_chart.geojson(), {
	style: _chart.featureStyle(),
	onEachFeature: processFeatures
	});
	_chart.map().addLayer(_geojsonLayer);
	};

	dc.override(_chart, '_doRedraw', function() {
	_geojsonLayer.clearLayers();
	_dataMap=[];
	_chart._computeOrderedGroups(_chart.data()).forEach(function (d, i) {
	_dataMap[_chart.keyAccessor()(d)] = {'d':d, 'i':i};
	});
	_geojsonLayer.addData(_chart.geojson());
	return _chart.__doRedraw();
	});

	_chart.geojson = function(_) {
	if (!arguments.length) {
	return _geojson;
	}
	_geojson = _;
	return _chart;
	};

	_chart.featureOptions = function(_) {
	if (!arguments.length) {
	return _featureOptions;
	}
	_featureOptions = _;
	return _chart;
	};

	_chart.featureKeyAccessor = function(_) {
	if (!arguments.length) {
	return _featureKey;
	}
	_featureKey= _;
	return _chart;
	};

	_chart.featureStyle = function(_) {
	if (!arguments.length) {
	return _featureStyle;
	}
	_featureStyle= _;
	return _chart;
	};

	_chart.popup = function(_) {
	if (!arguments.length) {
	return _popup;
	}
	_popup= _;
	return _chart;
	};

	_chart.renderPopup = function(_) {
	if (!arguments.length) {
	return _renderPopup;
	}
	_renderPopup = _;
	return _chart;
	};

	_chart.brushOn = function(_) {
	if (!arguments.length) {
	return _brushOn;
	}
	_brushOn = _;
	return _chart;
	};

	var processFeatures = function (feature, layer) {
	var v = _dataMap[_chart.featureKeyAccessor()(feature)];
	if (v && v.d) {
	layer.key=v.d.key;
	if (_chart.renderPopup())
	layer.bindPopup(_chart.popup()(v.d, feature));
	if (_chart.brushOn())
	layer.on("click", selectFilter);
	}
	};

	var selectFilter = function(e) {
	if (!e.target) {
	return;
	}
	var filter = e.target.key;
	dc.events.trigger(function () {
	_chart.filter(filter);
	dc.redrawAll(_chart.chartGroup());
	});
	};

	return _chart.anchor(parent, chartGroup);
	};

	dc_leaflet.bubbleChart = function (parent, chartGroup) {
	"use strict";

	/* ####################################
	* Private variables -- default values.
	* ####################################
	*/
	var _chart = dc_leaflet.leafletBase({});
	var _selectedColor = 'blue';
	var _unselectedColor = 'gray';
	var _layerGroup = false;

	var _location = function (d) {
	return _chart.keyAccessor()(d);
	};

	var _r = d3.scaleLinear().domain([0, 100]);
	var _brushOn = true;

	var _marker = function (d, map) {
	var loc = _chart.locationAccessor()(d);
	var locArray = _chart.toLocArray(loc);

	var latlng = L.latLng(+locArray[0], +locArray[1]);
	var circle = L.circleMarker(latlng);

	circle.setRadius(_chart.r()(_chart.valueAccessor()(d)));
	circle.on("mouseover", function (e) {
	// TODO - Tooltips!
	//console.log(_chart.title()(d));
	});
	var key = _chart.keyAccessor()(d);
	var isSelected = (-1 !== _chart.filters().indexOf(key));

	circle.options.color = isSelected ? _chart.selectedColor() : _chart.unselectedColor();

	return circle;
	};

	/* ########################
	* Private helper functions
	* ########################
	*/

	/* ################
	* Public interface
	* ################
	*/


	/**
	#### .r([bubbleRadiusScale])
	Get or set bubble radius scale. By default bubble chart uses ```d3.scaleLinear().domain([0, 100])``` as its r scale .

	**/
	_chart.r = function (_) {
	if (!arguments.length) return _r;
	_r = _;
	return _chart;
	};

	_chart.brushOn = function (_) {
	if (!arguments.length) {
	return _brushOn;
	}
	_brushOn = _;
	return _chart;
	};

	_chart.locationAccessor = function (_) {
	if (!arguments.length) {
	return _location;
	}
	_location = _;
	return _chart;
	};
	/**
	#### .selectedColor([color])
	Get or set the color of a selected (filter) bubble.
	*/
	_chart.selectedColor = function (_) {
	if (!arguments.length) {
	return _selectedColor;
	}
	_selectedColor = _;
	return _chart;
	};

	/**
	#### .unselectedColor([color])
	Get or set the color of a bubble which is not currently in the filter.

	*/
	_chart.unselectedColor = function (_) {
	if (!arguments.length) {
	return _unselectedColor;
	}
	_unselectedColor = _;
	return _chart;
	};

	var createmarker = function (v, k) {
	var marker = _chart.marker()(v, _chart.map());
	marker.key = k;
	if (_chart.brushOn()) {
	marker.on("click", selectFilter);
	}
	return marker;
	};

	_chart.marker = function (_) {
	if (!arguments.length) {
	return _marker;
	}
	_marker = _;
	return _chart;
	};

	/* Render and redraw overrides */
	_chart._postRender = function () {
	if (_chart.brushOn()) {

	_chart.map().on('click', function (e) {
	_chart.filter(null);
	_chart.redrawGroup();
	});
	}
	_chart.map().on('boxzoomend', boxzoomFilter, this);
	_layerGroup = new L.LayerGroup();
	_chart.map().addLayer(_layerGroup);
	};

	_chart._doRedraw = function () {
	var groups = _chart._computeOrderedGroups(_chart.data()).filter(function (d) {
	return _chart.valueAccessor()(d) !== 0;
	});
	_layerGroup.clearLayers();
	groups.forEach(function (v, i) {
	var key = _chart.keyAccessor()(v);
	var marker = null;

	marker = createmarker(v, key);
	_layerGroup.addLayer(marker);
	});
	};

	/* Callback functions */
	function boxzoomFilter(e) {
	var filters = [];

	_layerGroup.eachLayer(function (layer) {
	var latLng = layer.getLatLng();
	if (e.boxZoomBounds.contains(latLng)) {
	filters.push(layer.key);
	}
	});

	dc.events.trigger(function (e) {
	_chart.replaceFilter([filters]);
	_chart.redrawGroup();
	});
	}

	var selectFilter = function (e) {
	L.DomEvent.stopPropagation(e);
	var filter = e.target.key;
	if (e.originalEvent.ctrlKey \|\| e.originalEvent.metaKey) {
	// If ctrl/cmd key modifier was pressed on click, toggle the target
	_chart.filter(filter);
	}
	else {
	// If ctrl key wasn't pressed, clear selection and add target
	_chart.replaceFilter([[filter]]);
	}
	_chart.redrawGroup();
	};


	return _chart.anchor(parent, chartGroup);
	};

	dc_leaflet.d3 = d3;
	dc_leaflet.crossfilter = crossfilter;
	dc_leaflet.dc = dc;

	return dc_leaflet;
	}
	if (typeof define === 'function' && define.amd) {
	define(["dc"], _dc_leaflet);
	} else if (typeof module == "object" && module.exports) {
	var _dc = require('dc');
	module.exports = _dc_leaflet(_dc);
	} else {
	this.dc_leaflet = _dc_leaflet(dc);
	}
	}
	)();

	//# sourceMappingURL=dc.leaflet.js.map
	<!--<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>BMT-Ecology</title>
	<link rel="shortcut icon" href="https://bmt.cloud.databricks.com/media/bmt-favicon.24e70a2e.ico">

	<meta charset="UTF-8">

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

	<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.css" rel="stylesheet"/>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/marker-icon.png" />
	<link href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/images/marker-icon-2x.png" />
	<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"/>



	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<!--<script src="https://gist.github.com/xhinking/9341806.js"></script>-->
	<style>
	#monthly-volume-chart g.y {
	display: none;
	}
	#container{width:100%;}
	#left{float:left;width:20px;}
	#right{float:right;width:20px;}
	#center{margin:0 auto;width:800px;}
	#paging {
	text-align: right;
	}
	#data-table th span { /Glyphicon style/
	float: right;
	font-size: 1em;
	color: #0080bf;
	display: inline-block;
	}
	#dc-table-graph th {
	cursor: pointer;
	}
	.dc-chart g.row text {fill: black;}

	#holder>div {
	padding:30px 0;
	clear:both;
	}
	.map {
	width:600px;
	height:350px;
	}

	</style>
	</head>
	<body>
	<div id="container">
	<div id="left"></div>
	<div id="right">

	</div>
	<div id="center"></div>
	</div>
	<div class="container">
	<h2>Turtle Nesting Study Area</h2>
	<div class="row">
	<div id="demo1" align="center">
	<!--<strong>Average Values (Top 20)</strong>-->
	<a class="reset" href="javascript:marker.filterAll();dc.redrawAll();" style="display: none;">reset</a>
	<div class="map"></div>
	<div class="clearfix"></div>
	</div>
	</div>
	<div class="row">
	<div id="search-chart"></div>
	<!--<div style="clear:both;">-->
	<div id="year-chart" align="center">
	<strong>Year</strong>
	<a class="reset" href="javascript:yearChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	<div id="name-chart" align="center">
	<strong>Name</strong>
	<a class="reset" href="javascript:nameChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	<div id="descriptor-chart" align="center">
	<strong>Descriptor</strong>
	<a class="reset" href="javascript:descriptorChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	<div id="hectares-chart" align="center">
	<strong>Hectares by Location</strong>
	<a class="reset" href="javascript:hectaresChart.filterAll();dc.redrawAll();" style="display: none;">reset</a>

	<div class="clearfix"></div>
	</div>
	<div class="row">
	<div>
	<div class="dc-data-count" align="center">
	<span class="filter-count"></span> selected out of <span class="total-count"></span> records \| <a
	href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
	</div>
	</div>
	<table class="table table-hover dc-data-table">
	</table>
	</div>
	<div class="clearfix"></div>
	</div>
	</div>
	<!--<script type="text/javascript" src="js/d3.js"></script>-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.js"></script>
	<!--<script src="https://d3js.org/d3-time.v1.min.js"></script>
	<script src="https://d3js.org/d3-time-format.v2.min.js"></script>-->
	<!--<script type="text/javascript" src="js/crossfilter.js"></script>-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.js"></script>
	<!--<script type="text/javascript" src="js/dc.js"></script>-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/3.0.6/dc.js"></script>

	<!--<script type="text/javascript" src="js/d3.js"></script>-->
	<!--<script type="text/javascript" src="js/crossfilter.js"></script>-->
	<!--<script type="text/javascript" src="js/dc.js"></script>-->


	<!--<script type="text/javascript" src="../dc.leaflet.js-master/web/js/leaflet.js"></script>-->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.3.4/leaflet.js"></script>

	<!--<script src="../dc.leaflet.js-master/web/js/colorbrewer.js"></script>-->

	<!--<script type="text/javascript" src="../dc.leaflet.js-master/web/js/leaflet.markercluster.js"></script>-->
	<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="../dc.leaflet.js-master/web/js/dc.leaflet.js"></script>-->
	<script type="text/javascript" src="dc.leaflet.js"></script>

	<script type="text/javascript" src="turtleAreas.js"></script>

	</body>
	</html>
	//# dc.js Getting Started and How-To Guide
	'use strict';
	// dc.config.defaultColors(d3.schemeCategory10);

	dc.config.defaultColors(d3.schemePaired);
	// Note: It is often a good idea to have these objects accessible at the global scope so that they can be modified or
	// filtered by other page controls.
	var yearChart = dc.pieChart('#year-chart');
	var nameChart = dc.pieChart('#name-chart');
	var descriptorChart = dc.pieChart('#descriptor-chart');
	var hectaresChart = dc.barChart('#hectares-chart');
	var sampleCount = dc.dataCount('.dc-data-count');
	var samplesTable = dc.dataTable('.dc-data-table');

	var groupname = "marker-select";
	// var marker = dc_leaflet.markerChart("#demo1 .map",groupname);
	var marker = dc_leaflet.markerChart("#demo1 .map");
	var pie = dc.pieChart("#demo1 .pie",groupname);
	var searchChart = dc.textFilterWidget("#search-chart");

	d3.csv('finalResult1.csv').then(function (data) {
	var numberFormat = d3.format('.2f');
	data.forEach(function (d) {
	d.Year = +d.Year;
	// d.Lab_Detection_Limit = (d.Lab_Detection_Limit==="NAN")? 1e-9:+d.Lab_Detection_Limit;
	d.Hectares = +d.Hectares;
	d.geo = +d.Latitude+","+d.Longitude;
	});
	//### Create Crossfilter Dimensions and Groups
	var xf = crossfilter(data);
	var all = xf.groupAll();

	var searchDimension = xf.dimension(function (d) {
	return d.Year + ' ' + d.Name + ' ' + d.Descriptor + ' ' + d.Hectares;
	});

	// Create categorical dimension
	var nameDim = xf.dimension(function (d) {
	return d.Name;
	});
	// Produce counts records in the dimension
	var nameGroup = nameDim.group();

	var nameDescDim = xf.dimension(function (d) {
	return d.Name;
	});
	// var nameDescriptorGroup = nameDescDim.group().reduce(reduceAdd, reduceRemove, reduceInitial);
	// print_filter(nameDescDim);


	// Create categorical dimension
	var descriptor = xf.dimension(function (d) {
	return d.Descriptor;
	});
	// Produce counts records in the dimension
	var descriptorGroup = descriptor.group();


	var yearDim = xf.dimension(function (d) {
	return d.Year;
	});

	var yearGroup = yearDim.group();

	var location = xf.dimension(function(d) { return d.geo; });
	var locationGroup = location.group().reduceCount();

	nameChart /* dc.pieChart('#gain-loss-chart', 'chartGroup') */
	// (_optional_) define chart width, `default = 200`
	.width(250)
	// (optional) define chart height, `default = 200`
	.height(250)
	// Define pie radius
	.radius(100)
	// Set dimension
	.innerRadius(30)
	.dimension(nameDim)
	// Set group
	.group(nameGroup);


	descriptorChart /* dc.pieChart('#gain-loss-chart', 'chartGroup') */
	// (_optional_) define chart width, `default = 200`
	.width(250)
	// (optional) define chart height, `default = 200`
	.height(250)
	// Define pie radius
	.radius(100)
	// Set dimension
	.innerRadius(30)
	.dimension(descriptor)
	// Set group
	.group(descriptorGroup);

	yearChart /* dc.pieChart('#quarter-chart', 'chartGroup') */
	.width(250)
	.height(250)
	.radius(100)
	.innerRadius(30)
	.dimension(yearDim)
	.group(yearGroup)
	.render();



	var nameDimension = xf.dimension(function(d) {return d.Name;});
	var hectaresGroup = nameDimension.group().reduce(function (p, v) {
	p[v.Descriptor] = (p[v.Descriptor] \|\| 0) + v.Hectares;
	return p;
	}, function(p, v) {
	p[v.Descriptor] = (p[v.Descriptor] \|\| 0) - v.Hectares;
	return p;
	}, function() {
	return {};
	});
	function sel_stack(i) {
	return function(d) {
	return d.value[i];
	};
	}
	var desc = ['Optimal', 'Sub-optimal', 'Unsuitable'];
	hectaresChart
	.width(768)
	.height(480)
	.x(d3.scaleBand())
	.xUnits(dc.units.ordinal)
	.margins({left: 80, top: 20, right: 10, bottom: 20})
	.brushOn(false)
	.clipPadding(10)
	.title(function(d) {
	console.log(this);
	return d.key + '[' + this.layer + ']: ' + d.value[this.layer];
	})
	.dimension(nameDimension)
	.group(hectaresGroup, desc[0], sel_stack(desc[0]))
	.renderLabel(true);
	hectaresChart.legend(dc.legend());
	dc.override(hectaresChart, 'legendables', function() {
	var items = hectaresChart._legendables();
	return items.reverse();
	});

	for(var i = 1; i<desc.length; ++i)
	hectaresChart.stack(hectaresGroup, desc[i], sel_stack(desc[i]));
	hectaresChart.render();

	sampleCount /* dc.dataCount('.dc-data-count', 'chartGroup'); */
	.dimension(xf)
	.group(all)
	// (_optional_) `.html` sets different html when some records or all records are selected.
	// `.html` replaces everything in the anchor with the html given using the following function.
	// `%filter-count` and `%total-count` are replaced with the values obtained.
	.html({
	some: '<strong>%filter-count</strong> selected out of <strong>%total-count</strong> records' +
	' \| <a href=\'javascript:dc.filterAll(); dc.renderAll();\'>Reset All</a>',
	all: 'All records:<strong>%total-count</strong>'
	});


	samplesTable /* dc.dataTable('.dc-data-table', 'chartGroup') */
	.dimension(yearDim)
	// (_optional_) max number of records to be shown, `default = 25`
	.group(function () {
	return 'Parameters';
	})
	.size(50)
	.columns([
	'Year',
	'Name',
	'Descriptor',
	'Hectares'
	])
	// (optional) sort using the given field, :default = function(d){return d;}
	.sortBy(function(d){ return -d.Value; })
	// (optional) sort order, :default ascending
	// .order(d3.descending())
	;

	searchChart.dimension(searchDimension);

	marker.dimension(location)
	.group(locationGroup)
	.width(1200)
	.height(300)
	.center([-20.79647816005, 115.457927070833])
	.zoom(12)
	// .cluster(true);
	.renderPopup(false)
	.filterByArea(true);
	//#### Rendering

	//simply call `.renderAll()` to render all charts on the page
	// dc.renderAll();




	dc.renderAll();

	});

	//#### Versions

	//Determine the current version of dc with `dc.version`
	d3.selectAll('#version').text(dc.version);

	// Determine latest stable version in the repo via Github API
	d3.json('https://api.github.com/repos/dc-js/dc.js/releases/latest').then(function (latestRelease) {
	/jshint camelcase: false /
	/* jscs:disable */
	d3.selectAll('#latest').text(latestRelease.tag_name);
	});