yanhann10 · April 25, 2018 16:18
diff --git a/.block b/.block
 license: mit
diff --git a/README.md b/README.md
diff --git a/costOfBeingFat.csv b/costOfBeingFat.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>d3-voronoi-treemap usage</title>
    <meta name="description" content="d3-voronoi-map plugin to remake 'The Costs of Being Fat, in Actual Dollars'">
    <script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
    <script src="https://raw.githack.com/Kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js"></script>
    <script src="https://raw.githack.com/Kcnarf/d3-voronoi-map/master/build/d3-voronoi-map.js"></script>
    <style>
      svg {
        background-color: rgb(250,250,250);
      }
      
      #title {
        letter-spacing: 4px;
        font-weight: 700;
        font-size: x-large;
      }
      
      text.tiny {
        font-size: 10pt;
      }
      text.light {
        fill: lightgrey
      }
      
      .symbol {
        fill: none;
        stroke: lightgrey;
        stroke-width: 14px;
      }
      
      .cell {
        stroke: darkgrey;
        stroke-width: 1px;
      }
      
      .cost {
        text-anchor: middle;
      }
      
      .total-cost {
        fill: lightgrey;
        text-anchor: middle;
        font-size: 20px;
        font-weight: 700;
      }
      
      .legend-color {
        stroke-width: 1px;
        stroke:darkgrey;
      }
      
      .highlighter {
        fill: transparent;
        stroke: none;
      }
      .highlight {
        stroke: black;
        stroke-width: 2px;
      }
    </style>
  </head>
  <body>
    <svg></svg>
    
    <script>
      //begin: constants
      var _2PI = 2*Math.PI;
      //end: constants
      
      //begin: raw data global def
      var menTotalCost = 0,
          womenTotalCost = 0;
      //end: raw data global def
      
      //begin: data-related utils
      function menCostAccessor(d){ return d.menCost; };
      function womenCostAccessor(d){ return d.womenCost; };
      function highlighterGroup(d){ return "group-"+d.id};
      //end: data-related utils
      
      //begin: layout conf.
      var svgWidth = 960,
          svgHeight = 500,
          margin = {top: 10, right: 10, bottom: 10, left: 10},
          height = svgHeight - margin.top - margin.bottom,
          width = svgWidth - margin.left - margin.right,
          halfWidth = width/2,
          halfHeight = height/2,
          quarterWidth = width/4,
          quarterHeight = height/4,
          titleY = 20,
          legendsMinY = height - 20,
          menTreemapCenter = [300, 200],
          womenTreemapCenter = [650, 200];
      //end: layout conf.
      
      //begin: treemap conf.
      var baseRadius = 100;
      var _voronoiMap = d3.voronoiMap();
      var menRadius, womenRadius,
          menCirclingPolygon, womenCirclingPolygon,
          menPolygons, womenPolygons;
      //end: treemap conf.
      
      //begin: reusable d3Selection
      var svg, drawingArea, menContainer;
      //end: reusable d3Selection
      
      d3.csv("costOfBeingFat.csv", csvParser, function(error, data) {
        if (error) throw error;
        
        initData();
        initLayout();
        drawLegends(data);
        
        menPolygons = _voronoiMap
          .clip(menCirclingPolygon)
          .weight(menCostAccessor)
          (data.filter( function(d){ return menCostAccessor(d)>0; })).polygons;
        womenPolygons = _voronoiMap
          .clip(womenCirclingPolygon)
          .weight(womenCostAccessor)
          (data.filter( function(d){ return womenCostAccessor(d)>0; })).polygons;
        
        drawTreemap("men");
        
        attachMouseListener(data);
      });

      function csvParser(d) {
        d.id = +d.id;
        d.composition = d.composition;
        d.menCost = +d.menCost;
        d.womenCost = +d.womenCost;
        d.color = d.color;
        
        menTotalCost += d.menCost;
        womenTotalCost += d.womenCost;
        return d;
      };
      
      function initData() {
        menRadius = baseRadius;
        womenRadius = baseRadius*Math.sqrt(womenTotalCost/menTotalCost);
        menCirclingPolygon = computeCirclingPolygon(menRadius);
        womenCirclingPolygon = computeCirclingPolygon(womenRadius);
      }
      
      function computeCirclingPolygon(radius) {
        var points = 60,
            increment = _2PI/points,
            circlingPolygon = [];
        
        for (var a=0, i=0; i<points; i++, a+=increment) {
          circlingPolygon.push(
            [radius*Math.cos(a), radius*Math.sin(a)]
          )
        }
        
        return circlingPolygon;
      };
      
      function initLayout() {
        svg = d3.select("svg")
          .attr("width", svgWidth)
          .attr("height", svgHeight);
        
        drawingArea = svg.append("g")
          .classed("drawingArea", true)
          .attr("transform", "translate("+[margin.left,margin.top]+")");
        
        menContainer = drawingArea.append("g")
          .classed("men-container", true)
          .attr("transform", "translate("+menTreemapCenter+")");
        
        
        drawTitle();
        drawFooter();

      }
      
      function drawTitle() {
        drawingArea.append("text")
          .attr("id", "title")
          .attr("transform", "translate("+[halfWidth, titleY]+")")
          .attr("text-anchor", "middle")
          .text("The Individual Costs of Being Obese in the U.S. (2010)")
      }
      
      function drawFooter() {
        drawingArea.append("text")
          .classed("tiny light", true)
          .attr("transform", "translate("+[0, height]+")")
          .attr("text-anchor", "start")
          .text("Remake of HowMuch.net's post 'The Costs of Being Fat, in Actual Dollars'")
        drawingArea.append("text")
          .classed("tiny light", true)
          .attr("transform", "translate("+[halfWidth+45, height]+")")
          .attr("text-anchor", "middle")
          .text("by @_Kcnarf")
        drawingArea.append("text")
          .classed("tiny light", true)
          .attr("transform", "translate("+[width, height]+")")
          .attr("text-anchor", "end")
          .text("bl.ocks.org/Kcnarf/238fa136f763f5ad908271a170ef60e2")
      }
      
      function drawLegends(data) {
        var legendHeight = 13,
            interLegend = 4,
            colorWidth = legendHeight*4;
        
        var legendContainer = drawingArea.append("g")
          .classed("legend", true)
          .attr("transform", "translate("+[0, legendsMinY]+")");
        
        var legends = legendContainer.selectAll(".legend")
          .data(data.reverse())
          .enter();
        
        var legend = legends.append("g")
          .classed("legend", true)
          .attr("transform", function(d,i){
            return "translate("+[0, -i*(legendHeight+interLegend)]+")";
          })
          
        legend.append("rect")
          .classed("legend-color", true)
          .attr("y", -legendHeight)
          .attr("width", colorWidth)
          .attr("height", legendHeight)
          .style("fill", function(d){ return d.color; });
        legend.append("text")
          .classed("tiny", true)
          .attr("transform", "translate("+[colorWidth+5, -2]+")")
          .text(function(d){ return d.composition; });
        legend.append("rect")
          .attr("class", highlighterGroup)
          .classed("highlighter", true)
          .attr("y", -legendHeight)
          .attr("width", colorWidth)
          .attr("height", legendHeight);
        
        legendContainer.append("text")
          .attr("transform", "translate("+[0, -data.length*(legendHeight+interLegend)-5]+")")
          .text("Annual costs of being obese");
      }
      
    
      
      function drawTreemap(gender) {
        var container, polygons, costAccessor, delta, totalCost, totalCostRotation;
        
        if (gender==="men") {
          container = menContainer;
          polygons = menPolygons;
          costAccessor = menCostAccessor;
          delta = menRadius;
          totalCost = "$"+menTotalCost;
          totalCostRotation = -45;
        } else {
          container = womenContainer;
          polygons = womenPolygons;
          costAccessor = womenCostAccessor;
          delta = womenRadius;
          totalCost = "$"+womenTotalCost;
          totalCostRotation = 45;
        }
        
        var cells = container.append("g")
          .classed('cells', true)
          .selectAll(".cell")
          .data(polygons)
          .enter()
            .append("path")
              .classed("cell", true)
              .attr("d", function(d){ return "M"+d.join(",")+"z"; })
              .style("fill", function(d){
                return d.site.originalObject.data.originalData.color;
              });
        
        container.append("text")
          .classed("total-cost", true)
          .attr("transform", "rotate("+totalCostRotation+")translate(0,"+(-delta-6)+")")
          .text(totalCost);
        
        var costs = container.append("g")
          .classed('costs', true)
          .selectAll(".cost")
          .data(polygons)
          .enter()
            .append("text")
              .classed("cost", true)
              .attr("transform", function(d){
                return "translate("+[d.site.x, d.site.y+6]+")"; // +6 for centering
              })
              .text(function(d){
                return "$"+costAccessor(d.site.originalObject.data.originalData);
              })
        
        var higlighters = container.append("g")
          .classed('highlighters', true)
          .selectAll(".highlighter")
          .data(polygons)
          .enter()
            .append("path")
              .attr("class", function(d) {
                return highlighterGroup(d.site.originalObject.data.originalData);
              })
              .classed("highlighter", true)
              .attr("d", function(d){ return "M"+d.join(",")+"z"; });
      }

    </script>
  </body>
 </html>
diff --git a/rice_consumption_region.csv b/rice_consumption_region.csv
diff --git a/rice_prod_use.csv b/rice_prod_use.csv
id	composition	menCost	womenCost	color
0	Wage Discrimination	0	1855	#b5a8d8
1	Direct Medical	1474	1474	#bfe5df
2	Short-term Disability	389	309	#a3c5cb
3	Productivity (Presenteeism)	358	358	#abb6ab
4	Sick Leave (Absenteeism)	212	674	#b7d8a9
5	Life Insurance	121	121	#ffe7a4
6	Disability Pension Insurance	69	69	#f7c098
7	Gasoline for cars	23	21	#f3a39c
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>d3-voronoi-treemap usage</title>
	<meta name="description" content="d3-voronoi-map plugin to remake 'The Costs of Being Fat, in Actual Dollars'">
	<script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script>
	<script src="https://raw.githack.com/Kcnarf/d3-weighted-voronoi/master/build/d3-weighted-voronoi.js"></script>
	<script src="https://raw.githack.com/Kcnarf/d3-voronoi-map/master/build/d3-voronoi-map.js"></script>
	<style>
	svg {
	background-color: rgb(250,250,250);
	}

	#title {
	letter-spacing: 4px;
	font-weight: 700;
	font-size: x-large;
	}

	text.tiny {
	font-size: 10pt;
	}
	text.light {
	fill: lightgrey
	}

	.symbol {
	fill: none;
	stroke: lightgrey;
	stroke-width: 14px;
	}

	.cell {
	stroke: darkgrey;
	stroke-width: 1px;
	}

	.cost {
	text-anchor: middle;
	}

	.total-cost {
	fill: lightgrey;
	text-anchor: middle;
	font-size: 20px;
	font-weight: 700;
	}

	.legend-color {
	stroke-width: 1px;
	stroke:darkgrey;
	}

	.highlighter {
	fill: transparent;
	stroke: none;
	}
	.highlight {
	stroke: black;
	stroke-width: 2px;
	}
	</style>
	</head>
	<body>
	<svg></svg>

	<script>
	//begin: constants
	var _2PI = 2*Math.PI;
	//end: constants

	//begin: raw data global def
	var menTotalCost = 0,
	womenTotalCost = 0;
	//end: raw data global def

	//begin: data-related utils
	function menCostAccessor(d){ return d.menCost; };
	function womenCostAccessor(d){ return d.womenCost; };
	function highlighterGroup(d){ return "group-"+d.id};
	//end: data-related utils

	//begin: layout conf.
	var svgWidth = 960,
	svgHeight = 500,
	margin = {top: 10, right: 10, bottom: 10, left: 10},
	height = svgHeight - margin.top - margin.bottom,
	width = svgWidth - margin.left - margin.right,
	halfWidth = width/2,
	halfHeight = height/2,
	quarterWidth = width/4,
	quarterHeight = height/4,
	titleY = 20,
	legendsMinY = height - 20,
	menTreemapCenter = [300, 200],
	womenTreemapCenter = [650, 200];
	//end: layout conf.

	//begin: treemap conf.
	var baseRadius = 100;
	var _voronoiMap = d3.voronoiMap();
	var menRadius, womenRadius,
	menCirclingPolygon, womenCirclingPolygon,
	menPolygons, womenPolygons;
	//end: treemap conf.

	//begin: reusable d3Selection
	var svg, drawingArea, menContainer;
	//end: reusable d3Selection

	d3.csv("costOfBeingFat.csv", csvParser, function(error, data) {
	if (error) throw error;

	initData();
	initLayout();
	drawLegends(data);

	menPolygons = _voronoiMap
	.clip(menCirclingPolygon)
	.weight(menCostAccessor)
	(data.filter( function(d){ return menCostAccessor(d)>0; })).polygons;
	womenPolygons = _voronoiMap
	.clip(womenCirclingPolygon)
	.weight(womenCostAccessor)
	(data.filter( function(d){ return womenCostAccessor(d)>0; })).polygons;

	drawTreemap("men");

	attachMouseListener(data);
	});

	function csvParser(d) {
	d.id = +d.id;
	d.composition = d.composition;
	d.menCost = +d.menCost;
	d.womenCost = +d.womenCost;
	d.color = d.color;

	menTotalCost += d.menCost;
	womenTotalCost += d.womenCost;
	return d;
	};

	function initData() {
	menRadius = baseRadius;
	womenRadius = baseRadius*Math.sqrt(womenTotalCost/menTotalCost);
	menCirclingPolygon = computeCirclingPolygon(menRadius);
	womenCirclingPolygon = computeCirclingPolygon(womenRadius);
	}

	function computeCirclingPolygon(radius) {
	var points = 60,
	increment = _2PI/points,
	circlingPolygon = [];

	for (var a=0, i=0; i<points; i++, a+=increment) {
	circlingPolygon.push(
	[radiusMath.cos(a), radiusMath.sin(a)]
	)
	}

	return circlingPolygon;
	};

	function initLayout() {
	svg = d3.select("svg")
	.attr("width", svgWidth)
	.attr("height", svgHeight);

	drawingArea = svg.append("g")
	.classed("drawingArea", true)
	.attr("transform", "translate("+[margin.left,margin.top]+")");

	menContainer = drawingArea.append("g")
	.classed("men-container", true)
	.attr("transform", "translate("+menTreemapCenter+")");


	drawTitle();
	drawFooter();

	}

	function drawTitle() {
	drawingArea.append("text")
	.attr("id", "title")
	.attr("transform", "translate("+[halfWidth, titleY]+")")
	.attr("text-anchor", "middle")
	.text("The Individual Costs of Being Obese in the U.S. (2010)")
	}

	function drawFooter() {
	drawingArea.append("text")
	.classed("tiny light", true)
	.attr("transform", "translate("+[0, height]+")")
	.attr("text-anchor", "start")
	.text("Remake of HowMuch.net's post 'The Costs of Being Fat, in Actual Dollars'")
	drawingArea.append("text")
	.classed("tiny light", true)
	.attr("transform", "translate("+[halfWidth+45, height]+")")
	.attr("text-anchor", "middle")
	.text("by @_Kcnarf")
	drawingArea.append("text")
	.classed("tiny light", true)
	.attr("transform", "translate("+[width, height]+")")
	.attr("text-anchor", "end")
	.text("bl.ocks.org/Kcnarf/238fa136f763f5ad908271a170ef60e2")
	}

	function drawLegends(data) {
	var legendHeight = 13,
	interLegend = 4,
	colorWidth = legendHeight*4;

	var legendContainer = drawingArea.append("g")
	.classed("legend", true)
	.attr("transform", "translate("+[0, legendsMinY]+")");

	var legends = legendContainer.selectAll(".legend")
	.data(data.reverse())
	.enter();

	var legend = legends.append("g")
	.classed("legend", true)
	.attr("transform", function(d,i){
	return "translate("+[0, -i*(legendHeight+interLegend)]+")";
	})

	legend.append("rect")
	.classed("legend-color", true)
	.attr("y", -legendHeight)
	.attr("width", colorWidth)
	.attr("height", legendHeight)
	.style("fill", function(d){ return d.color; });
	legend.append("text")
	.classed("tiny", true)
	.attr("transform", "translate("+[colorWidth+5, -2]+")")
	.text(function(d){ return d.composition; });
	legend.append("rect")
	.attr("class", highlighterGroup)
	.classed("highlighter", true)
	.attr("y", -legendHeight)
	.attr("width", colorWidth)
	.attr("height", legendHeight);

	legendContainer.append("text")
	.attr("transform", "translate("+[0, -data.length*(legendHeight+interLegend)-5]+")")
	.text("Annual costs of being obese");
	}



	function drawTreemap(gender) {
	var container, polygons, costAccessor, delta, totalCost, totalCostRotation;

	if (gender==="men") {
	container = menContainer;
	polygons = menPolygons;
	costAccessor = menCostAccessor;
	delta = menRadius;
	totalCost = "$"+menTotalCost;
	totalCostRotation = -45;
	} else {
	container = womenContainer;
	polygons = womenPolygons;
	costAccessor = womenCostAccessor;
	delta = womenRadius;
	totalCost = "$"+womenTotalCost;
	totalCostRotation = 45;
	}

	var cells = container.append("g")
	.classed('cells', true)
	.selectAll(".cell")
	.data(polygons)
	.enter()
	.append("path")
	.classed("cell", true)
	.attr("d", function(d){ return "M"+d.join(",")+"z"; })
	.style("fill", function(d){
	return d.site.originalObject.data.originalData.color;
	});

	container.append("text")
	.classed("total-cost", true)
	.attr("transform", "rotate("+totalCostRotation+")translate(0,"+(-delta-6)+")")
	.text(totalCost);

	var costs = container.append("g")
	.classed('costs', true)
	.selectAll(".cost")
	.data(polygons)
	.enter()
	.append("text")
	.classed("cost", true)
	.attr("transform", function(d){
	return "translate("+[d.site.x, d.site.y+6]+")"; // +6 for centering
	})
	.text(function(d){
	return "$"+costAccessor(d.site.originalObject.data.originalData);
	})

	var higlighters = container.append("g")
	.classed('highlighters', true)
	.selectAll(".highlighter")
	.data(polygons)
	.enter()
	.append("path")
	.attr("class", function(d) {
	return highlighterGroup(d.site.originalObject.data.originalData);
	})
	.classed("highlighter", true)
	.attr("d", function(d){ return "M"+d.join(",")+"z"; });
	}

	</script>
	</body>
	</html>
Country	Food	Production
Afghanistan	422	342
Albania	25	0
Algeria	117	0
Angola	174	25
Antigua and Barbuda	1	NA
Argentina	364	1043
Armenia	9	NA
Australia	258	774
Austria	31	NA
Azerbaijan	19	3
Bahamas	9	NA
Bangladesh	26892	34350
Barbados	4	NA
Belarus	30	NA
Belgium	96	NA
Belize	9	14
Benin	552	138
Bermuda	0	NA
Bolivia (Plurinational State of)	288	295
Bosnia and Herzegovina	7	NA
Botswana	14	NA
Brazil	6437	7843
Brunei Darussalam	32	1
Bulgaria	16	37
Burkina Faso	363	204
Cabo Verde	24	NA
Cambodia	2408	6263
Cameroon	531	129
Canada	445	NA
Central African Republic	34	25
Chad	139	220
Chile	156	87
China	109725	136873
China, Hong Kong SAR	313	0
China, Macao SAR	21	NA
China, mainland	108321	135809
China, Taiwan Province of	1070	1063
Colombia	1354	1367
Congo	73	1
Costa Rica	223	150
Côte d'Ivoire	1291	1290
Croatia	11	NA
Cuba	763	449
Cyprus	6	NA
Czechia	51	NA
Democratic People's Republic of Korea	1847	1935
Denmark	28	NA
Djibouti	38	NA
Dominica	1	NA
Dominican Republic	546	550
Ecuador	709	1011
Egypt	3264	3818
El Salvador	67	24
Estonia	3	NA
Ethiopia	212	123
Fiji	40	4
Finland	24	NA
France	314	55
French Polynesia	10	NA
Gabon	62	1
Gambia	114	46
Georgia	11	NA
Germany	277	NA
Ghana	830	380
Greece	74	156
Grenada	1	NA
Guatemala	88	21
Guinea	1141	1370
Guinea-Bissau	167	140
Guyana	61	549
Haiti	441	113
Honduras	117	33
Hungary	21	6
Iceland	1	NA
India	87006	106186
Indonesia	33637	47544
Iran (Islamic Republic of)	2320	1634
Iraq	1369	301
Ireland	14	NA
Israel	130	NA
Italy	350	956
Jamaica	65	0
Japan	7609	7176
Jordan	143	NA
Kazakhstan	120	230
Kenya	574	98
Kiribati	7	NA
Kuwait	148	NA
Kyrgyzstan	41	18
Lao People's Democratic Republic	1077	2278
Latvia	5	NA
Lebanon	52	NA
Lesotho	8	NA
Liberia	407	180
Lithuania	9	NA
Luxembourg	2	NA
Madagascar	2350	2408
Malawi	78	83
Malaysia	2415	1737
Maldives	18	NA
Mali	872	1475
Malta	2	NA
Mauritania	188	135
Mauritius	57	0
Mexico	690	120
Mongolia	22	NA
Montenegro	1	NA
Morocco	36	25
Mozambique	605	234
Myanmar	7073	19188
Namibia	15	NA
Nepal	2439	3005
Netherlands	49	NA
New Caledonia	4	NA
New Zealand	41	NA
Nicaragua	263	252
Niger	235	9
Nigeria	4901	3135
Norway	22	NA
Oman	205	NA
Pakistan	2232	6767
Panama	257	192
Paraguay	33	412
Peru	1486	2035
Philippines	11752	12299
Poland	36	NA
Portugal	158	120
Republic of Korea	4196	3756
Republic of Moldova	10	NA
Romania	56	36
Russian Federation	673	624
Rwanda	102	63
Saint Kitts and Nevis	1	NA
Saint Lucia	2	NA
Saint Vincent and the Grenadines	4	0
Samoa	1	NA
Sao Tome and Principe	7	NA
Saudi Arabia	1039	0
Senegal	1022	291
Serbia	12	NA
Sierra Leone	629	837
Slovakia	16	NA
Slovenia	8	NA
Solomon Islands	36	3
South Africa	919	3
Spain	391	585
Sri Lanka	2334	3082
Sudan	48	17
Suriname	37	175
Swaziland	26	0
Sweden	57	NA
Switzerland	20	NA
Tajikistan	57	52
Thailand	7677	24054
The former Yugoslav Republic of Macedonia	6	19
Timor-Leste	73	58
Togo	177	64
Trinidad and Tobago	22	2
Tunisia	12	NA
Turkey	805	600
Turkmenistan	57	67
Uganda	174	143
Ukraine	135	97
United Arab Emirates	526	NA
United Kingdom	405	NA
United Republic of Tanzania	1035	1464
United States of America	2203	5745
Uruguay	39	907
Uzbekistan	112	227
Vanuatu	10	NA
Venezuela (Bolivarian Republic of)	711	583
Viet Nam	13253	29374
Yemen	424	NA
Zambia	44	30
Zimbabwe	143	0