2e:null 2f:["$","title",null,{"children":"D3 com Crossfilter, DC.js e Leaflet (CRIMES DE CHICAGO) | LailsonAzevedo | Observable"}] 34:T4c7,dataset = d3.csv("https://gist.githubusercontent.com/emanueles/13dfe2c1d43e11b5207bb4e6125d71bf/raw/41d14f8fbd9d6cd9e8ad074f8417cff1329ab339/chicago_crimes_sept_2019.csv").then(function(data){ // formatando nossos dados let parserDate = d3.timeParse("%m/%d/%Y %H:%M:%S %p") data.forEach(function(d,i){ d.id = +d.ID d.case_Number = d['Case Number'] d.date = parserDate(d.Date) d.block = d.Block d.iucr = d.IUCR d.primary_type = d['Primary Type'] d.description = d.Description d.location_description = d['Location Description'] d.arrest = d.Arrest d.domestic = d.Domestic d.beat = +d.Beat d.district = +d.District d.ward = +d.Ward d.community_area = +d['Community Area'] d.fbi_code = d['FBI Code'] d.x_coordinate = +d['X Coordinate'] d.y_coordinate = +d['Y Coordinate'] d.year = +d['Year'] d.updated_on = parserDate(d['Updated On']) d.latitude = +d.Latitude d.longitude = +d.Longitude d.location = +d.Location }) // let parserUTC = d3.utcParse("%Y-%m-%dT%H:%M:%S") // let parserFloat = d3.format(".1f") // let parserInt = d3.format("d") return data })35:T876,buildvis = { let view = md`${container()}` let crimes_type_chart = dc.barChart(view.querySelector("#crimes-type-chart")) let colorScale = d3.scaleOrdinal() .domain(["HOMICIDE", "ROBBERY", "BURGLARY"]) .range(["#ca0020", "#0571b0", "#fdae61"]) crimes_type_chart.width(480) .height(150) .x(d3.scaleBand()) .colors(colorScale) .colorAccessor(d => d.key) .gap(56) .xUnits(dc.units.ordinal) .barPadding(0.2) .outerPadding(0.1) .elasticY(true) .dimension(primary_typeDimension) .group(totalCrimesByType) // let compositeChart = dc.seriesChart(view.querySelector("#crimes-day-chart")) // compositeChart.width(480) // .height(250) // .chart(function(c){return dc.lineChart(c).curve(d3.curveCardinal); }) // .x(d3.scaleTime().domain(d3.extent(dataset,d => d.date))) // .brushOn(false) // .yAxisLabel("Number of crimes") // .xAxisLabel("Time") // .elasticY(true) // .dimension(dayCrime_Dimension) // .group(robberyByDayByGroup) // // .group(burglaryByDayByGroup) // // .group(homicideByDayByGroup) // .seriesAccessor(function(d) {return "test" + d.key[0];}) let compositeChart = dc.compositeChart(view.querySelector("#crimes-day-chart")) compositeChart.width(480) .height(200) .x(d3.scaleTime().domain(d3.extent(dataset,d => d.date))) .xAxisLabel("Time") .yAxisLabel("Number of crimes") .compose([ dc.lineChart(compositeChart) .group(robberyByDayByGroup, 'Robbery') .ordinalColors(["#0571b0"]), dc.lineChart(compositeChart) .group(burglaryByDayByGroup, 'Burglary') .ordinalColors(["#fdae61"]), dc.lineChart(compositeChart) .group(homicideByDayByGroup, 'Homicide') .ordinalColors(["#ca0020"])]) dc.renderAll() return view }36:T1453,html`Esta célula inclui o css do dc. `37:[] 32:{"id":"93418ddaee1b10d9","slug":"d3-com-crossfilter-dc-js-e-leaflet-crimes-de-chicago","title":"D3 com Crossfilter, DC.js e Leaflet (CRIMES DE CHICAGO)","thumbnail":"5b010e8cc00f7986a15aaac37a83bc7de79d234d11c0cf4073f6ecd2d5896c6a","access_level":"public","create_time":"$D2019-10-06T22:01:46.794Z","update_time":"$D2019-10-08T01:57:14.468Z","view_time":null,"first_public_time":"$D2019-10-07T02:57:05.111Z","fork":{"id":"6ef0dc1822301f7f","slug":"d3-com-crossfilter-dc-js-e-leaflet","title":"D3 com Crossfilter, DC.js e Leaflet","owner":{"id":"36fbc8f6f5c00a43","login":"lailson93","name":"LailsonAzevedo"}},"stars":0,"starred":false,"owner":{"type":"team","id":"36fbc8f6f5c00a43","login":"lailson93","name":"LailsonAzevedo","avatar_url":"https://avatars-next.observableusercontent.com/8397361199475564bd8b8467c8ee423769557a5b87acf0492efafc33c8656c23","tier":"starter_2024"},"version":432,"publish_version":432,"role":null,"authored":false,"authors":[{"type":"individual","id":"394bd7ee6c15f136","login":"lailson93","name":"LailsonAzevedo","avatar_url":"https://avatars-next.observableusercontent.com/8397361199475564bd8b8467c8ee423769557a5b87acf0492efafc33c8656c23","tier":null}],"members":[{"type":"individual","id":"394bd7ee6c15f136","login":"lailson93","name":"LailsonAzevedo","avatar_url":"https://avatars-next.observableusercontent.com/8397361199475564bd8b8467c8ee423769557a5b87acf0492efafc33c8656c23","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"D3 com Crossfilter, DC.js e Leaflet (CRIMES DE CHICAGO)","cells":[{"id":0,"value":"md`# D3 com Crossfilter, DC.js e Leaflet (CRIMES DE CHICAGO)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":" html`css \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"facts = crossfilter(dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"primary_typeDimension = facts.dimension( d => d.primary_type)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":282,"value":"totalCrimesByType = primary_typeDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":285,"value":"totalCrimesByType.all()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"dayCrime_Dimension = facts.dimension(d => d3.timeDay(d.date))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"dayCrime_Dimension.top(10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"robberyByDayByGroup = dayCrime_Dimension.group().reduceSum(d => d.primary_type == \"ROBBERY\" ? 1:0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"burglaryByDayByGroup = dayCrime_Dimension.group().reduceSum(d => d.primary_type == \"BURGLARY\" ? 1:0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"homicideByDayByGroup = dayCrime_Dimension.group().reduceSum(d => d.primary_type == \"HOMICIDE\" ? 1:0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"robberyByDayByGroup.all()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"homicideByDayByGroup.all()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":259,"value":"map = {\nbuildvis;\n let mapInstance = L.map('mapid').setView([41.813736,-87.707326], 9.5)\n L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {attribution: '© Map tiles by Carto, under CC BY 3.0. Data by OpenStreetMap, under ODbL.', maxZoom:15}).addTo(mapInstance)\n return mapInstance\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"circlesLayer = L.layerGroup().addTo(map)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":250,"value":"circles = {\n circlesLayer.clearLayers()\n dataset.forEach( function(d) {\n \n let color = null\n if (d['Primary Type']=='ROBBERY'){\n color = '#0571b0'\n }else\n if (d['Primary Type']=='BURGLARY'){\n color = '#fdae61'\n }else\n if (d['Primary Type']=='HOMICIDE'){\n color = '#ca0020'\n }\n \n let circle = L.circle([d.latitude, d.longitude], 150, {\n color: color,\n weight: 2,\n fillColor: color,\n fillOpacity: 0.5\n })\n circlesLayer.addLayer(circle) \n circle.bindPopup(\"Time: \"+d.date+\"
Type: \"+d.primary_type)\n })\n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function container() { \n return `\n

Crimes in Chicago in September of 2019

\n\n

Number of Crimes by Type

\n \n

Number of Crimes by Day

\n\n\n

Crime data via Chicago Data Portal.

\n\n

\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"dc = require('dc')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"crossfilter = require('crossfilter2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"L = require('leaflet@1.5.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"