veltman · October 3, 2018 19:13
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
 </head>
 <body>
  <script>
    var outerWidth = 960,
      outerHeight = 400;

    var margin = {
      top: 50,
      left: 30,
      right: 50,
      bottom: 30
    };

    var scaledByPopulation = false;

    var width = outerWidth - margin.left - margin.right,
      height = outerHeight - margin.top - margin.bottom;

    var xScale = d3.scaleLinear()
      .range([0, width]);

    var yScale = d3.scaleLinear()
      .range([height, 0]);

    var radiusScale = d3.scaleSqrt()
      .range([1, 25]);

    var colorScale = d3.scaleOrdinal()
      .range(['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd']);

    d3.csv("rosling.csv", function(err, csvData){
      csvData.forEach(function(row){
        row.income = +row.income;
        row.lifeExpectancy = +row.lifeExpectancy;
        row.population = +row.population;
        row.year = +row.year;
      });

      csvData = csvData.filter(function(row){
        return row.year === 1800;
      });

      var incomes = csvData.map(function(row){
        return row.income;
      });

      var lifeExpectancies = csvData.map(function(row){
        return row.lifeExpectancy;
      });

      var populations = csvData.map(function(row){
        return row.population;
      });

      xScale.domain(d3.extent(incomes));

      yScale.domain([22, d3.max(lifeExpectancies)]);

      radiusScale.domain([0, d3.max(populations)]);

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


      var tooltip = d3.select("body")
        .append("div")
        .text("Hover over a country for details");

      var yAxis = d3.axisLeft(yScale);

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

      var xAxis = d3.axisBottom(xScale)
        .tickFormat(function(value){
          return "$" + value;
        });

      var xAxisContainer = svg.append("g")
        .attr("transform", "translate(0 " + height + ")");

      //yAxis(yAxisContainer);
      yAxisContainer.call(yAxis);

      //xAxis(xAxisContainer);
      xAxisContainer.call(xAxis);


      csvData.forEach(function(row){
        svg.append("circle")
          .attr("r", 3)
          .datum(row);
      });

      var circles = svg.selectAll("circle")
        .attr("cx", function(pieceOfData) {
          return xScale(pieceOfData.income);
        })
        .attr("cy", function(pieceOfData) {
          return yScale(pieceOfData.lifeExpectancy);
        })
        .attr("fill", function(pieceOfData) {
          return colorScale(pieceOfData.region);
        })
        .on("mouseover", function(pieceOfData){
          tooltip.text(pieceOfData.name);
          d3.select(this).attr("stroke", "black")
            .attr("stroke-width", "3");
        })
        .on("mouseout", function(pieceOfData){
          tooltip.text("Hover over a country for details");
          d3.select(this).attr("stroke", "none");
        });

      var button = d3.select("body").append("button");

      if (scaledByPopulation) {
        button.text("Equal size");
      } else {
        button.text("Scale by population");
      }

      button.on("click", function(){
        // Flip true to false or false to true
        scaledByPopulation = !scaledByPopulation;

        if (scaledByPopulation) {
          button.text("Equal size");
        } else {
          button.text("Scale by population");
        }

        circles
          .transition()
          .duration(1000)
          .attr("r", function(pieceOfData) {
            if (scaledByPopulation) {
              return radiusScale(pieceOfData.population);
            } else {
              return 3;
            }
          });
      });

    });
  </script>
 </body>
diff --git a/rosling.csv b/rosling.csv
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	</style>
	</head>
	<body>
	<script>
	var outerWidth = 960,
	outerHeight = 400;

	var margin = {
	top: 50,
	left: 30,
	right: 50,
	bottom: 30
	};

	var scaledByPopulation = false;

	var width = outerWidth - margin.left - margin.right,
	height = outerHeight - margin.top - margin.bottom;

	var xScale = d3.scaleLinear()
	.range([0, width]);

	var yScale = d3.scaleLinear()
	.range([height, 0]);

	var radiusScale = d3.scaleSqrt()
	.range([1, 25]);

	var colorScale = d3.scaleOrdinal()
	.range(['#8dd3c7','#ffffb3','#bebada','#fb8072','#80b1d3','#fdb462','#b3de69','#fccde5','#d9d9d9','#bc80bd']);

	d3.csv("rosling.csv", function(err, csvData){
	csvData.forEach(function(row){
	row.income = +row.income;
	row.lifeExpectancy = +row.lifeExpectancy;
	row.population = +row.population;
	row.year = +row.year;
	});

	csvData = csvData.filter(function(row){
	return row.year === 1800;
	});

	var incomes = csvData.map(function(row){
	return row.income;
	});

	var lifeExpectancies = csvData.map(function(row){
	return row.lifeExpectancy;
	});

	var populations = csvData.map(function(row){
	return row.population;
	});

	xScale.domain(d3.extent(incomes));

	yScale.domain([22, d3.max(lifeExpectancies)]);

	radiusScale.domain([0, d3.max(populations)]);

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


	var tooltip = d3.select("body")
	.append("div")
	.text("Hover over a country for details");

	var yAxis = d3.axisLeft(yScale);

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

	var xAxis = d3.axisBottom(xScale)
	.tickFormat(function(value){
	return "$" + value;
	});

	var xAxisContainer = svg.append("g")
	.attr("transform", "translate(0 " + height + ")");

	//yAxis(yAxisContainer);
	yAxisContainer.call(yAxis);

	//xAxis(xAxisContainer);
	xAxisContainer.call(xAxis);


	csvData.forEach(function(row){
	svg.append("circle")
	.attr("r", 3)
	.datum(row);
	});

	var circles = svg.selectAll("circle")
	.attr("cx", function(pieceOfData) {
	return xScale(pieceOfData.income);
	})
	.attr("cy", function(pieceOfData) {
	return yScale(pieceOfData.lifeExpectancy);
	})
	.attr("fill", function(pieceOfData) {
	return colorScale(pieceOfData.region);
	})
	.on("mouseover", function(pieceOfData){
	tooltip.text(pieceOfData.name);
	d3.select(this).attr("stroke", "black")
	.attr("stroke-width", "3");
	})
	.on("mouseout", function(pieceOfData){
	tooltip.text("Hover over a country for details");
	d3.select(this).attr("stroke", "none");
	});

	var button = d3.select("body").append("button");

	if (scaledByPopulation) {
	button.text("Equal size");
	} else {
	button.text("Scale by population");
	}

	button.on("click", function(){
	// Flip true to false or false to true
	scaledByPopulation = !scaledByPopulation;

	if (scaledByPopulation) {
	button.text("Equal size");
	} else {
	button.text("Scale by population");
	}

	circles
	.transition()
	.duration(1000)
	.attr("r", function(pieceOfData) {
	if (scaledByPopulation) {
	return radiusScale(pieceOfData.population);
	} else {
	return 3;
	}
	});
	});

	});
	</script>
	</body>