31:T716,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: 20, bottom:20, left:30}) .x(magScale) .gap(70) .dimension(magDimension) .group(magDimensionCount) .centerBar(true) .elasticY(true) .renderHorizontalGridLines(true) depthBarChart.width(360) .height(150) .margins({top:10, right: 20, bottom:20, left:30}) .x(depthScale) .gap(70) .dimension(depthDimension) .group(depthDimensionCount) .centerBar(true) .elasticY(true) .renderHorizontalGridLines(true) timeLineChart.width(800) .height(150) .margins({top:10, right: 10, bottom:20, left:40}) .x(hourScale) .dimension(hourDimension) .group(hourDimensionCount) .renderHorizontalGridLines(true) .brushOn(false) tableChart.width(width) .height(800) .dimension(dateDimension) .group(d=> "List of all earthquakes corresponding to the filters") .size(5) .columns(['dtg', { 'label': 'Magnitude', 'format': d=>format(d.magnitude)}, 'depth', 'latitude', 'longitude']) .sortBy(d=>d.dtg) .order(d3.ascending) dc.renderAll() return view }32:[] 2f:{"title":"D3 com Crossfilter e DC.js (Parte 2)","cells":[{"id":0,"value":"md`# D3 com Crossfilter e DC.js (Parte 2)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":142,"value":"format = d3.format(\".1f\")","pinned":true,"hidden":false,"mode":"ojs"},{"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 return data;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":135,"value":"facts = crossfilter(dataset)","pinned":true,"hidden":false,"mode":"ojs"},{"id":137,"value":"dateDimension = facts.dimension(d => d.dtg)","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"magDimension = facts.dimension(d => Math.round((d.magnitude + Number.EPSILON)*10) /10 )","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"magDimensionCount = magDimension.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":153,"value":"// magScale = d3.scaleLinear()\n// .domain([0, Math.round((magDimension.top(1)[0].magnitude + Number.EPSILON)* 10)/10])\n\nmagScale = d3.scaleLinear()\n .domain([0, magDimension.top(1)[0].magnitude])","pinned":true,"hidden":false,"mode":"ojs"},{"id":164,"value":"depthDimension = facts.dimension(d => d.depth ) ","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"depthDimensionCount = depthDimension.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"depthScale = d3.scaleLinear()\n .domain([0, depthDimension.top(1)[0].depth])","pinned":true,"hidden":false,"mode":"ojs"},{"id":180,"value":"hourDimension = facts.dimension(d => d3.timeHour(d.dtg))","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"hourDimensionCount = hourDimension.group()","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"hourScale = d3.scaleTime()\n .domain(d3.extent(dataset, d=>d.dtg))","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":85,"value":"html`css \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"dc = require('dc')","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"crossfilter = require('crossfilter2')","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":91,"value":"bootstrap = require('bootstrap')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}