renecnielsen · February 26, 2016 23:23
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,800" rel="stylesheet" type="text/css">
 <style>
  body {
    font: 11px "Open Sans";
    margin: 0;
    fill: #5d6263;
    font-weight: 300;
  }
  
  .axis path,
  .axis line {
    fill: none;
    stroke: #5d6263;
    shape-rendering: crispEdges;
  }
  
  .legend-box {
    cursor: pointer;
  }
  
  line.regressionLine {
    stroke: #5d6263;
    stroke-width: 0.7px;
    stroke-dasharray: 4px 6px;
  }
  /*.teamLabel{font-weight:bold;fill:#74736c;}*/
 </style>

 <body>
  <script src="//d3js.org/d3.v3.min.js"></script>
  <script>
    var margin = {
        top: 130,
        right: 145,
        bottom: 30,
        left: 45
      },
      width = 850 - margin.left - margin.right,
      height = 820 - margin.top - margin.bottom;

    var x = d3.scale.linear()
      .range([0, width]);

    var y = d3.scale.linear()
      .range([height, 0]);

    var color = d3.scale.category20();

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");
 
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");



    d3.csv("data.csv", function(error, data) {

      data.forEach(function(d) {
        if (d.pays == "United Kingdom") {
          return d.visible = true;
          d.prod = +d.prod;
          d.cons = +d.cons;
        } else {
          return d.visible = false;
          d.prod = +d.prod;
          d.cons = +d.cons;
        };
      });

      var dataNest = d3.nest()
        .key(function(d) {
          return d.pays;
        })
        .entries(data);

      var categories = dataNest.map(function(d, i) {
        return {
          name: d.key,
          values: dataNest[i].values.map(function(d) {
            return {
              prod: +d.prod,
              cons: +d.cons,
              year: d.year
            };
          }),
          visible: (d.key === "United Kingdom" ? true : false)
        };
      });

      x.domain([0, 31]);
      y.domain([0, 31]);

      svg.append("foreignObject")
    .attr("width", 600)
    .attr("height", 200)
    .attr("x", 50)
    .attr("y", -110)
  .append("xhtml:body")
    .style("font-size", "12px")
    .html("<h2>Daily Biofuels Production and Consumption, 2010-2012</h2><p>Explore the connections between consumption and production for the top-40 highest consumers and producers of biofuels in the world. Countries below the dashed line consume more biofuels than they produce. Countries above the line produce more than they consume. For example, United Kingdom and Germany consume more than they produce, whereas Argentina and Indonesia produce more than they consume.</p>");
      
      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
        .append("text")
        .attr("class", "label")
        .attr("x", width)
        .attr("y", -6)
        .style("text-anchor", "end")
        .style("font-weight", 800)
        .text("Daily Biofuels Consumption (1,000 Barrels)");

      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
        .append("text")
        .attr("class", "label")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .style("font-weight", 800)
        .text("DailyBiofuels Production (1,000 Barrels)");

      var agencies = svg.selectAll(".agencies")
        .data(categories) // Select nested data and append to new svg group elements
        .enter().append("g")
        .attr("class", "agencies");

      var dots = svg.selectAll(".dot")
        .data(data).enter().append("g").attr("class", "dot")

      dots.append("circle")
        .attr("id", function(d) {
          return d.pays.replace(/\s+/g, "");
        })
        .attr("class", "circles")
        .attr("opacity", 1)
        .attr("r", 3.5)
        .attr("cx", function(d) {
          return d.visible ? x(d.cons) : x(-100 * 100);
        })
        .attr("cy", function(d) {
          return d.visible ? y(d.prod) : y(-100 * 100);
        })
        .style("fill", function(d) {
          return color(d.pays);
        });

      // begin of drawing lines
      var line = d3.svg.line()
        .x(function(d) {
          return x(d.cons);
        })
        .y(function(d) {
          return y(d.prod);
        })
        .interpolate("linear");

      var fitLine = svg.append("line")
        .attr({
          "class": "regressionLine",
          "x1": x(0),
          "x2": x(31),
          "y1": y(0),
          "y2": y(31)
        })
      
      svg.append("foreignObject")
      .attr("class", "label")
      .attr("text-anchor", "start")
      .attr("x", -510)
      .attr("y", 88)
      .attr("transform", "rotate(-45) translate(333, 353)")
      .append("xhtml:body")
        .html("&uarr;");
      
      svg.append("text")
        .attr("class", "label")
        .attr("text-anchor", "start")
        .attr("x", -500)
        .attr("y", -65)
        .attr("dy", "165px")
        .attr("transform", "rotate(-45) translate(333, 353)")
        .text("Production higher than consumption");
      
      svg.append("foreignObject")
      .attr("class", "label")
      .attr("text-anchor", "start")
      .attr("x", -510)
      .attr("y", 123)
      .attr("transform", "rotate(-45) translate(333, 353)")
      .append("xhtml:body")
        .html("&darr;");

      svg.append("text")
        .attr("class", "label")
        .attr("text-anchor", "start")
        .attr("x", -500)
        .attr("y", -60)
        .attr("dy", "195px")
        .attr("transform", "rotate(-45) translate(333, 353)")
        .text("Consumption higher than production");
      
      agencies.append("path")
        .attr("d", function(d) {
          return d.visible ? line(d.values) : null; // If array key "visible" = true then draw line, if not then don't 
        })
        .attr("id", function(d) {
          return d.name.replace(/\s+/g, "")
        })
        .attr("class", "linkcircles")
        .attr("transform", "translate(0,0)")
        .attr("opacity", 1)
        .style("stroke-width", 1.5)
        .style("stroke", function(d) {
          return color(d.name);
        })
        .style("fill", "none");
      // end of drawing lines


      dots.append("text").attr("id", function(d) {
        return d.pays.replace(/\s+/g, "");
      }).attr("class", "labels").attr("x", function(d) {
        return d.visible ? x(d.cons) : -1000;
      }).attr("y", function(d) {
        return d.visible ? y(d.prod) - 7 : -100 * 100;
      }).text(function(d) {
        return (d.year)
      }).attr("text-anchor", "middle");

      agencies.append("rect")
        .attr("width", 10)
        .attr("height", 10)
        .attr("x", (width + 15))
        .attr("y", function(d, i) {
          return i * 13
        })
        .attr("fill", function(d) {
          return d.visible ? color(d.name) : "#F1F1F2"; // If array key "visible" = true then color rect, if not then make it grey 
        })
        .attr("class", "legend-box")
        .on("click", function(d) { // On click make d.visible 
          d.visible = !d.visible; // If array key for this data selection is "visible" = true then make
          data.forEach(function(data) {
            if (data.pays == d.name) {
              return data.visible = !data.visible; // If array key for this data selection is "visible" = true then make
            }
          });


          maxX = findMaxX(categories); // Find max X rating value categories data with "visible"; true
          maxY = findMaxY(categories); // Find max Y rating value categories data with "visible"; true

          if (maxX > maxY) {
            maxY = maxX;
          } else {
            maxX = maxY;
          }

          x.domain([0, maxX]); // Redefine xAxis domain based on highest y value of categories data with "visible"; true
          svg.select(".x.axis")
            .transition()
            .call(xAxis);

          y.domain([0, maxY]); // Redefine yAxis domain based on highest y value of categories data with "visible"; true
          svg.select(".y.axis")
            .transition()
            .call(yAxis);

          dots.selectAll(".circles")
            .transition()
            .attr("cx", function(d) {
              return d.visible ? x(d.cons) : x(-(100 * 100)); // Replace dots with new scale
            })
            .attr("cy", function(d) {
              return d.visible ? y(d.prod) : y(-(100 * 100)); // Replace dots with new scale
            });

          agencies.selectAll(".linkcircles")
            .transition()
            .attr("d", function(d) {
              return d.visible ? line(d.values) : null; // If d.visible is true then draw line for this d selection
            });

          agencies.select("rect")
            .transition()
            .attr("fill", function(d) {
              return d.visible ? color(d.name) : "#F1F1F2";
            });

          dots.selectAll(".labels")
            .transition()
            .attr("x", function(d) {
              return d.visible ? x(d.cons) : x(-(100 * 100)); // Replace labels with new scale
            })
            .attr("y", function(d) {
              return d.visible ? y(d.prod) - 7 : y(-(100 * 100)); // Replace labels with new scale
            });

          svg.selectAll("line.regressionLine")
            .transition()
            .attr("x1", x(0))
            .attr("x2", function(d) {
              if (maxX < maxY) {
                return x(maxX);
              } else {
                return x(maxY);
              }
            })
            .attr("y1", y(0))
            .attr("y2", function(d) {
              if (maxX < maxY) {
                return y(maxX);
              } else {
                return y(maxY);
              }
            });

        })
        .on("mouseover", function(d) {
          d3.select("#" + d.name.replace(/\s+/g, "")).transition().style("stroke-width", 2.5)
        })
        .on("mouseout", function(d) {
          d3.select("#" + d.name.replace(/\s+/g, "")).transition().style("stroke-width", 1.5)
        });

      agencies.append("text")
        .attr("x", (width + 30)) // space legend
        .attr("y", function(d, i) {
          return i * 13 + 9
        })
        .attr("class", "legend") // style the legend
        .text(function(d) {
          return d.name
        });


      function findMaxX(data) { // Define function "findMaxY"
        var maxXValues = data.map(function(d) {
          console.log(d);
          if (d.visible) {
            return d3.max(d.values, function(value) { // Return max rating value
              return value.cons * 1.05;
            })
          }
        });
        return d3.max(maxXValues);
      };

      function findMaxY(data) { // Define function "findMaxY"
        var maxYValues = data.map(function(d) {
          if (d.visible) {
            return d3.max(d.values, function(value) { // Return max rating value
              return value.prod * 1.05;
            })
          }
        });
        return d3.max(maxYValues);
      };

    });
    </script>
diff --git a/thumbnail.png b/thumbnail.png
pays	year	prod	cons	dif	per
Argentina	2010	38.1	11.9	26.2	31.2335958
Argentina	2011	50.34	17.65	32.69	35.06158125
Argentina	2012	52.2	20.2	32	38.69731801
Australia	2012	6.63728	6.13514	0.50214	92.4345515
Australia	2010	6.20365	6.91018	-0.70653	111.3889404
Australia	2011	6.96187	8.03028	-1.06841	115.3465951
Austria	2012	9.9	11.8	-1.9	119.1919192
Austria	2011	8.7	11.6	-2.9	133.3333333
Austria	2010	8.2	12.5	-4.3	152.4390244
Belgium	2011	15.2	7.8	7.4	51.31578947
Belgium	2012	15.5	8.2	7.3	52.90322581
Belgium	2010	13.5	8	5.5	59.25925926
Brazil	2010	527.13475	424.33586	102.79889	80.49855563
Brazil	2011	438.05804	377.41906	60.63898	86.15731833
Brazil	2012	449.2	406.6	42.6	90.51647373
Canada	2012	36.3	43.46	-7.16	119.7245179
Canada	2010	26.4	34.2	-7.8	129.5454545
Canada	2011	32.7	47	-14.3	143.7308869
China	2010	46.45844	46.45844	0	100
China	2011	53.54093	53.54093	0	100
China	2012	58.9002	58.9002	0	100
Colombia	2012	17	16.52	0.48	97.17647059
Colombia	2010	12	12	0	100
Colombia	2011	15	15	0	100
Croatia	2010	0.2	0.1	0.1	50
Croatia	2011	0.2	0.1	0.1	50
Croatia	2012	1.09	0.83	0.26	76.14678899
Czech Republic	2010	6	5.8	0.2	96.66666667
Czech Republic	2012	5.9	6.8	-0.9	115.2542373
Czech Republic	2011	6	7.3	-1.3	121.6666667
Denmark	2010	1.8	1.1	0.7	61.11111111
Denmark	2011	2.8	5	-2.2	178.5714286
Denmark	2012	2	5.2	-3.2	260
Finland	2010	5.9	4.5	1.4	76.27118644
Finland	2011	4.2	4.7	-0.5	111.9047619
Finland	2012	5.2	11	-5.8	211.5384615
France	2010	55	55	0	100
France	2011	51.4	56.5	-5.1	109.922179
France	2012	49.7	56	-6.3	112.6760563
Germany	2011	70.535	73.9	-3.365	104.7706812
Germany	2012	68.07	75.7	-7.63	111.2090495
Germany	2010	62	75.5	-13.5	121.7741935
Greece	2011	2	2.3	-0.3	115
Greece	2010	2.4	2.8	-0.4	116.6666667
Greece	2012	2.3	2.76	-0.46	120
Guatemala	2010	3.01	0.01	3	0.332225914
Guatemala	2012	8.02	0.03	7.99	0.374064838
Guatemala	2011	4.01	0.02	3.99	0.498753117
Hungary	2011	5.8	4.2	1.6	72.4137931
Hungary	2010	6	4.6	1.4	76.66666667
Hungary	2012	4.32	4.23	0.09	97.91666667
India	2010	2.41253	1.7577	0.65483	72.85712509
India	2012	7.23759	6.46213	0.77546	89.28566001
India	2011	8.04751	7.32375	0.72376	91.00641068
Indonesia	2011	31.11824	7.56918	23.54906	24.32393349
Indonesia	2010	12.85194	3.79112	9.06082	29.49842592
Indonesia	2012	37.91119	14.04568	23.86551	37.04890298
Ireland	2010	1.3	2.3	-1	176.9230769
Ireland	2011	1.1	2.5	-1.4	227.2727273
Ireland	2012	0.9	2.5	-1.6	277.7777778
Italy	2012	10.71	21.4	-10.69	199.8132586
Italy	2010	16.5	35.2	-18.7	213.3333333
Italy	2011	12.2	35.9	-23.7	294.2622951
Jamaica	2010	2	1	1	50
Jamaica	2011	3	2	1	66.66666667
Jamaica	2012	0	2	-2
Japan	2010	1.03394	0.65026	0.38368	62.89146372
Japan	2011	0.6376	1.10293	-0.46533	172.9814931
Japan	2012	0.67206	1.16587	-0.49381	173.4770705
Korea, South	2012	7.04	6.5	0.54	92.32954545
Korea, South	2010	6.5	6.6	-0.1	101.5384615
Korea, South	2011	6.3	6.5	-0.2	103.1746032
Latvia	2010	1.1	0.7	0.4	63.63636364
Latvia	2012	1.26	1.1	0.16	87.3015873
Latvia	2011	1	1.1	-0.1	110
Lithuania	2010	2.5	1.2	1.3	48
Lithuania	2011	1.9	1.1	0.8	57.89473684
Lithuania	2012	1.852	1.24	0.612	66.95464363
Malaysia	2010	1.6226	0.02126	1.60134	1.31024282
Malaysia	2011	1.03441	0.04605	0.98836	4.451813111
Malaysia	2012	2.85949	2.57869	0.2808	90.18006707
Netherlands	2011	13.6	8.8	4.8	64.70588235
Netherlands	2010	9.5	6.6	2.9	69.47368421
Netherlands	2012	9.4	8.77	0.63	93.29787234
Norway	2011	0.001	2.6	-2.599	260000
Norway	2010	0.001	2.7	-2.699	270000
Norway	2012	0	5.6	-5.6
Paraguay	2010	2.3	2.4	-0.1	104.3478261
Paraguay	2011	2.22	2.62	-0.4	118.018018
Paraguay	2012	2.3	2.84	-0.54	123.4782609
Peru	2010	2.2	2.5	-0.3	113.6363636
Peru	2011	2.7	5	-2.3	185.1851852
Peru	2012	3.07	6.1	-3.03	198.6970684
Philippines	2010	3.4	4.75613	-1.35613	139.8861765
Philippines	2011	3	5.89347	-2.89347	196.449
Philippines	2012	2.59	6.70339	-4.11339	258.8181467
Poland	2012	13.3	19.6	-6.3	147.3684211
Poland	2010	10.5	18	-7.5	171.4285714
Poland	2011	9.7	20	-10.3	206.185567
Portugal	2010	6	7	-1	116.6666667
Portugal	2012	5.2	6.4	-1.2	123.0769231
Portugal	2011	5.5	7	-1.5	127.2727273
Romania	2011	1.9	5.2	-3.3	273.6842105
Romania	2012	1.9	5.2	-3.3	273.6842105
Romania	2010	1.7	6.4	-4.7	376.4705882
Slovakia	2010	4	4	0	100
Slovakia	2011	3.2	4.1	-0.9	128.125
Slovakia	2012	2.695	3.8	-1.105	141.0018553
Spain	2010	24	34	-10	141.6666667
Spain	2011	19	40	-21	210.5263158
Spain	2012	16.6	35.3	-18.7	212.6506024
Sweden	2011	8.4	12	-3.6	142.8571429
Sweden	2010	7.5	11	-3.5	146.6666667
Sweden	2012	7.9	12.4	-4.5	156.9620253
Taiwan	2011	1.5	1.7	-0.2	113.3333333
Taiwan	2012	1.1	2.4	-1.3	218.1818182
Taiwan	2010	0.5	2.1	-1.6	420
Thailand	2011	19.23131	19.14515	0.08616	99.5519806
Thailand	2010	19.14515	19.30024	-0.15509	100.8100746
Thailand	2012	23.62556	24.46995	-0.84439	103.5740528
Trinidad and Tobago	2011	2.2	2	0.2	90.90909091
Trinidad and Tobago	2010	0.0001	0.0001	0	100
Trinidad and Tobago	2012	0	2	-2
United Kingdom	2011	9	27.2	-18.2	302.2222222
United Kingdom	2010	9	29	-20	322.2222222
United Kingdom	2012	5.8	26.2	-20.4	451.7241379
United States	2011	971.61918	898.05205	73.56713	92.42839875
United States	2012	939.558	898	41.558	95.57685635
United States	2010	889.444	856.77996	32.66404	96.32758892
	<!DOCTYPE html>
	<meta charset="utf-8">
	<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,800" rel="stylesheet" type="text/css">
	<style>
	body {
	font: 11px "Open Sans";
	margin: 0;
	fill: #5d6263;
	font-weight: 300;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #5d6263;
	shape-rendering: crispEdges;
	}

	.legend-box {
	cursor: pointer;
	}

	line.regressionLine {
	stroke: #5d6263;
	stroke-width: 0.7px;
	stroke-dasharray: 4px 6px;
	}
	/.teamLabel{font-weight:bold;fill:#74736c;}/
	</style>

	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>
	var margin = {
	top: 130,
	right: 145,
	bottom: 30,
	left: 45
	},
	width = 850 - margin.left - margin.right,
	height = 820 - margin.top - margin.bottom;

	var x = d3.scale.linear()
	.range([0, width]);

	var y = d3.scale.linear()
	.range([height, 0]);

	var color = d3.scale.category20();

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");



	d3.csv("data.csv", function(error, data) {

	data.forEach(function(d) {
	if (d.pays == "United Kingdom") {
	return d.visible = true;
	d.prod = +d.prod;
	d.cons = +d.cons;
	} else {
	return d.visible = false;
	d.prod = +d.prod;
	d.cons = +d.cons;
	};
	});

	var dataNest = d3.nest()
	.key(function(d) {
	return d.pays;
	})
	.entries(data);

	var categories = dataNest.map(function(d, i) {
	return {
	name: d.key,
	values: dataNest[i].values.map(function(d) {
	return {
	prod: +d.prod,
	cons: +d.cons,
	year: d.year
	};
	}),
	visible: (d.key === "United Kingdom" ? true : false)
	};
	});

	x.domain([0, 31]);
	y.domain([0, 31]);

	svg.append("foreignObject")
	.attr("width", 600)
	.attr("height", 200)
	.attr("x", 50)
	.attr("y", -110)
	.append("xhtml:body")
	.style("font-size", "12px")
	.html("<h2>Daily Biofuels Production and Consumption, 2010-2012</h2><p>Explore the connections between consumption and production for the top-40 highest consumers and producers of biofuels in the world. Countries below the dashed line consume more biofuels than they produce. Countries above the line produce more than they consume. For example, United Kingdom and Germany consume more than they produce, whereas Argentina and Indonesia produce more than they consume.</p>");

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.append("text")
	.attr("class", "label")
	.attr("x", width)
	.attr("y", -6)
	.style("text-anchor", "end")
	.style("font-weight", 800)
	.text("Daily Biofuels Consumption (1,000 Barrels)");

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("class", "label")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.style("font-weight", 800)
	.text("DailyBiofuels Production (1,000 Barrels)");

	var agencies = svg.selectAll(".agencies")
	.data(categories) // Select nested data and append to new svg group elements
	.enter().append("g")
	.attr("class", "agencies");

	var dots = svg.selectAll(".dot")
	.data(data).enter().append("g").attr("class", "dot")

	dots.append("circle")
	.attr("id", function(d) {
	return d.pays.replace(/\s+/g, "");
	})
	.attr("class", "circles")
	.attr("opacity", 1)
	.attr("r", 3.5)
	.attr("cx", function(d) {
	return d.visible ? x(d.cons) : x(-100 * 100);
	})
	.attr("cy", function(d) {
	return d.visible ? y(d.prod) : y(-100 * 100);
	})
	.style("fill", function(d) {
	return color(d.pays);
	});

	// begin of drawing lines
	var line = d3.svg.line()
	.x(function(d) {
	return x(d.cons);
	})
	.y(function(d) {
	return y(d.prod);
	})
	.interpolate("linear");

	var fitLine = svg.append("line")
	.attr({
	"class": "regressionLine",
	"x1": x(0),
	"x2": x(31),
	"y1": y(0),
	"y2": y(31)
	})

	svg.append("foreignObject")
	.attr("class", "label")
	.attr("text-anchor", "start")
	.attr("x", -510)
	.attr("y", 88)
	.attr("transform", "rotate(-45) translate(333, 353)")
	.append("xhtml:body")
	.html("↑");

	svg.append("text")
	.attr("class", "label")
	.attr("text-anchor", "start")
	.attr("x", -500)
	.attr("y", -65)
	.attr("dy", "165px")
	.attr("transform", "rotate(-45) translate(333, 353)")
	.text("Production higher than consumption");

	svg.append("foreignObject")
	.attr("class", "label")
	.attr("text-anchor", "start")
	.attr("x", -510)
	.attr("y", 123)
	.attr("transform", "rotate(-45) translate(333, 353)")
	.append("xhtml:body")
	.html("↓");

	svg.append("text")
	.attr("class", "label")
	.attr("text-anchor", "start")
	.attr("x", -500)
	.attr("y", -60)
	.attr("dy", "195px")
	.attr("transform", "rotate(-45) translate(333, 353)")
	.text("Consumption higher than production");

	agencies.append("path")
	.attr("d", function(d) {
	return d.visible ? line(d.values) : null; // If array key "visible" = true then draw line, if not then don't
	})
	.attr("id", function(d) {
	return d.name.replace(/\s+/g, "")
	})
	.attr("class", "linkcircles")
	.attr("transform", "translate(0,0)")
	.attr("opacity", 1)
	.style("stroke-width", 1.5)
	.style("stroke", function(d) {
	return color(d.name);
	})
	.style("fill", "none");
	// end of drawing lines


	dots.append("text").attr("id", function(d) {
	return d.pays.replace(/\s+/g, "");
	}).attr("class", "labels").attr("x", function(d) {
	return d.visible ? x(d.cons) : -1000;
	}).attr("y", function(d) {
	return d.visible ? y(d.prod) - 7 : -100 * 100;
	}).text(function(d) {
	return (d.year)
	}).attr("text-anchor", "middle");

	agencies.append("rect")
	.attr("width", 10)
	.attr("height", 10)
	.attr("x", (width + 15))
	.attr("y", function(d, i) {
	return i * 13
	})
	.attr("fill", function(d) {
	return d.visible ? color(d.name) : "#F1F1F2"; // If array key "visible" = true then color rect, if not then make it grey
	})
	.attr("class", "legend-box")
	.on("click", function(d) { // On click make d.visible
	d.visible = !d.visible; // If array key for this data selection is "visible" = true then make
	data.forEach(function(data) {
	if (data.pays == d.name) {
	return data.visible = !data.visible; // If array key for this data selection is "visible" = true then make
	}
	});


	maxX = findMaxX(categories); // Find max X rating value categories data with "visible"; true
	maxY = findMaxY(categories); // Find max Y rating value categories data with "visible"; true

	if (maxX > maxY) {
	maxY = maxX;
	} else {
	maxX = maxY;
	}

	x.domain([0, maxX]); // Redefine xAxis domain based on highest y value of categories data with "visible"; true
	svg.select(".x.axis")
	.transition()
	.call(xAxis);

	y.domain([0, maxY]); // Redefine yAxis domain based on highest y value of categories data with "visible"; true
	svg.select(".y.axis")
	.transition()
	.call(yAxis);

	dots.selectAll(".circles")
	.transition()
	.attr("cx", function(d) {
	return d.visible ? x(d.cons) : x(-(100 * 100)); // Replace dots with new scale
	})
	.attr("cy", function(d) {
	return d.visible ? y(d.prod) : y(-(100 * 100)); // Replace dots with new scale
	});

	agencies.selectAll(".linkcircles")
	.transition()
	.attr("d", function(d) {
	return d.visible ? line(d.values) : null; // If d.visible is true then draw line for this d selection
	});

	agencies.select("rect")
	.transition()
	.attr("fill", function(d) {
	return d.visible ? color(d.name) : "#F1F1F2";
	});

	dots.selectAll(".labels")
	.transition()
	.attr("x", function(d) {
	return d.visible ? x(d.cons) : x(-(100 * 100)); // Replace labels with new scale
	})
	.attr("y", function(d) {
	return d.visible ? y(d.prod) - 7 : y(-(100 * 100)); // Replace labels with new scale
	});

	svg.selectAll("line.regressionLine")
	.transition()
	.attr("x1", x(0))
	.attr("x2", function(d) {
	if (maxX < maxY) {
	return x(maxX);
	} else {
	return x(maxY);
	}
	})
	.attr("y1", y(0))
	.attr("y2", function(d) {
	if (maxX < maxY) {
	return y(maxX);
	} else {
	return y(maxY);
	}
	});

	})
	.on("mouseover", function(d) {
	d3.select("#" + d.name.replace(/\s+/g, "")).transition().style("stroke-width", 2.5)
	})
	.on("mouseout", function(d) {
	d3.select("#" + d.name.replace(/\s+/g, "")).transition().style("stroke-width", 1.5)
	});

	agencies.append("text")
	.attr("x", (width + 30)) // space legend
	.attr("y", function(d, i) {
	return i * 13 + 9
	})
	.attr("class", "legend") // style the legend
	.text(function(d) {
	return d.name
	});


	function findMaxX(data) { // Define function "findMaxY"
	var maxXValues = data.map(function(d) {
	console.log(d);
	if (d.visible) {
	return d3.max(d.values, function(value) { // Return max rating value
	return value.cons * 1.05;
	})
	}
	});
	return d3.max(maxXValues);
	};

	function findMaxY(data) { // Define function "findMaxY"
	var maxYValues = data.map(function(d) {
	if (d.visible) {
	return d3.max(d.values, function(value) { // Return max rating value
	return value.prod * 1.05;
	})
	}
	});
	return d3.max(maxYValues);
	};

	});
	</script>