The avatar for @marcosborges1
marcosborges1
Published
Edited
May 29, 2020
Fork of D3 com Crossfilter e DC.js (Parte 2)
Insert cell
Insert cell
map = {
buildvis;
let mapInstance = L.map('mapid').setView([-41.05,172.93], 5)
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/">OpenStreetMap</a>contributors',
maxZoom: 17
}).addTo(mapInstance)
return mapInstance
}
Insert cell
circlesLayer = L.layerGroup().addTo(map)
Insert cell
circles = {
circlesLayer.clearLayers()
dataset.forEach( function(d) {
let circle = L.circle([d.latitude, d.longitude], circleScale(d.magnitude), {
color: '#fd8d3c',
weight: 2,
fillColor: '#fecc5c',
fillOpacity: 0.5
})
circlesLayer.addLayer(circle)
let message = `Magnitude: ${d.magnitude.toFixed(1)}<br/>Time: ${d.dtg}`
circle.bindPopup(message)
})
}
Insert cell
circleScale = d3.scaleLinear()
.domain([0, magDimension.top(1)[0].magnitude])
.range([0, 5000])
Insert cell
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
}
Insert cell
format = d3.format(".1f")
Insert cell
dataset = d3.csv("https://gist.githubusercontent.com/emanueles/301057974a02cf8446e42c1e46c9c742/raw/0ed6d119afbc5eeddc7f763d3708fc1829d22c9f/earthquakes.csv").then(function(data) {
let parseDate = d3.utcParse("%Y-%m-%dT%H:%M:%S");
data.forEach(function(d) {
d.dtg = parseDate(d.origintime.substr(0,19))
d.magnitude = + d.magnitude
d.depth = Math.round(+d.depth)
})
return data;
})
Insert cell
facts = crossfilter(dataset)
Insert cell
dateDimension = facts.dimension(d => d.dtg)
Insert cell
magDimension = facts.dimension(d => Math.round((d.magnitude + Number.EPSILON)*10) /10 )
Insert cell
magDimensionCount = magDimension.group()
Insert cell
// magScale = d3.scaleLinear()
// .domain([0, Math.round((magDimension.top(1)[0].magnitude + Number.EPSILON)* 10)/10])

magScale = d3.scaleLinear()
.domain([0, magDimension.top(1)[0].magnitude])
Insert cell
depthDimension = facts.dimension(d => d.depth )
Insert cell
depthDimensionCount = depthDimension.group()
Insert cell
depthScale = d3.scaleLinear()
.domain([0, depthDimension.top(1)[0].depth])
Insert cell
hourDimension = facts.dimension(d => d3.timeHour(d.dtg))
Insert cell
hourDimensionCount = hourDimension.group()
Insert cell
hourScale = d3.scaleTime()
.domain(d3.extent(dataset, d=>d.dtg))
Insert cell
function container() {
return `
<main role="main" class="container">
<div class="row">
<h4> Earthquakes in New Zealand</h4>
</div>
<div class='row'>
<div id='mapid' class='col-6'></div>
<div class='col-6'>
<div id='magnitude-chart'>
<h5> Number of Events by Magnitude </h5>
</div>
<div id='depth-chart'>
<h5> Events by Depth (km) </h5>
</div>
</div>
</div>
<div class='row'>
<div id='time-chart' class="single-col">
<h5> Events per hour </h5>
</div>
</div>
<table class="table table-hover" id="dc-table-graph">
<thead>
<tr class="header">
<th>DTG</th>
<th>Magnitude</th>
<th>Depth</th>
<th>Latitude</th>
<th>Longitude</th>
</tr>
</thead>
</table>
<p>Earthquake data via <a href="https://quakesearch.geonet.org.nz/">Geonet</a>.</p>
</main>
`
}
Insert cell
Insert cell
dc = require('dc')
Insert cell
crossfilter = require('crossfilter2')
Insert cell
d3 = require('d3')
Insert cell
$ = require('jquery').then(jquery => {
window.jquery = jquery;
return require('popper@1.0.1/index.js').catch(() => jquery);
})
Insert cell
bootstrap = require('bootstrap')
Insert cell
html `<code>css</code>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<style>
#mapid {
height:480px;
}
</style>`
Insert cell
html `<code>script</code>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
crossorigin=""></script>`

Insert cell
L = require("leaflet@1.6.0")
Insert cell

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more