The avatar for @bmasch
bmasch
Published
Edited
Jul 23, 2020
Fork of D3 com Crossfilter, DC.js e Leaflet
Insert cell
Insert cell
buildvis = {
let view = md`${container()}`

let sectorChart = dc.pieChart(view.querySelector("#dc-sector-chart"));
sectorChart
.width(325)
.height(150)
.radius(70)
.cx(70)
.cy(80)
.dimension(sectorDimension)
.group(sectorDimension.group())
.legend(dc.legend().x(150).y(10).itemHeight(13).gap(5))

dc.renderAll()
return view
}
Insert cell
format = d3.format(".1f")
Insert cell
feddata = d3.csv('https://raw.githubusercontent.com/bmasch/COVID19/master/USFedBondHoldings_0-10-2020.csv').then(function (data){
let parseDate = d3.timeParse("%m/%d/%Y");
data.forEach(function (d){
d.Matures = parseDate(d["Maturity Date"]);
d.ParValue = +d["Par Value (US $)"];
d.Cost = +d["Amortized Cost (US $)"];
})
return data;
})
Insert cell
holdings = crossfilter(feddata)
Insert cell
sectorDimension = holdings.dimension(d => d.Sector)
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='dc-sector-chart' class="single-col">
<h5>Sector</h5>
</div>
</div>

</main>
`
}
Insert cell
Insert cell
L = require('leaflet@1.6.0')
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

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more