I would like to know a way to bind the leaflet clustering visualization with dc js charts. I have a code below which is very incomplete in which I found a way to group the data using crossfilter js. I can make a pie chart using dc js with grouping. But to bind it with leaflet I don't have a definite approach. I looked into http://ift.tt/1wSwDwr
However I have a realtime visualization which uses a set interval method to get the data at periodic intervals of time. Hence dc.leaflet.js wont work in this case because each time a new layer is added. My code so far is given below. Can someone share some light on how to do this?
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Leaflet Markercluster</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='http://ift.tt/1yvzLPk'></script>
<link href='http://ift.tt/1zojenl' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<script type="text/javascript" src="http://ift.tt/1oG0pAj"></script>
<script src='http://ift.tt/1oj28QS'></script>
<script type="text/javascript" src="http://ift.tt/1s26ITE"></script>
<script type="text/javascript" src="http://ift.tt/1AvDzF8"></script>
<link href='http://ift.tt/1oj25od' rel='stylesheet' />
<link href='http://ift.tt/1oj25of' rel='stylesheet' />
<!-- Example data. -->
<div id='map'></div>
<script>
(function() {
L.mapbox.accessToken = 'pk.eyJ1IjoieWVkdXJhZyIsImEiOiJuTkZSOE9vIn0.RE94btqnc1LqnFzzEPZoHg';
var map = L.mapbox.map('map', 'yedurag.km329i82')
.setView([15, -15], 2);
var markers = new L.MarkerClusterGroup();
function foo() {
d3.json("SB1.json", function(addressPoints) {
var data = crossfilter(addressPoints);
var group1 = data.dimension(function (d) {
return d[2]; // State is a column in the data
});
var statsBygroup1 = group1.group().reduce(
function (p, v) {
++p.count
p.lat.push(parseFloat(v[0]))
p.longi.push(parseFloat(v[1]))
;
return p;
}, // to calculate the stats by industries, var industries is grouped and raised is added
function (p, v) {
--p.count
p.lat.pop()
p.longi.pop()
;
return p; // when unclicked it is subtracted
},
function () {
return {count: 0, lat: [], longi: []} // initial state; although not mentioned as ReduceInitial
}
)
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = L.marker(new L.LatLng(a[0], a[1]), {
icon: L.mapbox.marker.icon({'marker-symbol': 'post', 'marker-color': '0044FF'}),
title: title
});
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers); })
}
var interval = setInterval(function(){foo()}, 10000); // Listens for the json from python every 10 seconds
})();
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire