bocajnotnef/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div id=chart_area>
    </div>
    <input type="range" name="range" class="slider" id="year_slider" value="2007" min="1952" max="2007" step="5" ><br>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="main.js"></script>
  </body>
</html>

## main.js
var frame = d3.select("#chart_area")
              .append("svg");

var canvas = frame.append("g");

// Set margins, width, and height.
var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 39.5};
var frame_width = 960;
var frame_height = 350;
var canvas_width = frame_width - margin.left - margin.right;
var canvas_height = frame_height - margin.top - margin.bottom;

frame.attr("width", frame_width)
     .attr("height", frame_height);

canvas.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xScale = d3.scaleLog()
               .domain([250, 1e5])
               .range([0, canvas_width]);

var xAxis = d3.axisBottom(xScale);

canvas.append("g")
      .attr("transform", "translate(0,"+canvas_height+")")
      .call(xAxis);

var yScale = d3.scaleLinear()
               .domain([10, 85])
               .range([canvas_height, 0])

var yAxis = d3.axisLeft(yScale);

canvas.append("g")
      .call(yAxis);

var accessor = function(d) {
  return {
    continent: d.continent,
    country: d.country,
    pop: +d.pop,
    gdpPercap: +d.gdpPercap,
    lifeExp: +d.lifeExp,
    year: +d.year
  }
}

var data_canvas = canvas.append("g");

var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
var radiusScale = d3.scaleSqrt()
                    .domain([0, 5e8])
                    .range([0,40]);
var year = parseInt(document.getElementById("year_slider").value);

d3.csv("http://emilydolson.github.io/D3-visualising-data/resources/nations.csv", accessor, function(data){
  var filtered_data = data.filter(function(d){return d.year == year});

  var update = function() {
    console.log("updated")
    var circles = data_canvas.selectAll("circle")
                           .data(filtered_data, function(d){return d.country});
    circles.enter()
         .append("circle")
         .attr("cx", function(d){return xScale(d.gdpPercap)})
         .attr("cy", function(d){return yScale(d.lifeExp)})
         .attr("r", function(d){return radiusScale(d.pop)})
         .style("fill", function(d){return colorScale(d.continent)})
         .merge(circles);

    data_canvas.selectAll("circle").transition().attr("cx", function(d){return xScale(d.gdpPercap)})
           .attr("cy", function(d){return yScale(d.lifeExp)})
           .attr("r", function(d){return radiusScale(d.pop)});

    circles.exit().remove();
  }

  update();

  d3.select("#year_slider")
    .on("input", function(){
      console.log("called")
      year = parseInt(document.getElementById("year_slider").value);
      console.log(year);
      filtered_data = data.filter(function(d){return d.year == year});
      console.log(filtered_data)
      update();
    })
})
	<!DOCTYPE html>
	<html>
	<head>
	</head>
	<body>
	<div id=chart_area>
	</div>
	<input type="range" name="range" class="slider" id="year_slider" value="2007" min="1952" max="2007" step="5" ><br>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="main.js"></script>
	</body>
	</html>
	var frame = d3.select("#chart_area")
	.append("svg");

	var canvas = frame.append("g");

	// Set margins, width, and height.
	var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 39.5};
	var frame_width = 960;
	var frame_height = 350;
	var canvas_width = frame_width - margin.left - margin.right;
	var canvas_height = frame_height - margin.top - margin.bottom;

	frame.attr("width", frame_width)
	.attr("height", frame_height);

	canvas.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var xScale = d3.scaleLog()
	.domain([250, 1e5])
	.range([0, canvas_width]);

	var xAxis = d3.axisBottom(xScale);

	canvas.append("g")
	.attr("transform", "translate(0,"+canvas_height+")")
	.call(xAxis);

	var yScale = d3.scaleLinear()
	.domain([10, 85])
	.range([canvas_height, 0])

	var yAxis = d3.axisLeft(yScale);

	canvas.append("g")
	.call(yAxis);

	var accessor = function(d) {
	return {
	continent: d.continent,
	country: d.country,
	pop: +d.pop,
	gdpPercap: +d.gdpPercap,
	lifeExp: +d.lifeExp,
	year: +d.year
	}
	}

	var data_canvas = canvas.append("g");

	var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
	var radiusScale = d3.scaleSqrt()
	.domain([0, 5e8])
	.range([0,40]);
	var year = parseInt(document.getElementById("year_slider").value);

	d3.csv("http://emilydolson.github.io/D3-visualising-data/resources/nations.csv", accessor, function(data){
	var filtered_data = data.filter(function(d){return d.year == year});

	var update = function() {
	console.log("updated")
	var circles = data_canvas.selectAll("circle")
	.data(filtered_data, function(d){return d.country});
	circles.enter()
	.append("circle")
	.attr("cx", function(d){return xScale(d.gdpPercap)})
	.attr("cy", function(d){return yScale(d.lifeExp)})
	.attr("r", function(d){return radiusScale(d.pop)})
	.style("fill", function(d){return colorScale(d.continent)})
	.merge(circles);

	data_canvas.selectAll("circle").transition().attr("cx", function(d){return xScale(d.gdpPercap)})
	.attr("cy", function(d){return yScale(d.lifeExp)})
	.attr("r", function(d){return radiusScale(d.pop)});

	circles.exit().remove();
	}

	update();

	d3.select("#year_slider")
	.on("input", function(){
	console.log("called")
	year = parseInt(document.getElementById("year_slider").value);
	console.log(year);
	filtered_data = data.filter(function(d){return d.year == year});
	console.log(filtered_data)
	update();
	})
	})