Published
Edited
Oct 27, 2020
1 fork
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
geojson = FileAttachment('bulgaria.geojson').json()
Insert cell
data.filter
Insert cell
drawChoropleth(data, geojson)
Insert cell
drawChoropleth = (data,geojson) => {
let dataP = [];
data.filter(function(d) {
return d.code && d.code!='SOF46';
}).forEach(function(d) {
d.sum = 0;
for(var p in d)
if (p && p!="code" && p!="sum") {
dataP.push({'code':d.code,'type':p,'value':+d[p]});
d.sum+=+d[p];
}
});

var xf = crossfilter(dataP);
var groupname = "Choropleth";
var facilities = xf.dimension(function(d) { return d.code; });
var facilitiesGroup = facilities.group().reduceSum(function(d) { return d.value;});

var choro = dc_leaflet.choroplethChart("#demo3 .map",groupname)
.dimension(facilities)
.group(facilitiesGroup)
.width(600)
.height(400)
.center([42.69,25.42])
.zoom(7)
.geojson(geojson)
.colors(colorbrewer.YlGnBu[7])
.colorDomain([
d3.min(facilitiesGroup.all(), dc.pluck('value')),
d3.max(facilitiesGroup.all(), dc.pluck('value'))
])
.colorAccessor(function(d,i) {
return d.value;
})
.featureKeyAccessor(function(feature) {
return feature.properties.code;
})
.popupMod('ctrlCmd')
.renderPopup(true)
.popup(function(d,feature) {
return feature.properties.nameEn+" : "+d.value;
})
.legend(dc_leaflet.legend().position('bottomright'));


var types = xf.dimension(function(d) { return d.type; });
var typesGroup = types.group().reduceSum(function(d) { return d.value;});

var pie = dc.pieChart("#demo3 .pie",groupname)
.dimension(types)
.group(typesGroup)
.width(200)
.height(200)
.ordering(function (p) {
return +p.key.substr(6);
})
.renderLabel(false)
.renderTitle(true)
.title(function(d) {
var age = d.key.substr(6);
if (age.indexOf("p")==-1)
age="Between "+(+age-4)+"-"+age;
else
age="Over "+age.substr(0,2);
return age+" : "+d.value;
});

dc.renderAll(groupname);
return {choro: choro, pie: pie};
}

Insert cell
dc = require('dc@4')
Insert cell
crossfilter = require("crossfilter2")
Insert cell
d3 = require("d3")
Insert cell
L = require('leaflet')
Insert cell
dc_leaflet = require('dc.leaflet@0.5')
Insert cell
colorbrewer = require('colorbrewer')
Insert cell
html` <link type="text/css" href="https://dc-js.github.io/dc.leaflet.js/css/leaflet.css" rel="stylesheet"/>
<link type="text/css" href="https://dc-js.github.io/dc.leaflet.js/css/MarkerCluster.Default.css" rel="stylesheet"/>
<link type="text/css" href="https://dc-js.github.io/dc.leaflet.js/css/MarkerCluster.css" rel="stylesheet"/>
<link type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css" rel="stylesheet"/>
<link type="text/css" href="https://dc-js.github.io/dc.leaflet.js/css/leaflet-legend.css" rel="stylesheet"/>
`
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