gordonwoodhull · September 24, 2018 15:34
diff --git a/.block b/.block
 license: mit
 height: 1000
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Sanisphere</title>
  	<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 class="container-fluid">
 		<div class="row">
 			 <div class="col-xs-12 dc-data-count dc-chart" id="data-count">
 				<h1>Ho Chi Minh City: Pharmacies Universe and Sanisphere Coverage</h1>
 				<small>
 				<span class="filter-count"></span> selected out of <span class="total-count"></span> records |
           		<a id="all" href="#">Reset All</a>
           	 </span>
           	</small>
 		  </h2>	
 		 </div>
 	   </div>
 	   <div class="row" id="control-row">
 	   	<div class="col-xs-2 pie-chart">
 	   	<h4>Year <small><a id="year">reset</a></small></h4>
 	   	<div class="dc-chart" id="chart-ring-year"></div>
 	   	</div>
 	   <div class="col-xs-2 pie-chart">
      	 <h4>Month <small><a id="month" href="#">reset</a></small></h4>
      	 <div class="dc-chart" id="chart-ring-month"></div>
       </div>
       <div class="col-xs-6">
       	<h4>Pharmacies</h4>
       	<div id="map"></div>
       	</div>
       </div>
 	   <div class="row">
        <div class="col-xs-6 col-md-3">
          <div class="dc-chart" id="chart-rating-count"></div>
        </div>
       <div class="col-xs-6 col-md-3">
      <div class="dc-chart" id="chart-community-rating-count"></div>
    </div>
    <div class="col-xs-6 col-md-3">
      <div class="dc-chart" id="chart-abv-count"></div>
    </div>
    <div class="col-xs-6 col-md-3">
      <div class="dc-chart" id="chart-ibu-count"></div>
    </div>

    
 	//CHART DISTRICT
 				
 	<div id="Districtname">
 	  <strong>District Name</strong>
      <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>

     //CHARTWARD

 	</div>
 	<div id="wardname">
 	  <strong>Ward Name</strong>
      <span class="reset" style="display: none;">Selected: <span class="filter">	
      </span></span>
      <a class="reset" href="
      javascript:wardnamechart.filterAll();dc.redrawAll();" style="display:
         none;">reset</a>

        <div class="clearfix"></div>

     //CHART COVERAGE

 	</div>
 		<div id="pop">
 		  <strong>Coverage Sanisphere</strong>
 	      <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: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
 	    }).addTo(mymap);


 	</script>

 	</body>

 	</htmlFeatureGroup>

              // TOTAL COUNT AND RESET 

     </div>

 	 <div>
        <div class="dc-data-count">
            <span class="filter-count"></span> selected out of <span class="total-count"></span> records | <a
                href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
    </div>
    </div>
    <table class="table table-hover dc-data-table">
    </table>


    </div>
    </div>



 	<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();
 		
 		


 			districtnamechart
 			 	.height(200)
 			 	.width(300)
 				.dimension(districtDIM)
 				.group(districtgroup)
 				.elasticX(true);

 			wardnamechart
 				.height(200)
      .width(300)
 				.dimension(wardDIM)
 				.group(wardgroup)
 				.elasticX(true)
 				.data(function (group) { return group.top(20); });

 			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>
diff --git a/universe_test.csv b/universe_test.csv
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Sanisphere</title>
	<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 class="container-fluid">
	<div class="row">
	<div class="col-xs-12 dc-data-count dc-chart" id="data-count">
	<h1>Ho Chi Minh City: Pharmacies Universe and Sanisphere Coverage</h1>
	<small>
	<span class="filter-count"></span> selected out of <span class="total-count"></span> records \|
	<a id="all" href="#">Reset All</a>
	</span>
	</small>
	</h2>
	</div>
	</div>
	<div class="row" id="control-row">
	<div class="col-xs-2 pie-chart">
	<h4>Year <small><a id="year">reset</a></small></h4>
	<div class="dc-chart" id="chart-ring-year"></div>
	</div>
	<div class="col-xs-2 pie-chart">
	<h4>Month <small><a id="month" href="#">reset</a></small></h4>
	<div class="dc-chart" id="chart-ring-month"></div>
	</div>
	<div class="col-xs-6">
	<h4>Pharmacies</h4>
	<div id="map"></div>
	</div>
	</div>
	<div class="row">
	<div class="col-xs-6 col-md-3">
	<div class="dc-chart" id="chart-rating-count"></div>
	</div>
	<div class="col-xs-6 col-md-3">
	<div class="dc-chart" id="chart-community-rating-count"></div>
	</div>
	<div class="col-xs-6 col-md-3">
	<div class="dc-chart" id="chart-abv-count"></div>
	</div>
	<div class="col-xs-6 col-md-3">
	<div class="dc-chart" id="chart-ibu-count"></div>
	</div>


	//CHART DISTRICT

	<div id="Districtname">
	<strong>District Name</strong>
	<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>

	//CHARTWARD

	</div>
	<div id="wardname">
	<strong>Ward Name</strong>
	<span class="reset" style="display: none;">Selected: <span class="filter">
	</span></span>
	<a class="reset" href="
	javascript:wardnamechart.filterAll();dc.redrawAll();" style="display:
	none;">reset</a>

	<div class="clearfix"></div>

	//CHART COVERAGE

	</div>
	<div id="pop">
	<strong>Coverage Sanisphere</strong>
	<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>

	</htmlFeatureGroup>

	// TOTAL COUNT AND RESET

	</div>

	<div>
	<div class="dc-data-count">
	<span class="filter-count"></span> selected out of <span class="total-count"></span> records \| <a
	href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
	</div>
	</div>
	<table class="table table-hover dc-data-table">
	</table>


	</div>
	</div>



	<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();




	districtnamechart
	.height(200)
	.width(300)
	.dimension(districtDIM)
	.group(districtgroup)
	.elasticX(true);

	wardnamechart
	.height(200)
	.width(300)
	.dimension(wardDIM)
	.group(wardgroup)
	.elasticX(true)
	.data(function (group) { return group.top(20); });

	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>