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(magGroup)
.gap(70)
.x(magScale)
.elasticY(true)
.centerBar(true)
.renderHorizontalGridLines(true)
depthBarChart.width(360)
.height(150)
.margins({top: 10, right: 10, bottom: 20,left:30})
.dimension(depthDimension)
.group(depthGroup)
.gap(70)
.x(depthScale)
.elasticY(true)
.centerBar(true)
.renderHorizontalGridLines(true)
timeLineChart.width(800)
.height(150)
.margins({top:10, right:10, bottom: 20, left:40})
.dimension(hourDimension)
.group(hourGroup)
.x(hourScale)
.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',
{label: "Magnitude",
format: d => format(d.magnitude)},
'depth',
'latitude',
'longitude'])
.sortBy(d => d.dtg)
.order(d3.ascending)
dc.renderAll()
return view
}