2e:null 2f:["$","title",null,{"children":"D3 com Crossfilter, DC.js e Leaflet (Parte 2) | Sayonara | Observable"}] 34:T674,buildvis = { magnitudeChart.width(480) .height(150) .margins({top: 10, right: 10, bottom: 20, left:40}) .dimension(magDimension) .group(magDimensionCount) .transitionDuration(500) .gap(56) .centerBar(true) .x(d3.scaleLinear().domain([0, 8])) .elasticY(true) .on("filtered", function(chart,filter){ updateMarkers() }) depthChart.width(480) .height(150) .margins({top: 10, right: 10, bottom: 20, left:40}) .dimension(depthDimension) .group(depthDimensionCount) .transitionDuration(500) .centerBar(true) .gap(1) .x(d3.scaleLinear().domain([0, 100])) .elasticY(true) .on("filtered", function(chart,filter){ updateMarkers() }) timeChart.width(960) .height(150) .transitionDuration(500) .margins({top: 10, right: 10, bottom: 20, left:40}) .dimension(hourDimension) .group(hourDimensionCount) .brushOn(false) .elasticY(true) .x(d3.scaleTime().domain(d3.extent(dataset, d => d.dtg))) dataTable.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) dc.renderAll() updateMarkers() }35:T40e,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.

` }36:T1459,html`Esta célula inclui o css do dc. `37:[] 32:{"id":"d7d1f74c664066c5","slug":"d3-com-crossfilter-dc-js-e-leaflet-parte-2","title":"D3 com Crossfilter, DC.js e Leaflet (Parte 2)","thumbnail":"390f41e23f5590a807e5570d1b5a2b88acd9061920e61956701c4989a3c3e8a1","access_level":"public","create_time":"$D2019-10-23T22:10:16.154Z","update_time":"$D2019-10-30T16:28:37.253Z","view_time":null,"first_public_time":"$D2019-10-23T22:30:34.550Z","fork":{"id":"0d45049ada176197","slug":"d3-com-crossfilter-dc-js-e-leaflet-parte-2","title":"D3 com Crossfilter, DC.js e Leaflet (Parte 2)","owner":{"id":"d94d0ab1065acef4","login":"emanueles","name":"Emanuele Santos"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a6fe25356936255","login":"sayonarasantos","name":"Sayonara","avatar_url":"https://avatars-next.observableusercontent.com/367401073cb167749ab94d9bf5d368c0a410ff82395caa77baae0a4138ba2040","tier":"starter_2024"},"version":103,"publish_version":103,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bfbc482195215b","login":"sayonarasantos","name":"Sayonara","avatar_url":"https://avatars-next.observableusercontent.com/367401073cb167749ab94d9bf5d368c0a410ff82395caa77baae0a4138ba2040","tier":null}],"members":[{"type":"individual","id":"92bfbc482195215b","login":"sayonarasantos","name":"Sayonara","avatar_url":"https://avatars-next.observableusercontent.com/367401073cb167749ab94d9bf5d368c0a410ff82395caa77baae0a4138ba2040","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 (Parte 2)","cells":[{"id":0,"value":"md`# D3 com Crossfilter, DC.js e Leaflet (Parte 2)`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"html`css \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"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 magFormat = d3.format(\".1f\")\n let depthFormat = d3.format(\"d\")\n data.forEach(function(d) {\n d.dtg = parseDate(d.origintime.substr(0,19))\n d.latitude = +d.latitude\n d.longitude = +d.longitude\n d.magnitude = magFormat(+d.magnitude)\n d.depth = depthFormat(+d.depth)\n })\n return data\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"facts = crossfilter(dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"dateDimension = facts.dimension( d => d.dtg)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"magDimension = facts.dimension( d => d.magnitude)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"magDimensionCount = magDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"depthDimension = facts.dimension( d => d.depth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"depthDimensionCount = depthDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"hourDimension = facts.dimension(d => d3.timeHour(d.dtg))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"hourDimensionCount = hourDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"view = md`${container()}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"layerList = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"circles = {\n let markers = d3.map()\n dataset.forEach( function(d) {\n let size = d.magnitude * 10000\n let circle = L.circle([d.latitude, d.longitude], size, {\n color: '#fd8d3c',\n weight: 2,\n fillColor: '#fecc5c',\n fillOpacity: 0.5\n })\n circle.bindPopup(\"Magnitude: \"+d.magnitude+\"
Time: \"+d.dtg)\n circle.publicid = d.publicid //para interação na outra direção\n markers.set(d.publicid, circle)\n })\n return markers\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"idDimension = facts.dimension(d=>d.publicid)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"idGrouping = idDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"magnitudeChart = dc.barChart(view.querySelector(\"#magnitude-chart\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"depthChart = dc.barChart(view.querySelector(\"#depth-chart\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"timeChart = dc.lineChart(view.querySelector(\"#time-chart\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"dataTable = dc.dataTable(view.querySelector(\"#dc-table-graph\"))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"map = {\n view;\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 contributors',\n maxZoom: 17\n }).addTo(mapInstance)\n mapInstance.on('moveend', updateFilters)\n return mapInstance\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"function updateFilters(e){\n let visibleMarkers = new Array(idGrouping.size())\n layerList[0].eachLayer(function(layer) {\n if( e.target.getBounds().contains(layer.getLatLng()) )\n //add layer.publicid to some array visibleMarkers\n visibleMarkers.push(layer.publicid) \n })\n \n idDimension.filterFunction(function(d) {\n return visibleMarkers.indexOf(d) > -1;\n });\n dc.redrawAll();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"function updateMarkers(){\n let ids = idGrouping.all()\n let todisplay = new Array(ids.length) //preallocate array to be faster\n let mc = 0; //counter of used positions in the array\n for (let i = 0; i < ids.length; i++) {\n let tId = ids[i];\n if(tId.value > 0){ //when an element is filtered, it has value > 0\n todisplay[mc] = circles.get(tId.key)\n mc = mc + 1\n }\n }\n todisplay.length = mc; //resize the array so Leaflet does not complain\n if (layerList.length == 1) {\n layerList[0].clearLayers() //remove circles in layerGroup\n if (map.hasLayer(layerList[0])){\n map.removeLayer(layerList[0]) //remove layerGroup if present\n }\n }\n layerList[0] = L.layerGroup(todisplay).addTo(map) //add it again passing the array of markers\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"dc = require('dc')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"crossfilter = require('crossfilter2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"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":8,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"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"