Built with blockbuilder.org
forked from renauld94's block: fresh block
forked from gordonwoodhull's block: fresh block
license: mit | |
height: 1000 |
Built with blockbuilder.org
forked from renauld94's block: fresh block
forked from gordonwoodhull's block: fresh block
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<link rel="stylesheet" href="dc.css"> | |
<link rel="stylesheet" type="text/css" href="https://unpkg.com/dc@2/dc.css"> | |
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"> | |
<link rel="stylesheet" type="text/css" href="css/main.css"> | |
</head> | |
<body> | |
<div id="Districtname"> | |
<span class="reset" style="display: none;">Selected: <span class="filter"> | |
</span></span> | |
<a class="reset" href=" | |
javascript:districtnamechart.filterAll();dc.redrawAll();" style="display: | |
none;">reset</a> | |
<div class="clearfix"></div> | |
</div> | |
<div id="pop"> | |
<span class="reset" style="display: none;">Selected: <span class="filter"> | |
</span></span> | |
<a class="reset" href=" | |
javascript:popnamechart.filterAll();dc.redrawAll();" style="display: | |
none;">reset</a> | |
<div class="clearfix"></div> | |
</div> | |
//DISPLAY MAP | |
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" /> | |
<style> | |
#mapid { height: 180px; } | |
</style> | |
</head> | |
<body> | |
<div id="mapid" style="width: 500px; height: 400px;"></div> | |
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> | |
<script> | |
var mymap = L.map('mapid').setView([10.762622, 106.660172], 13); | |
var pharmaciesMarkers = new L.FeatureGroup(); | |
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', { | |
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors' | |
}).addTo(mymap); | |
</script> | |
</body> | |
<script src="https://unpkg.com/[email protected]/crossfilter.js"></script> | |
<script src="https://unpkg.com/d3@3/d3.js"></script> | |
<script src="https://unpkg.com/dc@2/dc.js"></script> | |
<script> | |
var districtnamechart = dc.rowChart("#Districtname"), | |
wardnamechart = dc.rowChart("#wardname"), | |
popnamechart = dc.rowChart("#pop"), | |
visCount = dc.dataCount(".dc-data-count"), | |
visTable = dc.dataTable(".dc-data-table"), | |
yearchart = dc.pieChart("dateDim"); | |
d3.csv("universe_test.csv", function (err,data) { | |
//,kmist,city,district,ward,Lat,Long | |
//0,KTMPVN15707,Ho Chi Minh,Can Gio,Can Thanh,10.41525,106.97254 | |
//1,KTMPVN15706,Ho Chi Minh,Can Gio,Can Thanh,10.41392,106.9705 | |
if (err) throw err; | |
data.forEach(function (d) { | |
d.Timestamp = new Date(d.Timestamp); | |
}); | |
var fullDateFormat = d3.time.format('%a, %d %b %Y %X %Z'); | |
var yearFormat = d3.time.format('%Y'); | |
var monthFormat = d3.time.format('%b'); | |
var dayOfWeekFormat = d3.time.format('%a'); | |
var ndx = crossfilter(data); | |
var all = ndx.groupAll(); | |
var allDim = ndx.dimension(function(d) {return d;}); | |
var dateDim = ndx.dimension(function (d) { return d.Timestamp; }); | |
var yearDim = ndx.dimension(function (d) { return d["first_had_year"]; }) | |
; | |
var districtDIM = ndx.dimension(function (d) { return d["district"]; }) | |
; | |
var wardDIM = ndx.dimension(function (d) { return d["ward"]; }) | |
; | |
var popDIM = ndx.dimension(function (d) { return d["pop"]; | |
}); | |
var districtgroup = districtDIM.group(); | |
var wardgroup = wardDIM.group(); | |
var popgroup = popDIM.group(); | |
var dateGroup = dateDim.group(); | |
var countPerYear = yearDim.group().reduceCount(); | |
popnamechart | |
.dimension(popDIM) | |
.height(100) | |
.width(700) | |
.group(popgroup) | |
.elasticX(true) | |
yearchart | |
.dimension(dateDim) | |
.group(countPerYear) | |
visCount | |
.dimension(ndx) | |
.group(all); | |
visTable | |
.dimension(dateDim) | |
// Data table does not use crossfilter group but rather a closure | |
// as a grouping function | |
.group(function (d) { | |
var format = d3.format('02d'); | |
return d.Timestamp.getFullYear() + '/' + format((d.Timestamp.getMonth() + 1)); | |
}) | |
.columns([ | |
"Timestamp", | |
"KMIST_TEMP_ID", | |
"ID POP", | |
"CUSTOMER NAME", | |
"district", | |
"ward", | |
]); | |
// update map with pharmacies to match filtered data | |
pharmaciesMarkers.clearLayers(); | |
allDim.top(Infinity).forEach(function (d) { | |
//var loc = d.KMIST_TEMP_ID; | |
var marker = L.marker([+d.lat, +d.lng]); | |
marker.bindPopup("<p>" + name + " " + d.district + " " + d.ward + "</p>"); | |
pharmaciesMarkers.addLayer(marker); | |
}); | |
mymap.addLayer(pharmaciesMarkers); | |
mymap.fitBounds(pharmaciesMarkers.getBounds()); | |
dc.renderAll(); | |
}); | |
</script> | |
</body> | |
</html> |
KMIST_TEMP_ID | ID POP | pop | Timestamp | panel | CUSTOMER NAME | city | district | ward | lat | lng | |
---|---|---|---|---|---|---|---|---|---|---|---|
KTMPVN12119 | 2018 | 2018-07-11 22:50 | Nha Thuoc An Binh | Ho Chi Minh | Thu Duc | Linh Trung | 10.8539167 | 106.7716921 | |||
KTMPVN12144 | 17019 | 2018 | 2017-10-15 18:05 | Nha Thuoc Thuy Nguyen | Ho Chi Minh | Binh Thanh | 21 | 10.798508 | 106.711179 | ||
KTMPVN12149 | 2018 | 2018-03-25 16:13 | Nha Thuoc Tay Anh Phuong | Ho Chi Minh | Binh Thanh | 13 | 10.813232 | 106.70039 | |||
KTMPVN12162 | 2018 | 2018-08-14 8:24 | Nha Thuoc The Ky | Ho Chi Minh | 1 | NA | 10.7732238 | 106.6986981 | |||
KTMPVN12191 | 2018 | 2018-04-28 19:27 | Nha Thuoc Kim Ngan | Ho Chi Minh | Tan Phu | Hoa Thanh | 10.7840823 | 106.6392241 | |||
KTMPVN12199 | 2018 | 2018-02-22 21:29 | Nha Thuoc Mai Khuong | Ho Chi Minh | 11 | 10 | 10.762648 | 106.642335 | |||
KTMPVN12201 | 2018 | 2018-08-30 20:07 | Nha Thuoc Mai Thao | Ho Chi Minh | Tan Phu | Tan Thoi Hoa | 10.765549 | 106.63155 | |||
KTMPVN12242 | 2018 | 2018-04-29 8:44 | Nha Thuoc Anh Phuong | Ho Chi Minh | Binh Thanh | Binh Hung Hoa | 10.8176735 | 106.6042386 | |||
KTMPVN12275 | 2018 | 2018-07-24 9:31 | Nha Thuoc Thu Huong | Ho Chi Minh | Go Vap | 18 | 10.8515163 | 106.6622063 | |||
KTMPVN12277 | 23815 | 2018 | 2017-12-17 13:07 | Nha Thuoc Ngoc Diep | Ho Chi Minh | Phu Nhuan | 5 | 10.8049906 | 106.6870048 | ||
KTMPVN12391 | Never Covered | 2018-08-04 19:13 | Nha Thuoc Thien Phuc | Ho Chi Minh | 10 | 4 | 10.7622278 | 106.6699374 | |||
KTMPVN12399 | 7923 | Never Covered | 2017-11-09 3:06 | Nha Thuoc Minh Chau | Ho Chi Minh | 10 | 12 | 10.7728525 | 106.665413 | ||
KTMPVN13749 | Never Covered | 2017-11-25 5:16 | Nha Thuoc Hoang Tri | Ho Chi Minh | 3 | 13 | 10.785097 | 106.678377 | |||
KTMPVN13750 | Never Covered | 2018-01-16 1:25 | Nha Thuoc Duc Thinh | Ho Chi Minh | Tan Binh | Tan Thanh | 10.787494 | 106.640947 | |||
KTMPVN13751 | 8701 | Never Covered | 2017-08-23 17:51 | Nha Thuoc Phu Thinh | Ho Chi Minh | Go Vap | 5 | 10.8283487 | 106.6898297 | ||
KTMPVN13752 | Never Covered | 2018-06-20 18:38 | Nha Thuoc Truang An | Ho Chi Minh | 7 | Phu Thuan | 10.731497 | 106.731839 | |||
KTMPVN13753 | 14091 | Never Covered | 2018-07-11 10:01 | Nha Thuoc Bao Tran | Ho Chi Minh | Phu Nhuan | 5 | 10.8043036 | 106.683745 | ||
KTMPVN13754 | Never Covered | 2018-02-09 21:56 | Nha Thuoc Minh Tam | Ho Chi Minh | 5 | 9 | 10.760286 | 106.67118 | |||
KTMPVN13755 | Never Covered | 2017-04-14 16:50 | Nha Thuoc Minh Thu | Ho Chi Minh | Binh Thanh | Binh Tri Dong | 10.75636 | 106.623667 | |||
KTMPVN13756 | Never Covered | 2018-01-19 15:31 | Nha Thuoc Tu Nhan Nam Phuong | Ho Chi Minh | Tan Phu | Hoa Thanh | 10.775237 | 106.633015 | |||
KTMPVN13757 | Other Periods | 2017-11-17 19:27 | Hieu Thuoc Tay So 1 - Cholipharco | Ho Chi Minh | 5 | 2 | 10.75829 | 106.68113 | |||
KTMPVN13758 | Other Periods | 2017-10-17 2:39 | Hieu Thuoc So 1 | Ho Chi Minh | 3 | 1 | 10.769171 | 106.677917 | |||
KTMPVN13759 | Other Periods | 2017-09-02 10:03 | Nha Thuoc Quynh Giao | Ho Chi Minh | Binh Thanh | Binh Tri Dong | 10.758138 | 106.611612 | |||
KTMPVN13760 | Other Periods | 2018-01-31 13:26 | Nha Thuoc Thanh Son | Ho Chi Minh | 1 | Nguyen Thai Binh | 10.77002 | 106.700455 | |||
KTMPVN13761 | Other Periods | 2018-09-07 1:36 | Nha Thuoc Diem Ha | Ho Chi Minh | 1 | Ben Than | 10.77186 | 106.697069 | |||
KTMPVN13762 | Other Periods | 2018-05-17 7:36 | Hieu Thuoc So 7 | Ho Chi Minh | 1 | Ben Nghe | 10.771181 | 106.702459 | |||
KTMPVN13763 | Other Periods | 2017-11-06 6:37 | Nha Thuoc Tu Nhan Hai | Ho Chi Minh | 1 | Pham Ngu Lao | 10.766903 | 106.687943 | |||
KTMPVN13764 | Other Periods | 2017-11-21 15:11 | Nha Thuoc Dang Khoa | Ho Chi Minh | 1 | Da Kao | 10.791071 | 106.696652 | |||
KTMPVN13765 | Other Periods | 2018-06-07 22:01 | Nha Thuoc Tu Nhan Da Kao | Ho Chi Minh | 1 | Da Kao | 10.792805 | 106.696823 | |||
KTMPVN13766 | Other Periods | 2018-04-21 15:28 | Nha Thuoc Chau Ngoc | Ho Chi Minh | 1 | Ben Nghe | 10.77673 | 106.6999 | |||
KTMPVN13767 | Other Periods | 2018-04-24 17:03 | Nha Thuoc Tu Nhan 183 | Ho Chi Minh | 1 | Ngu Lao | 10.766118 | 106.691269 | |||
KTMPVN13768 | Other Periods | 2018-08-02 19:40 | Hieu Thuoc So 12 | Ho Chi Minh | 1 | Ngu Lao | 10.76983 | 106.68842 | |||
KTMPVN13769 | Other Periods | 2018-09-03 14:19 | Nha Thuoc TOT (Nha Thuoc Thu Nhan Phuong Anh Cu) | Ho Chi Minh | 1 | Da Kao | 10.792765 | 106.696252 | |||
KTMPVN13770 | Other Periods | 2018-03-01 14:32 | Hieu Thuoc So 7 | Ho Chi Minh | 1 | Ben Thanh | 10.773284 | 106.698318 | |||
KTMPVN13771 | Other Periods | 2017-10-20 12:24 | Nha Thuoc Ngoc Duyen | Ho Chi Minh | 1 | Da Kao | 10.791822 | 106.700154 | |||
KTMPVN13772 | Other Periods | 2018-01-24 2:46 | Nha Thuoc Hong An | Ho Chi Minh | 1 | Cau Kho | 10.758499 | 106.688412 | |||
KTMPVN13773 | Other Periods | 2017-09-01 16:10 | Nha Thuoc Minh Tam | Ho Chi Minh | 10 | 8 | 10.765563 | 106.666625 |