|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
|
<html> |
|
<head> |
|
<title>DC.js + Leaflet</title> |
|
|
|
<meta itemprop="name" content="DC.js + Leaflet"/> |
|
<meta itemprop="description" content="DC.js + Leaflet chart"/> |
|
|
|
<meta charset="UTF-8"> |
|
|
|
<link type="text/css" href="https://unpkg.com/leaflet/dist/leaflet.css" rel="stylesheet"/> |
|
<link type="text/css" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" rel="stylesheet"/> |
|
<link type="text/css" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" rel="stylesheet"/> |
|
<link type="text/css" href="https://unpkg.com/dc@3/dc.css" rel="stylesheet"/> |
|
<link type="text/css" href="leaflet-legend.css" rel="stylesheet"/> |
|
|
|
<style> |
|
#holder { |
|
width:850px; |
|
margin:20px auto; |
|
} |
|
#holder>div { |
|
padding:30px 0; |
|
clear:both; |
|
} |
|
.map { |
|
width:600px; |
|
height:400px; |
|
} |
|
.pie { |
|
margin-left:30px; |
|
} |
|
#octocat { |
|
position: absolute; |
|
right: 5px; |
|
top: 5px; |
|
} |
|
/*map legend styling*/ |
|
/*--*/ |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<div id="holder"> |
|
<div id="demo2"> |
|
<h2>Test</h2> |
|
<i>TEst</i> |
|
<div class="map"></div> |
|
<div class="pie"></div> |
|
</div> |
|
|
|
<script src="https://unpkg.com/d3@5/dist/d3.js"></script> |
|
<script src="https://unpkg.com/[email protected]/crossfilter.js"></script> |
|
<script src="https://unpkg.com/dc@3/dc.js"></script> |
|
<script type="text/javascript" src="https://unpkg.com/leaflet"></script> |
|
<script type="text/javascript" src="https://unpkg.com/[email protected]/dc.leaflet.js"></script> |
|
<script type="text/javascript" src="https://unpkg.com/leaflet-markercluster"></script> |
|
|
|
|
|
<!--Optional--> |
|
|
|
<script type="text/javascript"> |
|
|
|
/* Markers */ |
|
|
|
d3.csv("universe_test.csv").then(function(data) { |
|
drawMarkerSelect(data); |
|
}); |
|
|
|
function drawMarkerSelect(data) { |
|
var xf = crossfilter(data); |
|
var groupname = "marker-select"; |
|
var facilities = xf.dimension(function(d) { return d.geo; }); |
|
var facilitiesGroup = facilities.group().reduceCount(); |
|
|
|
var marker = dc_leaflet.markerChart("#demo2 .map",groupname) |
|
.locationAccessor(d => d.key.split(',').reverse()) |
|
.dimension(facilities) |
|
.group(facilitiesGroup) |
|
.width(600) |
|
.height(400) |
|
.center([10.76,106.66]) |
|
.zoom(7) |
|
.renderPopup(false) |
|
.filterByArea(true); |
|
|
|
var types = xf.dimension(function(d) { return d.type; }); |
|
var typesGroup = types.group().reduceCount(); |
|
|
|
var pie = dc.pieChart("#demo2 .pie",groupname) |
|
.dimension(types) |
|
.group(typesGroup) |
|
.width(200) |
|
.height(200) |
|
.renderLabel(true) |
|
.renderTitle(true) |
|
.ordering(function (p) { |
|
return -p.value; |
|
}); |
|
|
|
dc.renderAll(groupname); |
|
return {marker: marker, pie: pie}; |
|
} |
|
</script> |
|
|
|
</body> |
|
</html> |