31:[] 2f:{"title":"Homicídios em Fortaleza em 2012","cells":[{"id":0,"value":"md`# Homicídios em Fortaleza em 2012`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md`Esse notebook é mais sofisticado que o exemplo anterior. Além de mostrar também um mapa leaflet, é construída uma legenda para o mapa.\n\n## Melhore o mapa de crimes de Fortaleza\n\nO mapa de crimes de Fortaleza possui alguns problemas. Um desses problemas é que os dados não levam em consideração a população do bairro, normalmente a taxa de homicídios é mostrada em número de homicídios por 100000 habitantes. \n\nUse [esse arquivo](https://gist.githubusercontent.com/emanueles/f573f50bbc3376cae35c0ea1fc1c5509/raw/7aa5c77edd48978315956430a12bb048dab2757b/fortaleza_crimes_homicidios.csv) que contém a população de cada bairro para calcular a taxa de homicídios por habitante.\n\nTambém faça melhorias na visualização com relação ao mapa de cores utilizado. Experimente usando mais bins na escala para enfatizar as diferenças entre os bairros que ficaram no primeiro nível de cor.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"html`css \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"buildvis = {\n let view = md`${container()}`\n \n return view\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"map = {\n buildvis;\n let mapInstance = L.map('mapid').setView([-3.792614,-38.515877], 12)\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"},{"id":65,"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"},{"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"},{"id":5,"value":"function container() { \n return `\n

Homicídios em Fortaleza em 2012

Dados retirados do site da SSPDS

\n `\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"blues = d3.schemeBlues[5]","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"colorScale = d3.scaleQuantize()\n .domain([0, 70])\n .range(blues)","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"function zoomToFeature(e) {\n\t\tmap.fitBounds(e.target.getBounds())\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"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 = '

Número de homicídios

' + (feat ?\n\t\t\t\t'' + feat.properties.NOME + '
' + homicidesByName.get(feat.properties.NOME) + ' homicídios'\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"},{"id":39,"value":"homicidesByName = d3.csv(\"https://gist.githubusercontent.com/emanueles/bae10fc42b13886b5a00b79737f2b50d/raw/ffb35abe6d9ba0c4ce4866b827f1916748ab65ef/homicidios_2012.csv\").then(function(data) {\n let bairrosMap = new Map()\n data.forEach(function(d) {\n bairrosMap.set(d.Bairro,+d.Homicidios)\n })\n return bairrosMap\n })","pinned":true,"hidden":false,"mode":"ojs"},{"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(homicidesByName.get(feature.properties.NOME))\n\t\t\t\t};\n\t}","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"bairros = d3.json(\"https://gist.githubusercontent.com/emanueles/f43681762385f250d533eabb35da6dac/raw/4d4541e92fb9ce69e692a7a3c291a4a538ae6b6a/FortalezaBairros.geojson\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"html`Esta célula contém os estilos da Visualização\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":10,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"L = require('leaflet@1.6.0')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}