34:["$","title",null,{"children":"D3 com Crossfilter, DC.js e Leaflet (Parte 2) | Dhannyell Lukas | Observable"}] 3c:T606,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", 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", 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(5) .columns([ 'dtg', 'magnitude', 'depth', 'latitude', 'longitude']) .sortBy(d => d.dtg) .order(d3.ascending) dc.renderAll() updateMarkers() }3d: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.

` }3e:[] 38:{"id":"1c01c6dde4aa7bcd","slug":"d3-com-crossfilter-dc-js-e-leaflet-parte-2","title":"D3 com Crossfilter, DC.js e Leaflet (Parte 2)","thumbnail":"068272b0fc86771746605eb3eb2d176bcde169d36662c86fae5bac66927d6667","access_level":"public","create_time":"$D2021-03-21T20:28:14.319Z","update_time":"$D2021-03-31T04:45:57.887Z","view_time":null,"first_public_time":"$D2021-03-21T20:44:11.059Z","has_unpublished_edits":null,"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":"00c7587517786dc7","login":"dhannyell","name":"Dhannyell Lukas","avatar_url":"https://avatars-next.observableusercontent.com/c38b84163a78bf578b07e1c3eb323e8126e2a8cb8d60b1eda66acfe4bd2dd1b4","tier":"starter_2024","bio":"I'm a Computer Engineering Student and\r\nEnthusiast of indie games.","followed_by_you":false,"follows_you":false},"version":92,"publish_version":92,"role":null,"authored":false,"authors":[{"type":"individual","id":"df7fa2740d679be4","login":"dhannyell","name":"Dhannyell Lukas","avatar_url":"https://avatars-next.observableusercontent.com/c38b84163a78bf578b07e1c3eb323e8126e2a8cb8d60b1eda66acfe4bd2dd1b4","tier":null,"bio":"I'm a Computer Engineering Student and\r\nEnthusiast of indie games.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"df7fa2740d679be4","login":"dhannyell","name":"Dhannyell Lukas","avatar_url":"https://avatars-next.observableusercontent.com/c38b84163a78bf578b07e1c3eb323e8126e2a8cb8d60b1eda66acfe4bd2dd1b4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"view = md`${container()}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"format = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"dataset = d3.csv('https://gist.githubusercontent.com/emanueles/301057974a02cf8446e42c1e46c9c742/raw/0ed6d119afbc5eeddc7f763d3708fc1829d22c9f/earthquakes.csv').then(function(data){\n let parseDate = d3.utcParse(\"%Y-%m-%dT%H:%M:%S\")\n data.forEach(function(d){\n d.dtg = parseDate(d.origintime.substr(0,19));\n d.magnitude = +d.magnitude;\n d.depth = Math.round(+d.depth);\n });\n return data;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"facts = crossfilter(dataset)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"dateDimension = facts.dimension( d => d.dtg)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"magDimension = facts.dimension(d => Math.round((d.magnitude + Number.EPSILON) * 10) / 10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"magDimensionCount = magDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"depthDimension = facts.dimension( d => d.depth)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"depthDimensionCount = depthDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"hourDimensionCount = hourDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"idDimension = facts.dimension(d => d.publicid)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"idGrouping = idDimension.group()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"circlesLayer = L.layerGroup().addTo(map) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"circleScale = d3\n .scaleLinear()\n .domain([0, magDimension.top(1)[0].magnitude])\n .range([0, 50000])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"circles = {\n let markers = new Map();\n dataset.forEach( function(d) {\n let circle = L.circle([d.latitude, d.longitude], circleScale(d.magnitude), {\n color: '#fd8d3c',\n weight: 2,\n fillColor: '#fecc5c',\n fillOpacity: 0.5\n })\n \n circle.bindPopup(\"Magnitude: \"+format(d.magnitude)+\"
Time: \"+d.dtg)\n circle.publicid = d.publicid;\n markers.set(d.publicid, circle)\n })\n return markers;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"layerList = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"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 \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 \n todisplay.length = mc; //resize the array so Leaflet does not complain\n \n if (layerList.length == 1) {\n console.log(\"Cleaning layer\")\n layerList[0].clearLayers() //remove circles in layerGroup\n if (map.hasLayer(layerList[0])){\n console.log(\"Removing layer\")\n map.removeLayer(layerList[0]) //remove layerGroup if present\n }\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"function updateFilters(e){\n const visibleMarkers = new Set()\n layerList[0].eachLayer(layer => {\n if( e.target.getBounds().contains(layer.getLatLng()) ) visibleMarkers.add(layer.publicid)\n }\n )\n\n idDimension.filterFunction(id => visibleMarkers.has(id));\n\n dc.redrawAll();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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 return mapInstance\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"map.on(\"moveend\", updateFilters)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"html`css \n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"dc = require('dc')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"crossfilter = require('crossfilter2')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"L = require('leaflet@1.6.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 33:null