31:T5a2,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) 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) 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() }32: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.

` }33:[] 2f:{"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"},{"id":70,"value":"view = md`${container()}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"format = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":26,"value":"facts = crossfilter(dataset)","pinned":true,"hidden":false,"mode":"ojs"},{"id":28,"value":"dateDimension = facts.dimension( d => d.dtg)","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"magDimension = facts.dimension(d => Math.round((d.magnitude + Number.EPSILON) * 10) / 10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"magDimensionCount = magDimension.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"depthDimension = facts.dimension( d => d.depth)","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"depthDimensionCount = depthDimension.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"hourDimension = facts.dimension(d => d3.timeHour(d.dtg))","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"hourDimensionCount = hourDimension.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":54,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"circlesLayer = L.layerGroup().addTo(map) ","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":56,"value":"circles = {\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 circle.bindPopup(\"Magnitude: \"+format(d.magnitude)+\"
Time: \"+d.dtg)\n circlesLayer.addLayer(circle) \n }) \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"magnitudeChart = dc.barChart(view.querySelector(\"#magnitude-chart\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"depthChart = dc.barChart(view.querySelector(\"#depth-chart\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"timeChart = dc.lineChart(view.querySelector(\"#time-chart\"))","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"dataTable = dc.dataTable(view.querySelector(\"#dc-table-graph\"))","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":24,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"html`css \n\n\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"dc = require('dc')","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"crossfilter = require('crossfilter2')","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":8,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"L = require('leaflet@1.6.0')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}