4d:I[132969,["$2"],"IconMark"] 43:["$","title",null,{"children":"Visualização de Crimes em Chicago | Dhannyell Lukas | Observable"}] 4b:Ta07,builview = { try{ dc.deregisterAllCharts() const homicideDimension = facts.dimension(d => d['Primary Type']) const homicideCountGroup = homicideDimension.group(); const homicideXScale = d3 .scaleOrdinal() .domain(["BURGLARY", "HOMICIDE", "ROBBERY"]) function updateMap(type) { if(filter.indexOf(type) >=0) filter = filter.filter(d => d != type) else filter.push(type); mapCircles() } const homicideChart = dc.barChart(view.querySelector("#bar-chart")) homicideChart .width(460) .height(200) .dimension(homicideDimension) .xUnits(dc.units.ordinal) .margins({top: 10, right: 10, bottom: 50, left: 30}) .x(homicideXScale) .colors(colorScale) .colorAccessor(d => d.key) .gap(50) .renderHorizontalGridLines(true) .group(homicideCountGroup, 'Contagem dos tipos de crimes') homicideChart.on('filtered.monitor', (_,type) => updateMap(type)) const dateDimension = facts.dimension(d => [d["Primary Type"], d3.timeDay(d.date)]); const dateCountGroup = dateDimension.group().reduceSum(_ => 1); const dateSeriesChart = new dc.SeriesChart(view.querySelector("#time-chart")); dateSeriesChart .width(460) .height(250) .chart(function(c) { return new dc.LineChart(c); }) .x(dateXScale) .margins({top:10, right:10, bottom: 50, left: 30}) .brushOn(false) .yAxisLabel("Número de Crimes") .xAxisLabel("Time") .clipPadding(10) .elasticY(true) .dimension(dateDimension) .group(dateCountGroup) .seriesAccessor(function(d) {return d.key[0];}) .keyAccessor(function(d) {return d.key[1];}) .valueAccessor(function(d) {return +d.value;}) .colors(colorScale) .colorAccessor(d => d.key[0]) dateSeriesChart.xAxis().ticks(4) let filter = []; function mapCircles(){ circlesLayer.clearLayers() dataset.forEach( function(d) { if(filter.length == 0 || filter.indexOf(d['Primary Type']) >= 0){ let circle = L.circle([+d.Latitude, +d.Longitude], 10, { color: colorScale(d['Primary Type']), weight: 2, opacity: 0.7 }) circlesLayer.addLayer(circle) circle.bindPopup(` Crime: ${d['Primary Type']}
Time: ${d.date} `) } }) } dc.renderAll() mapCircles(); return view; }catch(e) { console.log(e); } }4c:[{"id":"92ab5b731657be7d18d2621d5d2027b625fb733693e367d80b3656efdf6da6d32903a71f928d25ddb4b06edb07b4dd6e6eb7a8a72fe68215a49f1654c35957d0","href":"https://static.observableusercontent.com/files/92ab5b731657be7d18d2621d5d2027b625fb733693e367d80b3656efdf6da6d32903a71f928d25ddb4b06edb07b4dd6e6eb7a8a72fe68215a49f1654c35957d0","name":"Screen Shot 2020-05-21 at 9.30.46 AM.png","type":"image/png","lastModified":1612993250616.606,"size":738658}] 47:{"id":"1f0b5119bba8e8a9","slug":"visualizacao-de-crimes-em-chicago","title":"Visualização de Crimes em Chicago","thumbnail":"8e7903dbf3aabee11a18050236acb9be30f41c7388d64a9b4fc31e72f97851c6","access_level":"public","create_time":"$D2021-02-10T21:40:50.616Z","update_time":"$D2021-02-11T00:28:45.613Z","view_time":null,"first_public_time":"$D2021-02-11T00:29:12.505Z","has_unpublished_edits":null,"fork":{"id":"d9815e1cbe4a0b2f","slug":"visualizacao-de-crimes-em-chicago","title":"Visualização de Crimes em Chicago","owner":{"id":"d94d0ab1065acef4","login":"emanueles","name":"Emanuele Santos"}},"stars":0,"starred":false,"owner":{"type":"team","id":"00c7587517786dc7","login":"dhannyell","name":"Dhannyell Lukas","avatar_url":"https://avatars-next.observableusercontent.com/c38b84163a78bf578b07e1c3eb323e8126e2a8cb8d60b1eda66acfe4bd2dd1b4","tier":"starter_2024","bio":"I'm a Computer Engineering Student and\r\nEnthusiast of indie games.","followed_by_you":false,"follows_you":false},"version":176,"publish_version":176,"role":null,"authored":false,"authors":[{"type":"individual","id":"df7fa2740d679be4","login":"dhannyell","name":"Dhannyell Lukas","avatar_url":"https://avatars-next.observableusercontent.com/c38b84163a78bf578b07e1c3eb323e8126e2a8cb8d60b1eda66acfe4bd2dd1b4","tier":null,"bio":"I'm a Computer Engineering Student and\r\nEnthusiast of indie games.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"df7fa2740d679be4","login":"dhannyell","name":"Dhannyell Lukas","avatar_url":"https://avatars-next.observableusercontent.com/c38b84163a78bf578b07e1c3eb323e8126e2a8cb8d60b1eda66acfe4bd2dd1b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualização de Crimes em Chicago","cells":[{"id":37,"value":"md`# Visualização de Crimes em Chicago\n\n**Usando D3 com Crossfilter, DC.js e Leaflet.**\n\nO arquivo disponível nesse [link](https://gist.githubusercontent.com/emanueles/108e0bd5993d5b9ddcddad49387cb2ea/raw/90de2bbea703504c94179fd63140e50e888ed862/chicago_crimes_april_2020.csv) possui os crimes (HOMICIDE, BURGLARY e ROBBERY) que ocorreram em [Chicago](https://data.cityofchicago.org/Public-Safety/Crimes-2020/qzdf-xmn8) durante o mês de Abril de 2020.\n\nFaça um fork desse notebook e visualize os crimes no mapa. Use uma cor diferente para cada tipo de crime.\n\nCrie um gráfico de barras para mostrar os totais de crimes para cada tipo de crime e um gráfico de linhas (uma linha para cada tipo de crime) mostrando crimes por dia, usando o [dc.seriesChart](https://dc-js.github.io/dc.js/docs/html/dc.seriesChart.html). Veja esse [exemplo](http://dc-js.github.io/dc.js/examples/series.html) como base e as dicas mais abaixo neste notebook.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"\ndataset = d3.csv('https://gist.githubusercontent.com/emanueles/108e0bd5993d5b9ddcddad49387cb2ea/raw/90de2bbea703504c94179fd63140e50e888ed862/chicago_crimes_april_2020.csv').then(data=> {\n const dateParser = d3.timeParse(\"%m/%d/%Y %H:%M:%S\")\n return data.map(d => ({\n ...d,\n date: dateParser(d3.utcParse(d.Date.slice(0,-3)))\n }))\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"view = {return md`${container()}`}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"facts = crossfilter(dataset);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"circlesLayer = L.layerGroup().addTo(map)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"dateXScale = d3.scaleTime().domain([d3.min(dataset, d=> d3.timeDay(d.date)), d3.max(dataset, d=>d3.timeDay(d.date))])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"colorScale = d3.scaleOrdinal().domain([\"HOMICIDE\", \"ROBBERY\", \"BURGLARY\"]).range([\"#ca0020\", \"#0571b0\", \"#fdae61\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"md`\n**Dicas**:\n\n** Bar chart com scala de cores**\n\nPara criar uma escala de cores:\n\n\\`\\`\\`javascript\n\n colorScale = d3.scaleOrdinal()\n .domain([\"HOMICIDE\", \"ROBBERY\", \"BURGLARY\"])\n .range([\"#ca0020\", \"#0571b0\", \"#fdae61\"])\n\n\n\\`\\`\\`\n\nPara criar um bar chart com cores diferentes, use os métodos .colors() e .colorAccessor():\n\n\\`\\`\\`javascript\n barChart.colors(colorScale)\n .colorAccessor(d => d.key)\n\\`\\`\\`\n\n** Mapa em escala de cinza**\n\nPara usar um mapa em escala de cinza, use a url: \n\n\\`\\`\\`\n https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png\n\\`\\`\\`\n\nCom a seguinte attribution:\n\n\\`\\`\\`javascript\n \"Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL.\"\n\n\\`\\`\\`\n\n**Lembre-se de publicar o seu notebook ao concluir a visualização.**\n\nAbaixo está um exemplo da Visualização final.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"html`

${Object.assign(await FileAttachment(\"Screen Shot 2020-05-21 at 9.30.46 AM.png\").image(), { alt: 'Exemplo de Visualização de Crimes em Chicago', style: 'width: 100%; max-width: 800px;' })}`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"function container() {\n return `\n

Crimes in Chicago in April of 2020

Number of Crimes by Type

\n \n

Number of Crimes by Day

Crime data via Chicago Data Portal.

\n `;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`css \n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"map = {\n view;\n let mapInstance = L.map('mapid').setView([41.881832, -87.623177], 10)\n L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {\n attribution: 'Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL.',\n maxZoom: 17\n }).addTo(mapInstance)\n return mapInstance\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"L = require(\"leaflet@1.6.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"crossfilter = require('crossfilter2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"dc = require('dc')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$$ = require('jquery').then(jquery => {\n window.jquery = jquery;\n return require('popper@1.0.1/index.js').catch(() => jquery);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 42:null 39:[["$","title","0",{"children":"Visualização de Crimes em Chicago | Dhannyell Lukas | Observable"}],["$","meta","1",{"property":"og:title","content":"Visualização de Crimes em Chicago"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Dhannyell Lukas"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/@dhannyell/visualizacao-de-crimes-em-chicago"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://images.observableusercontent.com/thumbnail/8e7903dbf3aabee11a18050236acb9be30f41c7388d64a9b4fc31e72f97851c6.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Visualização de Crimes em Chicago"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Dhannyell Lukas"}],["$","meta","12",{"name":"twitter:image","content":"https://images.observableusercontent.com/thumbnail/8e7903dbf3aabee11a18050236acb9be30f41c7388d64a9b4fc31e72f97851c6.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L4d","17",{}]] 4a:null