Last active
September 23, 2015 20:32
-
-
Save KatiRG/d3d7e757cb225bc38d9a to your computer and use it in GitHub Desktop.
dc-leaflet legend feature (creates a static legend based on range of the data)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function drawChoropleth(data,geojson) { | |
| choroChart = dc.leafletChoroplethChart("#choro-map .map") | |
| .dimension(regionDimension) | |
| .group(avgRegionGroup) | |
| .valueAccessor(function(p) { return p.value.average; }) | |
| .width(800) | |
| .height(400) | |
| .center([47.00, 2.00]) | |
| .zoom(5) | |
| .geojson(geojson) | |
| .colors(colorbrewer.YlGn[9]) //the colorbrewer palette of your choice | |
| .colorAccessor(function(d,i) { return d.value.average; }) | |
| .featureKeyAccessor(function(feature) { | |
| return feature.properties.name; | |
| }) | |
| .renderPopup(true) | |
| .popup(function(d,feature) { | |
| return feature.properties.name+" : "+d.value.average; | |
| }); | |
| choroChart.on("preRender", function(chart) { | |
| chart.colorDomain(d3.extent(chart.group().all(), chart.valueAccessor())); | |
| }); | |
| choroChart.on("preRedraw", function(chart) { | |
| //get eventRange upon page load before any charts have been clicked | |
| if (indexChart.filters().length == 0 && categoryChart.filters().length == 0 | |
| && datasetChart.filters().length == 0 && stackedYearChart.filters().length == 0 | |
| && seasonsChart.filters().length == 0) | |
| { | |
| eventRange = d3.extent(chart.group().all(), chart.valueAccessor()); | |
| eventRange[0] = 0; //make min always 0 | |
| chart.colorDomain(eventRange); | |
| } | |
| }); | |
| } | |
| //dc-leaflet.js: | |
| var _legend = L.control({position: 'bottomleft'}); | |
| var eventRange; | |
| var numCharts = 0; | |
| _legend.onAdd = function (map) { | |
| this._div = L.DomUtil.create('div', 'info legend'); | |
| this.update(); | |
| return this._div; | |
| }; | |
| _legend.update = function () { | |
| //**Dirty hack** Display legend only when all 6 dc charts are cycled through | |
| numCharts++; | |
| if (numCharts == 6) { | |
| minValue = choroChart.colorDomain()[0]; | |
| maxValue = choroChart.colorDomain()[1]; | |
| colorLength = choroChart.colors().range().length; | |
| delta = (maxValue - minValue)/colorLength; | |
| palette = choroChart.colors().range(); | |
| //define grades for legend colours | |
| //use equation defined in dc.js colorCalculator fn | |
| grades = []; | |
| grades[0] = minValue; | |
| for (var i= 1; i < colorLength; i++) { | |
| grades[i] = Math.round((0.5 + (i - 1)) * delta + minValue); | |
| } | |
| var div = L.DomUtil.create('div', 'info legend'), | |
| labels = []; | |
| // loop through our density intervals and generate a label with a colored square for each interval | |
| for (var i = 0; i < grades.length; i++) { | |
| this._div.innerHTML += | |
| '<i style="background:' + palette[i] + '"></i> ' + | |
| grades[i] + (grades[i + 1] ? '–' + grades[i + 1] + '<br>' : '+'); | |
| } | |
| } | |
| }; | |
| _chart.doRender = function() { | |
| _map = L.map(_chart.root().node(),_mapOptions); | |
| if (_defaultCenter && _defaultZoom) | |
| _map.setView(_chart.toLocArray(_defaultCenter), _defaultZoom); | |
| _chart.tiles()(_map); | |
| _chart.info().addTo(_map); | |
| _chart.legend().addTo(_map); | |
| _chart._postRender(); | |
| return _chart.doRedraw(); | |
| } | |
| _chart.legend = function(_) { | |
| if (!arguments.length) return _legend; | |
| _legend = _; | |
| return _chart; | |
| } | |
| dc.leafletChoroplethChart = function(parent, chartGroup) { | |
| ... | |
| _chart.doRedraw = function() { | |
| _geojsonLayer.clearLayers(); | |
| _dataMap=[]; | |
| _chart.computeOrderedGroups().forEach(function (d,i) { | |
| _dataMap[_chart.keyAccessor()(d)] = {'d':d,'i':i}; | |
| }); | |
| _geojsonLayer.addData(_chart.geojson()); | |
| _chart.legend().update(); | |
| } | |
| ... | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment