interativeMap = { // Quantidade bolsas por unidade federativa var sumByYear_UF = ufDimension.group().reduceSum((d) => d['Ano'] == 2018 ? d['Total Linha']:0) // Formatação para este modo de mapeamento var sumByYear_Mapped = d3.map() sumByYear_UF.all().forEach(function(d, i) { sumByYear_Mapped.set(sumByYear_UF.all()[i].key, sumByYear_UF.all()[i].value) }) var colorScale = d3.scaleQuantize() .domain([0, 25000]) //Valor máximo de bolsas atingido por um estado até 2018 .range(blues) function style(feature) { return { weight: 1, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.6, fillColor: colorScale(sumByYear_Mapped.get(feature.properties.UF_05)) }; } // -----------------info----------------- // control that shows state info on hover var info = L.control() info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; } info.update = function (feat) { this._div.innerHTML = '

Bolsas de 2018

' + (feat ? '' + feat.properties.UF_05 + '
' + sumByYear_Mapped.get(feat.properties.UF_05) : 'Passe o mouse sobre as unidade federativas'); } info.addTo(map); // -----------------info-----------------END // -----------------geojson----------------- function highlightFeature(e) { let layer = e.target; //console.log(e.target) layer.setStyle({ weight: 2, color: '#AAA', dashArray: '', fillOpacity: 0.7 }); if (!L.Browser.ie && !L.Browser.opera) { layer.bringToFront(); } info.update(layer.feature); } var geojson; function resetHighlight(e) { geojson.resetStyle(e.target); info.update(); } function zoomToFeature(e) { map.fitBounds(e.target.getBounds()); } function onEachFeature(feature, layer) { layer.on({ mouseover: highlightFeature, mouseout: resetHighlight, click: zoomToFeature }); } geojson = L.geoJson(ufs, { style: style, onEachFeature: onEachFeature }).addTo(map) // -----------------geojson-----------------END // -----------------legend----------------- var legend = L.control({position: 'bottomright'}); legend.onAdd = function (map) { let div = L.DomUtil.create('div', 'info legend'), labels = [], n = blues.length, from, to; for (let i = 0; i < n; i++) { let c = blues[i] let fromto = colorScale.invertExtent(c); labels.push( ' ' + d3.format("d")(fromto[0]) + (d3.format("d")(fromto[1]) ? '–' + d3.format("d")(fromto[1]) : '+')); } div.innerHTML = labels.join('
') return div } legend.addTo(map) // -----------------legend-----------------END // -----------------Button----------------- var years = [] for (let i=2018;i>=1995;i--) {years.push(i);} var dropdownButton = d3.select("#dataviz_builtWithD3") .append('select') dropdownButton // Add a button .selectAll('myOptions') .data(years) .enter() .append('option') .text(function (d) { return d; }) // text showed in the menu .attr("value", function (d) { return d; }) // -----------------Buttom-----------------END // -----------------Update----------------- function updateYear(ano) { // sumByUFYear = ufDimension.group().reduceSum((d) => d['Total Linha']) sumByYear_UF = ufDimension.group().reduceSum((d) => d['Ano'] == ano ? d['Total Linha']:0) sumByYear_Mapped = d3.map() sumByYear_UF.all().forEach(function(d, i) { sumByYear_Mapped.set(sumByYear_UF.all()[i].key, sumByYear_UF.all()[i].value) }) // info = L.control() info.onAdd = function (map) { this._div = L.DomUtil.create('div', 'info'); this.update(); return this._div; } // info.addTo(map); info.update = function (feat) { this._div.innerHTML = '

Bolsas de '+ ano + '

' + (feat ? '' + feat.properties.UF_05 + '
' + sumByYear_Mapped.get(feat.properties.UF_05) : 'Passe o mouse sobre as unidade federativas'); } // info.update = function (feat) { // this._div.innerHTML = '

Bolsas de '+ ano + '

' + (feat ? // '' + feat.properties.UF_05 + '
' + sumByYear_Mapped.get(feat.properties.UF_05) : 'Passe o mouse sobre as unidade federativas'); // } geojson = L.geoJson(ufs, { style: style, onEachFeature: onEachFeature }).addTo(map) legend.onAdd = function (map) { let div = L.DomUtil.create('div', 'info legend'), labels = [], n = blues.length, from, to; for (let i = 0; i < n; i++) { let c = blues[i] let fromto = colorScale.invertExtent(c); labels.push( ' ' + d3.format("d")(fromto[0]) + (d3.format("d")(fromto[1]) ? '–' + d3.format("d")(fromto[1]) : '+')); } div.innerHTML = labels.join('
') return div } legend.addTo(map) } // -----------------Update-----------------END dropdownButton.on("change", function(d) { var selectedOption = d3.select(this).property("value") updateYear(selectedOption) }) }