D3 Examples - CS725 - HW9

xxxxxxxxxx
 
<!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 {
  <!--display: none;-->
}
​
.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>
<!-- load the d3.js library -->     
<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);
​
  function mousemove() {
    var x0 = x.invert(d3.mouse(this)[0]),
        i = bisectDate(data, x0, 1),
        d0 = data[i - 1],
        d1 = data[i],
        d = x0 - d0.date > d1.date - x0 ? d1 : d0;
    focus.attr("transform", "translate(" + x(d.date) + "," + y(d.sanitation) + ")");
    focus.select("text").text(d.sanitation);
  }
      
  });
  */
  
  d3.csv("bolivia.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;}));
    
    svg.append("g")
        .attr("class", "x-axis")
        .attr("transform", "translate(0,"+height+")")
        .call(d3.axisBottom(x));
    
    svg.append("g")
        .attr("class", "y-axis")
        .call(d3.axisLeft(y))
        .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 10)
        .attr("x", -6)
        .attr("fill", "#000000")
        .text("Percentage of Population(%)");
    
​
    
    var category = svg.selectAll(".category")
        .data(categories)
        .enter().append("g")
        .attr("class", "category")
    
    category.append("path")
            .attr("class", "line")
            .attr("d", function(d){return line(d.values);})
            .style("stroke", function(d){return z(d.id);});
    
    category.append("text")
            .attr("class", "label")
            .datum(function(d){return {id: d.id, value: d.values[d.values.length - 1]};})
            .attr("transform", function(d){return "translate("+x(d.value.date)+","+y(d.value.rates)+")";})
            .attr("x", 10)
            .attr("dy", "0.5em")
            .style("font", "10px sans-serif")
            .text(function(d){return d.id;});
    
    /*category.selectAll("circle")
            .data(function(d){return d.values;})
            .enter().append("g")
            .append("circle")
            .attr("class", "points")
            .attr("r", 3)
        .attr("cx", function(d){return x(d.date);})
            .attr("cy", function(d){return y(d.rates);})
            .style("fill", function(d){return z(d.id);});*/
    
    /*
    category.selectAll("text")
            .data(function(d){return d.values;})
            .enter().append("g")
            .append("text")
            .attr("x", function(d){return x(d.date);})
            .attr("y", function(d){return y(d.rates);})
            .attr("class", "pointLabels")
            .attr("text-anchor", "middle")
            .text(function(d){return d.rates});*/
    
    var focus = svg.append("g")
            .attr("class", "focus")
            .style("display", "none");
    
    focus.append("circle")
            .attr("r", 3.5)
    
    focus.append("line")
            .attr("class", "y")
            .attr("stroke", "black")
            //.attr("stroke-dasharray", "3,3")
            .style("opacity", 0.5)
            .attr("y1", 0)
            .attr("y2", height);
    
    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);
​
  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>
​
    