2d:null 2e:["$","title",null,{"children":"D3 com Crossfilter e DC.js e Leaflet | Magno Felipe | Observable"}] 33:T69b,buildvis = { let view = md`${container()}` // tabela let dcTable = dc.dataTable(view.querySelector("#dc-table-graph")) dcTable.width(960) .height(800) .dimension(dateDimension) .group(d => "List of all earthquakes corresponding to the filters") .size(10) .columns(['dtg','magnitude','depth','latitude','longitude']) .sortBy(d => d.dtg) .order(d3.ascending) dcTable.render() // gráfico de barras sobre a magnitude let dcBarChartMagnitude = dc.barChart(view.querySelector("#magnitude-chart")) let xScale = d3.scaleLinear().domain([0,8]) dcBarChartMagnitude .width(420) .height(150) .dimension(magnitudeDimension) .group(groupMagnitude) .x(xScale) .gap(56) .elasticY(true) dcBarChartMagnitude.render() // gráfico de barras sobre a profundidade let dcBarChartDepth = dc.barChart(view.querySelector("#depth-chart")) let xScale2 = d3.scaleLinear().domain([0,100]) dcBarChartDepth .width(420) .height(150) .dimension(depthDimension) .group(groupDepth) .x(xScale2) .gap(1) .elasticY(true) dcBarChartDepth.render() // gráfico de linha por hora let dcLineChart = dc.lineChart(view.querySelector("#time-chart")) let xScale3 = d3.scaleTime().domain(d3.extent(dataset, d => d.dtg)) dcLineChart.width(840) .height(150) .dimension(timeDimension) .group(groupTime) .x(xScale3) .elasticY(true) dcLineChart.render() return view }34:T40c,function container() { return `

Earthquakes in New Zealand

Number of Events by Magnitude

Events by Depth (km)

Events per hour

DTG	Magnitude	Depth	Latitude	Longitude

Earthquake data via Geonet.

` }35:T1458,html`Esta célula inclui o css do dc. `36:[] 31:{"id":"e1ff089a8f4f1c27","slug":"d3-com-crossfilter-e-dc-js-e-leaflet","title":"D3 com Crossfilter e DC.js e Leaflet","thumbnail":"6ae5b8bafe231c07e6550a1a34c6b095b530d62b15f70ee0a5bb106aaf7d30cb","access_level":"public","create_time":"$D2019-10-06T23:49:39.653Z","update_time":"$D2019-10-07T01:00:10.474Z","view_time":null,"first_public_time":"$D2019-10-07T01:00:35.590Z","fork":{"id":"d8f94e25261fc75c","slug":"d3-com-crossfilter-e-dc-js-parte-2","title":"D3 com Crossfilter e DC.js (Parte 2)","owner":{"id":"c5285e74a3bcadcc","login":"magnum457","name":"Magno Felipe"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c5285e74a3bcadcc","login":"magnum457","name":"Magno Felipe","avatar_url":"https://avatars-next.observableusercontent.com/f31ccf9a1f3f0ad274fe1a54b42ce20cc62d6518e2ebd01e2ba82c693e189687","tier":"starter_2024"},"version":221,"publish_version":221,"role":null,"authored":false,"authors":[{"type":"individual","id":"9494cb5e2bda6d5a","login":"magnum457","name":"Magno Felipe","avatar_url":"https://avatars-next.observableusercontent.com/f31ccf9a1f3f0ad274fe1a54b42ce20cc62d6518e2ebd01e2ba82c693e189687","tier":null}],"members":[{"type":"individual","id":"9494cb5e2bda6d5a","login":"magnum457","name":"Magno Felipe","avatar_url":"https://avatars-next.observableusercontent.com/f31ccf9a1f3f0ad274fe1a54b42ce20cc62d6518e2ebd01e2ba82c693e189687","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 e DC.js e Leaflet","cells":[{"id":0,"value":"md`# D3 com Crossfilter e DC.js e Leaflet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"html`css \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"map = {\n buildvis;\n let mapInstance = L.map('mapid').setView([-41.05, 172.93], 5)\n L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {\n attribution: '© OpenStreetMap constributors',\n maxZoom: 17\n }).addTo(mapInstance)\n return mapInstance\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"circlesLayer = L.layerGroup().addTo(map)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"circles = {\n circlesLayer.clearLayers()\n dataset.forEach( function(d) {\n let circle = L.circle([d.latitude, d.longitude], 10000, {\n color: '#fd8d3c',\n weight: 2,\n fillColor: '#fecc5c',\n fillOpacity: 0.5\n })\n circle.bindPopup('Magnitude: ' + d.magnitude + '
' + 'Time: ' + d.origintime)\n circlesLayer.addLayer(circle)\n })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"$35","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":130,"value":"dataset = d3.csv(\"https://gist.githubusercontent.com/emanueles/65a308ffa630689c11a031252998ef8d/raw/a004c770786229d54264406118ae21ba7e4c51a8/earthquakes.csv\").then(function(data){\n let parseDate = d3.utcParse(\"%Y-%m-%dT%H:%M:%S\")\n let parse1f = d3.format(\".1f\")\n let parseDepth = d3.format(\"d\")\n data.forEach(function(d){\n d.magnitude = parse1f(d.magnitude)\n d.depth = parseDepth(d.depth)\n d.dtg = parseDate(d.origintime.substr(0,19))\n })\n \n return data\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"facts = crossfilter(dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"dateDimension = facts.dimension(d => d.dtg)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"magnitudeDimension = facts.dimension(d => d.magnitude)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"groupMagnitude = magnitudeDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"depthDimension = facts.dimension(d => d.depth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"groupDepth = depthDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"timeDimension = facts.dimension(d => d3.timeHour(d.dtg))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"groupTime = timeDimension.group()","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":133,"value":"L = require('leaflet@1.5.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"