Row charts

forked from renauld94's block: Stacked and rowcharts

forked from renauld94's block: Row charts

<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 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>

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

var districtnamechart = dc.rowChart("#Districtname"),
		  popnamechart = dc.rowChart("#pop"),
		  //visCount = dc.dataCount(".dc-data-count"),
		  //visTable = dc.dataTable(".dc-data-table"),
		  //yearchart = dc.pieChart("dateDim"),
      commonChartBarColor = '#0063c6';

d3.csv("data.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 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 districtDIM = ndx.dimension(function (d) { return d["district"]; })
			  ;
			var popDIM = ndx.dimension(function (d) { return d["pop"]; 
			  });
      
      //visCount.dimension(ndx).group(all);

var districtgroup = districtDIM.group();
			var popgroup = popDIM.group();
			var dateGroup = dateDim.group();

districtnamechart
			 	.height(350)
			 	.width(300)
      	.colors(commonChartBarColor)
				.dimension(districtDIM)
				.group(districtgroup)
				.elasticX(true);

popnamechart
				.dimension(popDIM)
				.height(100)
				.width(700)
				.group(popgroup)
				.elasticX(true)

dc.renderAll();
			
			});

</script>
</body>
</html>

https://unpkg.com/crossfilter2@1.4/crossfilter.js

https://unpkg.com/d3@3/d3.js

https://unpkg.com/dc@2/dc.js