2d:null 2e:["$","title",null,{"children":"H2 versão 3 | Sayonara | Observable"}] 33:T1231,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) }) }34:[] 31:{"id":"f187f57e56bed1c7","slug":"h2-versao-3","title":"H2 versão 3","thumbnail":"f17f4a433e338065597a12671c11618e0311f07053d1b5057d6f3df325637605","access_level":"public","create_time":"$D2019-11-23T08:26:51.137Z","update_time":"$D2019-11-23T19:24:38.711Z","view_time":null,"first_public_time":"$D2019-11-23T19:10:13.710Z","fork":{"id":"d5c30af304fe5936","slug":"h2","title":"H2 versão 1","owner":{"id":"7a6fe25356936255","login":"sayonarasantos","name":"Sayonara"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a6fe25356936255","login":"sayonarasantos","name":"Sayonara","avatar_url":"https://avatars-next.observableusercontent.com/367401073cb167749ab94d9bf5d368c0a410ff82395caa77baae0a4138ba2040","tier":"starter_2024"},"version":644,"publish_version":644,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bfbc482195215b","login":"sayonarasantos","name":"Sayonara","avatar_url":"https://avatars-next.observableusercontent.com/367401073cb167749ab94d9bf5d368c0a410ff82395caa77baae0a4138ba2040","tier":null}],"members":[{"type":"individual","id":"92bfbc482195215b","login":"sayonarasantos","name":"Sayonara","avatar_url":"https://avatars-next.observableusercontent.com/367401073cb167749ab94d9bf5d368c0a410ff82395caa77baae0a4138ba2040","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"H2 versão 3","cells":[{"id":0,"value":"md`# H2 versão 3`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"html`css \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"dataset = d3.csv(\"https://raw.githubusercontent.com/lailson93/datavis-course/master/projet/bolsas_brasil.csv\").then(function(data){\n data.forEach(function(d,i){\n d.total_linhas = +d['Total Linha']\n d.Ano = +d.Ano\n })\n return data\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":228,"value":"facts = crossfilter(dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"ufDimension = facts.dimension( d => d['UF'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"// sumByUF = ufDimension.group().reduceSum((d) => d['Total Linha'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"// sumByUF.top(1)[0].value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"// sumByUF.top(sumByUF.size())[sumByUF.size()-1].value //bottom","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"// ufDimension.bottom(1)[0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"// sumByUF.all()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"// sumByUF.all()[1].value","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"buildvis = {\n \n let view = md`${container()}`\n \n return view\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"html`\n

\n \n

\n\n

\n `","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"map = {\n buildvis;\n let mapInstance = L.map('mapid').setView([-14.82,-55.11], 4)\n L.tileLayer(\"https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png\", {\n attribution: `© OpenStreetMap,\n Map tiles by © CARTO`,\n maxZoom: 18\n }).addTo(mapInstance)\n return mapInstance\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"// geojson = {\n// function highlightFeature(e) {\n// \t\tlet layer = e.target;\n// //console.log(e.target)\n\n// \t\tlayer.setStyle({\n// \t\t\t\t\tweight: 2,\n// \t\t\t\t\tcolor: '#AAA',\n// \t\t\t\t\tdashArray: '',\n// \t\t\t\t\tfillOpacity: 0.7\n// \t\t});\n\n// \t\tif (!L.Browser.ie && !L.Browser.opera) {\n// \t\t\tlayer.bringToFront();\n// \t\t}\n\n// \t\tinfo.update(layer.feature);\n// \t}\n// \tlet geoj;\n\n// \tfunction resetHighlight(e) {\n// \t\tgeoj.resetStyle(e.target);\n// \t\tinfo.update();\n// \t}\n\n// \tfunction zoomToFeature(e) {\n// \t\tmap.fitBounds(e.target.getBounds());\n// \t}\n\n// \tfunction onEachFeature(feature, layer) {\n// \t\tlayer.on({\n// \t\t\t\t\tmouseover: highlightFeature,\n// \t\t\t\t\tmouseout: resetHighlight,\n// \t\t\t\t\tclick: zoomToFeature\n// \t\t\t\t});\n// \t}\n// geoj = L.geoJson(bairros, {\n// \t\t\t\tstyle: style,\n// \t\t\t\tonEachFeature: onEachFeature\n// \t\t}).addTo(map)\n// return geoj;\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"// legend = {\n// let legendControl = L.control({position: 'bottomright'});\n\n// \tlegendControl.onAdd = function (map) {\n\n// \t\tlet div = L.DomUtil.create('div', 'info legend'),\n// \t\t\tlabels = [],\n// n = blues.length,\n// \t\t\tfrom, to;\n\n// \t\tfor (let i = 0; i < n; i++) {\n// \t\t\tlet c = blues[i]\n// let fromto = colorScale.invertExtent(c);\n// \t\t\tlabels.push(\n// \t\t\t\t' ' +\n// \t\t\t\td3.format(\"d\")(fromto[0]) + (d3.format(\"d\")(fromto[1]) ? '–' + d3.format(\"d\")(fromto[1]) : '+'));\n// \t\t}\n\n// \t\tdiv.innerHTML = labels.join('
')\n// \t\treturn div\n// \t}\n\n// \tlegendControl.addTo(map)\n// return legendControl\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"function container() { \n return `\n

Homicídios em Fortaleza em 2012

\n

\n

\n
\n

\n \n

\n Ano: 1995\n

Dados retirados do site da SSPDS

\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"blue = d3.schemeOrRd[9]\n// schemeReds schemeRdBu schemePuBuGn","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":629,"value":"test = d3.schemeBlues[9]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"blues = [\"#ffffff\", \"#bddeff\", \"#8fc7ff\", \"#5cadff\", \"#3d9eff\", \"#1a8cff\", \"#0075eb\", \"#0066cc\", \"#0059b3\", \"#004a94\", \"#003b75\", \"#00264d\"] ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// colorScale = d3.scaleQuantize()\n// .domain([sumByUF.top(sumByUF.size())[sumByUF.size()-1].value, sumByUF.top(1)[0].value])\n// .range(blues)\n\n // .domain([sumByUF.top(sumByUF.size())[sumByUF.size()-1].value, sumByUF.top(1)[0].value])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"function zoomToFeature(e) {\n\t\tmap.fitBounds(e.target.getBounds())\n\t}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"// info = {\n// // control that shows state info on hover\n// \tlet infoControl = L.control()\n\n// \tinfoControl.onAdd = function (map) {\n// \t\tthis._div = L.DomUtil.create('div', 'info');\n// \t\tthis.update();\n// \t\treturn this._div;\n// \t}\n\n// \tinfoControl.update = function (feat) {\n// \t\t\tthis._div.innerHTML = '

Homicídios a cada
100 mil habitantes

' + (feat ?\n// \t\t\t\t'' + feat.properties.UF_05 + '
' + homicidesByName2.get(feat.properties.UF_05) +\n// '
(Total:' + homicidesByName2.get(feat.properties.UF_05) + ')'\n// \t\t\t\t: 'Passe o mouse sobre um bairro');\n// \t}\n\n// \tinfoControl.addTo(map);\n// return infoControl\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"// homicidesByName4 = {\n// let popMap = d3.map()\n// sumByUF.all().forEach(function(d, i) {\n// popMap.set(sumByUF.all()[i].key, sumByUF.all()[i].value)\n// })\n// return popMap\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"// function style(feature) {\n// \t\t return {\n// \t\t\t\t\tweight: 1,\n// \t\t\t\t\topacity: 1,\n// \t\t\t\t\tcolor: 'white',\n// \t\t\t\t\tdashArray: '3',\n// \t\t\t\t\tfillOpacity: 0.6,\n// \t\t\t\t\tfillColor: colorScale(homicidesByName2.get(feature.properties.UF_05))\n// \t\t\t\t};\n// \t}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"// bairros = d3.json(\"https://raw.githubusercontent.com/wakkoedu/kml-brasil/master/lib/2010/pais/geojson/Brasil_Estados.geojson\")\nbairros = d3.json(\"https://raw.githubusercontent.com/fititnt/gis-dataset-brasil/master/uf/geojson/uf.json\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"html`Esta célula contém os estilos da Visualização\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"crossfilter = require('crossfilter2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"$$ = require('jquery').then(jquery => {\n window.jquery = jquery;\n return require('popper@1.0.1/index.js').catch(() => jquery);\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"L = require('leaflet@1.5.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"

Homicídios a cada100 mil habitantes

Homicídios a cada100 mil habitantes

Homicídios em Fortaleza em 2012

Homicídios a cada100 mil habitantes

Homicídios a cada
100 mil habitantes

Homicídios a cada
100 mil habitantes

Homicídios a cada
100 mil habitantes