CS725 - HW9 - v2

Eric Diep - CS 725 - Homework 9 Prototype

forked from ericd9799's block: CS725 - HW9

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */
  .overlay {
  fill: none;
  pointer-events: all;
}

.focus circle {
  fill: none;
  stroke: steelblue;
}
  
.axis--x path {
  
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
  
div.tooltip {	
    position: absolute;			
    text-align: center;			
    width: 60px;					
    height: 28px;					
    padding: 2px;				
    font: 12px sans-serif;		
    background: lightsteelblue;	
    border: 0px;		
    border-radius: 8px;			
    pointer-events: none;			
}

</style>
<body>
  <div>
    <select id="countrySelection" onchange="updateCountry()">
      <option value="bolivia">Bolivia</option>
      <option value="brazil">Brazil</option>
      <option value="chile">Chile</option>
      <option value="colombia">Colombia</option>
      <option value="ecuador">Ecuador</option>
      <option value="guyana">Guyana</option>
      <option value="paraguay">Paraguay</option>
      <option value="peru">Peru</option>
      <option value="suriname">Suriname</option>
      <option value="uruguay">Uruguay</option>
      <option value="venezuela">Venezuela</option>
    </select>
  </div>
    	
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
  //Select
  //var select = d3.select("#countries").property("value");
  
  //Graph
	var margin = {top: 20, right: 20, bottom: 30, left: 50},
      width = 900 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;
  
  var svg = d3.select("body").append("svg")
    	.attr("width", 960)
  		.attr("height", 500)
  		.append("g")
  		.attr("transform", "translate(" + margin.left +", "+margin.top+")");
  
  var parseTime = d3.timeParse("%Y"),
      bisectDate = d3.bisector(function(d) { return d.date; }).left;
  
  var x = d3.scaleTime().rangeRound([0, width]);
  
  var y = d3.scaleLinear().rangeRound([height, 0]);
  
  var z = d3.scaleOrdinal(d3.schemeCategory10);
  
  var line = d3.line()
  		//.curve(d3.curveBasis) //makes a smooth line
  		.x(function(d) {return x(d.date);})
  		.y(function(d) {return y(d.rates);});
  /*
  d3.csv("bolivia.csv", function(d){
    d.date = parseTime(d.date);
    d.sanitation = +d.sanitation;
    return d;
  }, function(error, data){
    if (error) throw error;
    
    x.domain(d3.extent(data, function(d){return d.date;}));
    y.domain(d3.extent(data, function(d){return d.sanitation;}));
    
    svg.append("g")
    		.attr("transform", "translate(0,"+height+")")
    		.call(d3.axisBottom(x))
    		.select(".domain");
    
    svg.append("g")
    		.call(d3.axisLeft(y));
    
    svg.append("path")
    		.datum(data)
    		.attr("fill", "none")
    		.attr("stroke", "steelblue")
    		.attr("stroke-linejoin", "round")
      	.attr("stroke-linecap", "round")
      	.attr("stroke-width", 1.5)
      	.attr("d", line); 
    
    var focus = svg.append("g")
      .attr("class", "focus")
      .style("display", "none");
    
    focus.append("circle")
      .attr("r", 4.5);

focus.append("text")
      .attr("x", 9)
      .attr("dy", ".35em");
    svg.append("rect")
      .attr("class", "overlay")
      .attr("width", width)
      .attr("height", height)
      .on("mouseover", function() { focus.style("display", null); })
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mousemove", mousemove);

svg.append("rect")
      .attr("class", "overlay")
      .attr("width", width)
      .attr("height", height)
      .on("mouseover", function() { focus.style("display", null); })
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mousemove", mousemove);

function mousemove() {
    var x0 = x.invert(d3.mouse(this)[0]),
        i = bisectDate(data, x0, 1, data.length),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0,
        rate = d3.max([+d.diarrhoea]);
    
    focus.attr("transform", "translate(" + x(d.date) + "," + y(rate) + ")");
    //focus.select("text").text(d.sanitation);
  }

});
  
  function updateCountry(){
    var country = d3.select("#countrySelection").property("value");
    console.log(country);
    d3.csv(country+".csv",type,function(error,data){
      if(error) throw error;
      
      var categories = data.columns.slice(1).map(function(id){
      return {
        id: id,
        values: data.map(function(d){
          return {date: d.date, rates: d[id]};
        })
      }
    });
    
    x.domain(d3.extent(data, function(d){return d.date;}));
    
    y.domain([
      d3.min(categories, function(c){return d3.min(c.values, function(d){return d.rates});}),
      d3.max(categories, function(c){return d3.max(c.values, function(d){return d.rates});})
    ]);
    
    z.domain(categories.map(function(c){return c.id;}));
      
    var svg = d3.select("body");
      
      //console.log(categories);
      
      svg.selectAll(".line").data(categories).attr("d", function(d){return line(d.values);}).transition().duration(750);
      
      svg.select(".label").attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates+30)+")";}).transition().duration(750);
      
      svg.select(".y-axis").call(d3.axisLeft(y)).transition().duration(750);
      
    });
  }
  
  function type(d, _, columns){
    d.date = parseTime(d.date);
    for (var i = 1, n = columns.length, c; i < n; ++i)d[c = columns[i]] = +d[c];
    return d;
  }

</script>
</body>

https://d3js.org/d3.v4.min.js