31:T67c,buildvis = { let view = md`${container()}` let crimesBarChart = dc.barChart(view.querySelector("#bar-chart")) let crimesLineChart = dc.seriesChart(view.querySelector("#time-chart")) crimesBarChart.width(360) .height(200) .margins({top:10,right:10,bottom:20,left:30}) .dimension(names) .x(colorScale) .xUnits(dc.units.ordinal) .renderHorizontalGridLines(true) .group(crimesTypeGroup) .gap(20) .colors(colorScale) .colorAccessor(d => d.key) .brushOn(false) crimesLineChart.width(360) .height(200) .chart(function(c) { return new dc.LineChart(c).curve(d3.curveCardinal); }) .x(hourScale) .brushOn(false) .yAxisLabel("Number of crimes") .xAxisLabel("Time") .clipPadding(10) .elasticY(true) .dimension(crimeTypeDay) .group(dayCrimeGroup) .mouseZoomable(true) .seriesAccessor(d => d.key[1]) .keyAccessor(d => d.key[0]) .colors(colorScale) .colorAccessor(d => d.key) .legend(dc.legend().x(350).y(350).itemHeight(13).gap(5).horizontal(1).legendWidth(140).itemWidth(70)); crimesLineChart.margins({top:20, right:20, bottom:40, left:40}) crimesLineChart.xAxis().ticks(5) crimesLineChart.colors(colorScale) dc.renderAll() return view }32:[{"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":1613138263778.1,"size":738658}] 2f:{"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"},{"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"},{"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"},{"id":42,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"map = {\n buildvis;\n let mapInstance = L.map('mapid').setView([41.8286684,-87.6699235],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}\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":341,"value":"circles = {\n circlesLayer.clearLayers()\n dataset.forEach( function(d) {\n let circle = L.circle([d.Latitude, d.Longitude], 100, {\n color: colorScale(d['Primary Type']),\n weight: 2,\n fillColor: colorScale(d['Primary Type']),\n fillOpacity: 0.5\n })\n circlesLayer.addLayer(circle) })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"circlesLayer = L.layerGroup().addTo(map)","pinned":true,"hidden":false,"mode":"ojs"},{"id":344,"value":"format = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"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.dia = parseDate(d.Date.substr(0,19)) \n });\n return data;\n})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"facts = crossfilter(dataset)\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"crimeTypeDay = facts.dimension(function(d) {return [d3.timeDay(d.dia), d['Primary Type']];});","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"dayCrimeGroup = crimeTypeDay.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"crimesTypeDimension = facts.dimension(d=>d['Primary Type'])","pinned":true,"hidden":false,"mode":"ojs"},{"id":113,"value":"crimesTypeGroup = crimesTypeDimension.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"names = {\n let sorted = crimesTypeGroup.top(Infinity)\n return sorted.map(d => d.key)\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"colorScale = d3.scaleOrdinal()\n .domain([\"BURGLARY\",\"HOMICIDE\" ,\"ROBBERY\" ])\n .range([\"#fdae61\",\"#ca0020\" ,\"#0571b0\" ])","pinned":true,"hidden":false,"mode":"ojs"},{"id":314,"value":"hourScale = d3.scaleTime()\n .domain(d3.extent(dataset,d=>d.dia))","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":4,"value":"html`css \n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"L = require(\"leaflet@1.6.0\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"crossfilter = require('crossfilter2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"dc = require('dc')","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":30,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}