hungryzi · October 15, 2014 04:19
diff --git a/README.mkd b/README.mkd
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Vietnam Sex Ratio At Birth</title>
    <meta charset="utf-8">
    <style>
      body {
        font-family: "Trebuchet MS", Helvetica, sans-serif;
      }
      .boundary {
        fill: none;
        stroke: #777;
        stroke-dasharray: 2,2;
        stroke-linejoin: round;
      }
      path {
        stroke: white;
        stroke-width: 0.1px;
      }

      path:hover {
        stroke-width: 2px;
      }

      .background {
        fill: none;
        pointer-events: all;
      }
      #map {
        position: relative;
        background: #eee;
      }
      #controls {
        position: absolute;
        right: 10px;
        top: 10px;
        width: 34%;
        float: left;
        background: #fff;
        padding: 10px;
      }
      .square {
        width: 20px;
        height: 20px;
        display: inline-block;
      }
    </style>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
  </head>

  <body>
    <h3>Sex Ratio at Birth in Vietnam</h3>
    <div id="map"></div>
    <script src="sex_ratio_at_birth.js"></script>
  </body>
 </html>
diff --git a/sex_ratio_at_birth.js b/sex_ratio_at_birth.js
 var width = 960,
 height = 1160,
 centered;

 var sexRatioByProvince = d3.map();

 var svg = d3.select("#map")
              .append("svg")
                .attr("width", width)
                .attr("height", height);

 var years = [1999, 2009];
 var currentYear = 2009;

 var bucketOptions = [
  { label: 'Normal', color: '#fee8c8', visibility: true },
  { label: 'High', color: '#fdbb84', visibility: true },
  { label: 'Very High', color: '#e34a33', visibility: true }
 ];
 var buckets = [[],[],[]];

 queue()
  .defer(d3.json,"vietnam_adm2.json")
  .defer(d3.csv,
          "data/sex_ratio_at_birth_by_province.csv",
          function(d){
            sexRatioByProvince.set(d.id, { 1999: d['1999'], 2009: d['2009'] });
          }
        )
  .await(initializeViz);

 function colorBucket(d) {
  var ratios = sexRatioByProvince.get(d.id);
  if (ratios) {
    var bucket = +ratios[currentYear];
    if (!isNaN(bucket)) {
      if (bucketOptions[bucket].visibility) {
        return bucketOptions[bucket].color;
      }
    }
  }

  return '#ccc';
 }

 function updateAll() {
  updateBuckets();
  updateMap();
 }

 function updateMap() {
  svg.selectAll("path")
      .attr("fill", colorBucket);
 }

 function updateBuckets() {
  resetBuckets();

  svg.selectAll("path")
        .each(function(d){
          var ratios = sexRatioByProvince.get(d.id);
          if (ratios) {
            var bucket = +ratios[currentYear];
            if (!isNaN(bucket)) {
              buckets[bucket].push(d.id);
            }
          }
        });

  for (var i=0; i <= 2; i++) {
    var div = d3.select('.bucket-'+i);
    div.select('.filter')
        .property('checked', bucketOptions[i].visibility);
    div.select('.size')
        .text('('+buckets[i].length+')');
    listProvinces(i);
  }
 }

 function listProvinces(bucket) {
  var ul = d3.select('.provinces-' + bucket).html('');
  var lis = ul.selectAll('li').data(buckets[bucket]);
  lis.enter()
      .append('li')
      .text(function(d) { return d; });
  lis.exit()
      .remove();
 }

 function initializeViz(error, topojsonFile, data) {
  initializeControls();
  initializeMap(topojsonFile);
  updateAll();
 }

 function initializeMap(topojsonFile) {
  svg.append("rect")
    .attr("fill", "#eee")
    .attr("width", width)
    .attr("height", height);

  var projection = d3.geo.mercator()
                      .center([107,11])
                      .scale(2490)
                      .translate([width/2,height/2]);

  var path = d3.geo.path().projection(projection);

  var provinces = topojson.feature(topojsonFile, topojsonFile.objects.VNM_adm2).features;

  var g = svg.append("g");

  g.append("g")
    .selectAll("path")
    .data(provinces)
    .enter()
      .append("path")
      .attr("id",function(d) { return d.id; })
      .attr("d",path)
      .append("title")
      .text(function(d) { return d.id; });
 }

 function updateYear(year) {
  currentYear = year;
  resetBucketVisibility();
  updateAll();
 }

 function toggleBucket(bucket, visibility) {
  bucketOptions[bucket].visibility = visibility;
  updateMap();
 }

 function resetBuckets() {
  buckets = [[],[],[]];
  return buckets;
 }

 function resetBucketVisibility() {
  for (var i=0; i<=2; i++) {
    bucketOptions[i].visibility = true;
  }
 }

 function initializeControls() {
  var controls = d3.select('#map')
                      .append('div')
                        .attr('id', 'controls');
  initializeYearFilters(controls);
  initializeBucketFilters(controls);
 }

 function initializeYearFilters(controls) {
  var div = controls.append('div');
  for (var i=0; i<years.length; i++) {
    div.append('input')
          .attr('type', 'radio')
          .attr('name', 'year')
          .classed('filter-year', true)
          .attr('value', years[i])
          .property('checked', years[i] == currentYear)
          .on('change', function() {
            var year = d3.select(this).attr('value');
            updateYear(year);
            return false;
          });
    div.append('label')
          .text(years[i]);
  }
 }

 function initializeBucketFilters(controls) {
  var bucketFilters = controls.append('ul');
  for (var i=0; i <= 2; i++) {
    var label = bucketOptions[i].label;
    var color = bucketOptions[i].color;

    var li = bucketFilters.append('li');
    var div = li.append('div')
                  .classed('bucket-'+i, true);
    div.append('input')
          .attr('type', 'checkbox')
          .attr('data-bucket', i)
          .classed('filter', true)
          .property('checked', bucketOptions[i].visibility)
          .on('change', function() {
            var bucket = parseInt(d3.select(this).attr('data-bucket'));
            var visibility = d3.select(this).property('checked');
            toggleBucket(bucket, visibility);
            return false;
          });
    div.append('span')
          .classed('square', true)
          .style('background-color', color);
    div.append('label')
          .text(label);
    div.append('span')
          .classed('size', true)
          .text('(' + buckets[i].length + ')');

    li.append('ul')
        .classed('provinces-' + i, true);
  }
 }
diff --git a/sex_ratio_at_birth_by_province.csv b/sex_ratio_at_birth_by_province.csv
diff --git a/vietnam_adm2.json b/vietnam_adm2.json
	<!DOCTYPE html>
	<html>
	<head>
	<title>Vietnam Sex Ratio At Birth</title>
	<meta charset="utf-8">
	<style>
	body {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	}
	.boundary {
	fill: none;
	stroke: #777;
	stroke-dasharray: 2,2;
	stroke-linejoin: round;
	}
	path {
	stroke: white;
	stroke-width: 0.1px;
	}

	path:hover {
	stroke-width: 2px;
	}

	.background {
	fill: none;
	pointer-events: all;
	}
	#map {
	position: relative;
	background: #eee;
	}
	#controls {
	position: absolute;
	right: 10px;
	top: 10px;
	width: 34%;
	float: left;
	background: #fff;
	padding: 10px;
	}
	.square {
	width: 20px;
	height: 20px;
	display: inline-block;
	}
	</style>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	</head>

	<body>
	<h3>Sex Ratio at Birth in Vietnam</h3>
	<div id="map"></div>
	<script src="sex_ratio_at_birth.js"></script>
	</body>
	</html>
	var width = 960,
	height = 1160,
	centered;

	var sexRatioByProvince = d3.map();

	var svg = d3.select("#map")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	var years = [1999, 2009];
	var currentYear = 2009;

	var bucketOptions = [
	{ label: 'Normal', color: '#fee8c8', visibility: true },
	{ label: 'High', color: '#fdbb84', visibility: true },
	{ label: 'Very High', color: '#e34a33', visibility: true }
	];
	var buckets = [[],[],[]];

	queue()
	.defer(d3.json,"vietnam_adm2.json")
	.defer(d3.csv,
	"data/sex_ratio_at_birth_by_province.csv",
	function(d){
	sexRatioByProvince.set(d.id, { 1999: d['1999'], 2009: d['2009'] });
	}
	)
	.await(initializeViz);

	function colorBucket(d) {
	var ratios = sexRatioByProvince.get(d.id);
	if (ratios) {
	var bucket = +ratios[currentYear];
	if (!isNaN(bucket)) {
	if (bucketOptions[bucket].visibility) {
	return bucketOptions[bucket].color;
	}
	}
	}

	return '#ccc';
	}

	function updateAll() {
	updateBuckets();
	updateMap();
	}

	function updateMap() {
	svg.selectAll("path")
	.attr("fill", colorBucket);
	}

	function updateBuckets() {
	resetBuckets();

	svg.selectAll("path")
	.each(function(d){
	var ratios = sexRatioByProvince.get(d.id);
	if (ratios) {
	var bucket = +ratios[currentYear];
	if (!isNaN(bucket)) {
	buckets[bucket].push(d.id);
	}
	}
	});

	for (var i=0; i <= 2; i++) {
	var div = d3.select('.bucket-'+i);
	div.select('.filter')
	.property('checked', bucketOptions[i].visibility);
	div.select('.size')
	.text('('+buckets[i].length+')');
	listProvinces(i);
	}
	}

	function listProvinces(bucket) {
	var ul = d3.select('.provinces-' + bucket).html('');
	var lis = ul.selectAll('li').data(buckets[bucket]);
	lis.enter()
	.append('li')
	.text(function(d) { return d; });
	lis.exit()
	.remove();
	}

	function initializeViz(error, topojsonFile, data) {
	initializeControls();
	initializeMap(topojsonFile);
	updateAll();
	}

	function initializeMap(topojsonFile) {
	svg.append("rect")
	.attr("fill", "#eee")
	.attr("width", width)
	.attr("height", height);

	var projection = d3.geo.mercator()
	.center([107,11])
	.scale(2490)
	.translate([width/2,height/2]);

	var path = d3.geo.path().projection(projection);

	var provinces = topojson.feature(topojsonFile, topojsonFile.objects.VNM_adm2).features;

	var g = svg.append("g");

	g.append("g")
	.selectAll("path")
	.data(provinces)
	.enter()
	.append("path")
	.attr("id",function(d) { return d.id; })
	.attr("d",path)
	.append("title")
	.text(function(d) { return d.id; });
	}

	function updateYear(year) {
	currentYear = year;
	resetBucketVisibility();
	updateAll();
	}

	function toggleBucket(bucket, visibility) {
	bucketOptions[bucket].visibility = visibility;
	updateMap();
	}

	function resetBuckets() {
	buckets = [[],[],[]];
	return buckets;
	}

	function resetBucketVisibility() {
	for (var i=0; i<=2; i++) {
	bucketOptions[i].visibility = true;
	}
	}

	function initializeControls() {
	var controls = d3.select('#map')
	.append('div')
	.attr('id', 'controls');
	initializeYearFilters(controls);
	initializeBucketFilters(controls);
	}

	function initializeYearFilters(controls) {
	var div = controls.append('div');
	for (var i=0; i<years.length; i++) {
	div.append('input')
	.attr('type', 'radio')
	.attr('name', 'year')
	.classed('filter-year', true)
	.attr('value', years[i])
	.property('checked', years[i] == currentYear)
	.on('change', function() {
	var year = d3.select(this).attr('value');
	updateYear(year);
	return false;
	});
	div.append('label')
	.text(years[i]);
	}
	}

	function initializeBucketFilters(controls) {
	var bucketFilters = controls.append('ul');
	for (var i=0; i <= 2; i++) {
	var label = bucketOptions[i].label;
	var color = bucketOptions[i].color;

	var li = bucketFilters.append('li');
	var div = li.append('div')
	.classed('bucket-'+i, true);
	div.append('input')
	.attr('type', 'checkbox')
	.attr('data-bucket', i)
	.classed('filter', true)
	.property('checked', bucketOptions[i].visibility)
	.on('change', function() {
	var bucket = parseInt(d3.select(this).attr('data-bucket'));
	var visibility = d3.select(this).property('checked');
	toggleBucket(bucket, visibility);
	return false;
	});
	div.append('span')
	.classed('square', true)
	.style('background-color', color);
	div.append('label')
	.text(label);
	div.append('span')
	.classed('size', true)
	.text('(' + buckets[i].length + ')');

	li.append('ul')
	.classed('provinces-' + i, true);
	}
	}
id	1999	2009
An Giang	2	1
Bà Rịa - Vũng Tàu	1	1
Bắc Giang	0	2
Bắc Kạn	0	0
Bạc Liêu	2	1
Bắc Ninh	0	2
Bến Tre	1	1
Bình Định	1	1
Bình Dương	1	0
Bình Phước	2	1
Bình Thuận	0	1
Cà Mau	1	1
Cần Thơ	1	1
Cao Bằng	2	0
Đà Nẵng	1	0
Đắk Lắk	0	0
Đắk Nông		0
Điện Biên		0
Đồng Nai	0	1
Đồng Tháp	0	1
Gia Lai	1	0
Hà Giang	1	0
Hà Nam	1	1
Hà Nội	1	1
Hà Tĩnh	1	0
Hải Dương	2	2
Hải Phòng	2	2
Hậu Giang		1
Hoà Bình	1	2
Hưng Yên	0	2
Khánh Hoà	1	1
Kiên Giang	2	1
Kon Tum	2	0
Lai Châu	2	0
Lâm Đồng	0	1
Lạng Sơn	1	0
Lào Cai	0	1
Long An	1	0
Nam Định	0	2
Nghệ An	0	0
Ninh Bình	0	1
Ninh Thuận	2	1
Phú Thọ	2	1
Phú Yên	0	1
Quảng Bình	1	0
Quảng Nam	0	1
Quảng Ngãi	0	2
Quảng Ninh	2	2
Quảng Trị	0	0
Sóc Trăng	2	1
Sơn La	2	0
Tây Ninh	0	1
Thái Bình	0	1
Thái Nguyên	1	1
Thanh Hoá	2	1
Thừa Thiên - Huế	0	1
Tiền Giang	0	1
Thành phố Hồ Chí Minh	1	1
Trà Vinh	2	1
Tuyên Quang	1	0
Vĩnh Long	0	1
Vĩnh Phúc	0	1
Yên Bái	1	1