31:T56b,buildvis = { let view = md`${container()}` let barChart = dc.barChart(view.querySelector('#bar-chart')) let timeChart = dc.seriesChart(view.querySelector('#time-chart')) barChart.width(450) .height(180) .margins({top:10, right: 20, bottom:20, left:30}) .x(primaryTypeScale) .xUnits(dc.units.ordinal) .gap(40) .dimension(primaryTypeDimension) .group(primaryTypeDimensionCount) .elasticY(true) .renderHorizontalGridLines(true) .barPadding(0.3) .outerPadding(0.05) .colors(colorScale) .colorAccessor(d => d.key) barChart.render() timeChart.width(420) .height(220) .margins({top:10, right: 20, bottom:40, left:30}) .chart(function(c) { return new dc.LineChart(c); }) .x(timeDimensionScale) .brushOn(false) .yAxisLabel("Measured Speed km/s") .xAxisLabel("Run") .clipPadding(10) .elasticY(true) .dimension(timeDimension) .group(timeDimensionCount) .yAxisLabel("Number of crimes") .xAxisLabel("Time") .mouseZoomable(true) .seriesAccessor(function(d) {return d.key[1];}) .keyAccessor(function(d) {return +d.key[0];}) .valueAccessor(function(d) {return +d.value;}) .colors(colorScale) .colorAccessor(d => d.key) .xAxis().ticks(4) timeChart.render(); 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":1590413574898.435,"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":42,"value":"// sua função que desenha a visualização deve ficar aqui\ndataset = d3.csv(\"https://gist.githubusercontent.com/emanueles/108e0bd5993d5b9ddcddad49387cb2ea/raw/90de2bbea703504c94179fd63140e50e888ed862/chicago_crimes_april_2020.csv\").then((data)=> {\n data.forEach(function(d) {\n d.Date = new Date(d[\"Date\"])\n })\n return data\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"facts = crossfilter(dataset)","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"primaryTypeDimension = facts.dimension(d => d[\"Primary Type\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"primaryTypeDimensionCount = primaryTypeDimension.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"primaryTypeScale = d3.scaleOrdinal()\n .domain(primaryTypeValues)","pinned":true,"hidden":false,"mode":"ojs"},{"id":168,"value":"primaryTypeValues = {\n let arrayPrimaryType = []\n return dataset.map(d=> d[\"Primary Type\"]).reduce((x,y) => { \n if(!arrayPrimaryType.includes(y)) {\n arrayPrimaryType.push(y)\n }\n return arrayPrimaryType.sort()\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"timeDimension = facts.dimension(d => [d3.timeDay(d[\"Date\"]), d[\"Primary Type\"]])","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"timeDimensionCount = timeDimension.group().reduceCount()","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"timeDimensionScale = d3.scaleTime()\n .domain(d3.extent(dataset,d=>d3.timeDay(d[\"Date\"])))","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"colorScale = d3.scaleOrdinal()\n .domain(primaryTypeValues)\n .range([\"#fdae61\", \"#ca0020\", \"#0571b0\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":392,"value":"map = {\n buildvis;\n \n let mapInstance = L.map('mapid').setView([+41.8,-87.7], 10)\n L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMapcontributors',\n maxZoom: 17\n }).addTo(mapInstance)\n \n return mapInstance\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":415,"value":"circlesLayer = L.layerGroup().addTo(map)","pinned":true,"hidden":false,"mode":"ojs"},{"id":417,"value":"circles = {\n circlesLayer.clearLayers()\n\n dataset.forEach( function(d) {\n \n //Set colors by Primary Type\n let color = \"\"\n if(d[\"Primary Type\"] == \"BURGLARY\") color = '#fdae61'\n else if(d[\"Primary Type\"] == \"HOMICIDE\") color = '#ca0020'\n else color = \"#0571b0\"\n \n let circle = L.circle([d.Latitude, d.Longitude], circleScale(1), {\n color: color,\n weight: 2,\n fillColor: color,\n fillOpacity: 0.5\n })\n circlesLayer.addLayer(circle)\n \n //Set Message\n let formattedDate = formatTime(d.Date)\n let message = `Type: ${d['Primary Type']}
Date: ${formattedDate}
Description: ${d.Description}`\n circle.bindPopup(message)\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":567,"value":"circleScale = d3.scaleLinear()\n .domain([0, 1])\n .range([0, 100])","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"formatTime = d3.timeFormat(\"%Y/%m/%d %H:%I\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"$31","pinned":true,"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":85,"value":"barChart = new dc.SeriesChart(\"#bar-chart\");","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":true,"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"}