43:["$","title",null,{"children":"D3 com Crossfilter, DC.js e Leaflet | Guilherme Carvalho da SIlva | Observable"}] 4b:T72f,buildvis = { let view = md`${container()}` let magBarChart = dc.barChart(view.querySelector("#magnitude-chart")); let depthBarChart = dc.barChart(view.querySelector("#depth-chart")); let timeLineChart = dc.lineChart(view.querySelector("#time-chart")); let tableChart = dc.dataTable(view.querySelector("#dc-table-graph")); magBarChart.width(360) .height(150) .margins({top: 10, right: 10, bottom: 20, left:30}) .dimension(magDimension) .group(magDimensionCount) .gap(70) .x(magScale) .elasticY(true) .centerBar(true) depthBarChart.width(360) .height(150) .margins({top: 10, right: 10, bottom: 20, left:30}) .dimension(depthDimension) .group(depthDimensionCount) .gap(70) .x(depthDimensionScale) .elasticY(true) .centerBar(true) timeLineChart.width(800) .height(150) .margins({top: 10, right: 10, bottom: 20, left:40}) .dimension(hourDimension) .group(hourDimensionCount) .x(hourDimensionScale) .renderArea(false) .brushOn(false) tableChart.width(width) .height(800) .dimension(dateDimension) .group(d => "List of all earthquakes corresponding to the filters") .size(5) .columns(['dtg', // os nomes dos atributos { label: "Magnitude", format: d => format(d.magnitude)}, 'depth', 'latitude', 'longitude']) .sortBy(d => d.dtg) .order(d3.ascending) dc.renderAll() return view }4c:[] 47:{"id":"a310c2c4eebd2620","slug":"d3-com-crossfilter-dc-js-e-leaflet","title":"D3 com Crossfilter, DC.js e Leaflet","thumbnail":"7ebed71eeb33855be1913ee047f2e68788ab9612e8179bf976b6e0cab14ec61e","access_level":"public","create_time":"$D2021-02-08T11:14:15.947Z","update_time":"$D2021-02-11T01:52:03.173Z","view_time":null,"first_public_time":"$D2021-02-11T01:45:24.568Z","has_unpublished_edits":null,"fork":{"id":"4e3d8813e4538211","slug":"d3-com-crossfilter-e-dc-js-parte-2","title":"D3 com Crossfilter e DC.js (Parte 2)","owner":{"id":"d94d0ab1065acef4","login":"emanueles","name":"Emanuele Santos"}},"stars":0,"starred":false,"owner":{"type":"team","id":"f4f03875c0fc7eea","login":"kylestorm1812","name":"Guilherme Carvalho da SIlva","avatar_url":"https://avatars-next.observableusercontent.com/8544cafb35754275356aceb16a9a00462295f4080035de43056116cc1008376f","tier":"starter_2024","bio":"Electrical Engineer Student at the Federal University of Ceará, Brasil, interested in polishing its programming skills for Data Science and Machine Learning","followed_by_you":false,"follows_you":false},"version":204,"publish_version":204,"role":null,"authored":false,"authors":[{"type":"individual","id":"3df5af99ba62dc39","login":"kylestorm1812","name":"Guilherme Carvalho da SIlva","avatar_url":"https://avatars-next.observableusercontent.com/8544cafb35754275356aceb16a9a00462295f4080035de43056116cc1008376f","tier":null,"bio":"Electrical Engineer Student at the Federal University of Ceará, Brasil, interested in polishing its programming skills for Data Science and Machine Learning","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3df5af99ba62dc39","login":"kylestorm1812","name":"Guilherme Carvalho da SIlva","avatar_url":"https://avatars-next.observableusercontent.com/8544cafb35754275356aceb16a9a00462295f4080035de43056116cc1008376f","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","cells":[{"id":0,"value":"md`# D3 com Crossfilter, DC.js e Leaflet`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"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":126,"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 \n return data;\n})\n ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"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: '© OpenStreetMapcontributors',\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":196,"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":198,"value":"circles = {\n circlesLayer.clearLayers()\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 })\ncircle.bindPopup(\"Magnitude: \" + format(d.magnitude) + \"
Time:\" + d.dtg) \ncirclesLayer.addLayer(circle) })\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"circleScale = d3.scaleLinear().domain([0, magDimension.top(1)[0].magnitude]).range([0, 50000])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"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":149,"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":158,"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":160,"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":162,"value":"magScale = d3.scaleLinear().domain([0,Math.round((magDimension.top(1)[0].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":170,"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":173,"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":175,"value":"depthDimensionScale = d3.scaleLinear().domain([0,depthDimension.top(1)[0].depth])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"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":181,"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":183,"value":"hourDimensionScale = d3.scaleTime().domain(d3.extent(dataset, d => d.dtg))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function container() { \n return `\n

Earthquakes in New Zealand

Number of Events by Magnitude

\n \n

Events by Depth (km)

Events per hour

\n \n \n \n \n \n \n \n \n \n \n

DTG	Magnitude	Depth	Latitude	Longitude

Earthquake data via Geonet.

\n `\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"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":11,"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":8,"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":4,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"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"},{"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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 42:null