43:["$","title",null,{"children":"Visualização de Crimes em Chicago | Guilherme Carvalho da SIlva | Observable"}] 4b:T4d7,// sua função que desenha a visualização deve ficar aqui buildvis = { let view = md`${container()}` let crimeBarChart = dc.barChart(view.querySelector("#bar-chart")); let dayLineChart = dc.seriesChart(view.querySelector("#time-chart")); crimeBarChart.width(360) .height(150) .margins({top: 10, right: 10, bottom: 20, left:30}) .dimension(crimeDimension) .group(crimeDimensionCount) .gap(20) .x(crimeDimensionScale) .elasticY(true) .centerBar(false) .xUnits(dc.units.ordinal) .colors(colorScale) .colorAccessor(d => d.key) dayLineChart.width(360) .height(150) .chart(function(c) {return new dc.LineChart(c);}) .x(timeScale) .dimension(graphDimension) .group(graphDimensionCount) .clipPadding(10) .elasticY(true) .brushOn(false) .seriesAccessor(function(d) {return d.key[1];}) .keyAccessor(function(d) {return d.key[0];}) .colors(colorScale) .xAxis().ticks(5) dc.renderAll() return view }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":1613006210819.294,"size":738658}] 47:{"id":"e3c2395e28923740","slug":"visualizacao-de-crimes-em-chicago","title":"Visualização de Crimes em Chicago","thumbnail":"9ba3ce882b4dbf081c74a79745a3bfc1b0fda80c05ed749518af5cebd6aed86d","access_level":"public","create_time":"$D2021-02-11T01:16:50.819Z","update_time":"$D2021-02-11T11:39:54.567Z","view_time":null,"first_public_time":"$D2021-02-11T01:52:24.899Z","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":"f4f03875c0fc7eea","login":"kylestorm1812","name":"Guilherme Carvalho da SIlva","avatar_url":"https://avatars-next.observableusercontent.com/8544cafb35754275356aceb16a9a00462295f4080035de43056116cc1008376f","tier":"starter_2024","bio":"Electrical Engineer Student at the Federal University of Ceará, Brasil, interested in polishing its programming skills for Data Science and Machine Learning","followed_by_you":false,"follows_you":false},"version":170,"publish_version":170,"role":null,"authored":false,"authors":[{"type":"individual","id":"3df5af99ba62dc39","login":"kylestorm1812","name":"Guilherme Carvalho da SIlva","avatar_url":"https://avatars-next.observableusercontent.com/8544cafb35754275356aceb16a9a00462295f4080035de43056116cc1008376f","tier":null,"bio":"Electrical Engineer Student at the Federal University of Ceará, Brasil, interested in polishing its programming skills for Data Science and Machine Learning","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3df5af99ba62dc39","login":"kylestorm1812","name":"Guilherme Carvalho da SIlva","avatar_url":"https://avatars-next.observableusercontent.com/8544cafb35754275356aceb16a9a00462295f4080035de43056116cc1008376f","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":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"dataset = d3.csv(\"https://gist.githubusercontent.com/emanueles/108e0bd5993d5b9ddcddad49387cb2ea/raw/90de2bbea703504c94179fd63140e50e888ed862/chicago_crimes_april_2020.csv\").then(function(data) {\n let parseDate = d3.utcParse(\"%m/%d/%Y %H:%M:%S\");\n data.forEach(function(d) {\n d.date = parseDate(d.Date.substr(0,19))\n });\n \n return data;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"map = {\n buildvis;\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"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":79,"value":"circles = {\n circlesLayer.clearLayers()\n dataset.forEach( function(d) {\n let circle = L.circle([d.Latitude, d.Longitude], 200, {\n color: colorScale(d['Primary Type']),\n weight: 2,\n fillColor: colorScale(d['Primary Type']),\n fillOpacity: 0.5\n })\ncirclesLayer.addLayer(circle) })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"circleScale = d3.scaleOrdinal().domain([\"HOMICIDE\", \"ROBBERY\", \"BURGLARY\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"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":94,"value":"crimeDimension = facts.dimension(d => d['Primary Type'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"crimeDimensionCount = crimeDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"crimeDimensionScale = d3.scaleOrdinal().domain([\"HOMICIDE\", \"ROBBERY\", \"BURGLARY\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"colorScale = d3.scaleOrdinal()\n .domain([\"HOMICIDE\", \"ROBBERY\", \"BURGLARY\"])\n .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":157,"value":"timeScale = d3.scaleTime().domain(d3.extent(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":127,"value":"graphDimension = facts.dimension(function(d) {return [d3.timeDay(d.date), d['Primary Type']];}) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"graphDimensionCount = graphDimension.group()","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":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