oi = { var sumByUFYear = ufDimension.group().reduceSum((d) => d['Ano'] == 2018 ? d['Total Linha']:0) var homicidesByName2 = d3.map() sumByUFYear.all().forEach(function(d, i) { homicidesByName2.set(sumByUFYear.all()[i].key, sumByUFYear.all()[i].value) }) var colorScale = d3.scaleQuantize() .domain([0, 50000]) .range(blues) function style(feature) { return { weight: 1, opacity: 1, color: 'white', dashArray: '3', fillOpacity: 0.6, fillColor: colorScale(homicidesByName2.get(feature.properties.UF_05)) }; } // info inicio // 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 = '

Homicídios a cada
100 mil habitantes

' + (feat ? '' + feat.properties.UF_05 + '
' + homicidesByName2.get(feat.properties.UF_05) + '
(Total:' + homicidesByName2.get(feat.properties.UF_05) + ')' : 'Passe o mouse sobre um bairro'); } info.addTo(map); // info fim //geojson inicio 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(bairros, { style: style, onEachFeature: onEachFeature }).addTo(map) //geojson fim // legend inicio 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 fim var allGroup = [2018, 2017, 1995, 'total'] var dropdownButton = d3.select("#dataviz_builtWithD3") .append('select') dropdownButton // Add a button .selectAll('myOptions') // Next 4 lines add 6 options = 6 colors .data(allGroup) .enter() .append('option') .text(function (d) { return d; }) // text showed in the menu .attr("value", function (d) { return d; }) function atualizar(ano) { // sumByUFYear = ufDimension.group().reduceSum((d) => d['Total Linha']) sumByUFYear = ufDimension.group().reduceSum((d) => d['Ano'] == ano ? d['Total Linha']:0) homicidesByName2 = d3.map() sumByUFYear.all().forEach(function(d, i) { homicidesByName2.set(sumByUFYear.all()[i].key, sumByUFYear.all()[i].value) }) 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 = '

Homicídios a cada
100 mil habitantes

' + (feat ? '' + feat.properties.UF_05 + '
' + homicidesByName2.get(feat.properties.UF_05) + '
(Total:' + homicidesByName2.get(feat.properties.UF_05) + ')' : 'Passe o mouse sobre um bairro'); } geojson = L.geoJson(bairros, { 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) } dropdownButton.on("change", function(d) { var selectedOption = d3.select(this).property("value") atualizar(selectedOption) }) }

Homicídios a cada100 mil habitantes

Homicídios a cada100 mil habitantes

Homicídios a cada
100 mil habitantes

Homicídios a cada
100 mil habitantes