D3 Examples - StudentView1

xxxxxxxxxx
 
<!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; }
    
    .tooltip {
              opacity: 0;
              background-color: #ffe047;
        position: absolute;
        }
    
    .ticks {
      font-size: 10px;
    }
    
    .track,
    .track-inset,
    .track-overlay {
      stroke-linecap: round;
    }
​
    .track {
      stroke: #000;
      stroke-opacity: 0.3;
      stroke-width: 10px;
    }
​
    .track-inset {
      stroke: #ddd;
      stroke-width: 8px;
    }
​
    .track-overlay {
      pointer-events: stroke;
      stroke-width: 50px;
      stroke: transparent;
      cursor: crosshair;
    }
​
    .handle {
      fill: #fff;
      stroke: #000;
      stroke-opacity: 0.5;
      stroke-width: 1.25px;
    }
    
    .bar:hover{
      fill:#0f9fff;
    }
    
    .legend{
        color:#005ebc;
      z-index:0;
    }
  </style>
  <script src="https://unpkg.com/d3-simple-slider@0.2.0/build/d3-simple-slider.js"></script>
</head>
​
<body>
  <div id="slider"></div>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    
    var json_data = "id,date,points,Completed_Percent\n\
54042,2017/09/07,50,66%\n\
54042,2017/09/08,67,74%\n\
54042,2017/09/09,72,76%\n\
54042,2017/09/10,99,78%\n\
54042,2017/09/11,165,92%\n\
9121,2017/09/07,10,10%\n\
9121,2017/09/08,22,26%\n\
9121,2017/09/09,34,34%\n\
9121,2017/09/10,45,42%\n\
9121,2017/09/11,60,55%";
    
    window.data = d3.csvParse(json_data, function(d){ return {
      id:d.id, 
      date:d.date, 
      points:Number(d.points),
        percent:d.Completed_Percent}; });
​
    window.maxPoints = d3.max(window.data,function(d){ return d.points; });
​
    window.minDate = d3.min(window.data,function(d){ return d.date; });
​
    window.maxDate = d3.max(window.data,function(d){ return d.date; });
​
    window.names = window.data.map(function(d){
      return d.id; });
    
    console.log(maxDate);
    
    var parseDate = d3.timeParse("%Y/%m/%d");
    var displayDate = d3.timeFormat("%m/%d");
    var forChartDate = d3.timeFormat("%Y/%m/%d");
    
    var height = 500;
    var width = 800;
    var margin = {left: 50, right: 20, bottom: 0, top: 70};
​
    var tooltip = d3.select("body").append("div").attr("class", "tooltip")
​
    var svg = d3.select("body").append("svg").attr("height","1000px").attr("width","100%");
    
    var chartGroup = svg.append("g").attr("transform","translate("+margin.left+","+(margin.top+10)+")");
    
    var legend = svg.append("g").attr("transform","translate("+margin.left+","+(margin.top+10)+")");
    
    var chartDate = window.minDate;
​
    var displaySlider = function(data){
        window.y = d3.scaleLinear()
                   .domain([0, window.maxPoints])
                   .range([height, 0]);
​
        window.x = d3.scaleBand()
                   .domain(window.names)
                   .rangeRound([0, width])
                   .paddingInner(0.5);
​
        chartGroup.append("g")
                .attr("class","axis y")
                .call(d3.axisLeft(y))
​
        chartGroup.append("g")
                .attr("class","axis x")
                .attr("transform","translate(0,"+height+")")
                .call(d3.axisBottom(x));
      
        var newData = data.filter(function(d){
          return d.date<=chartDate;
        })
        displayBar(newData);
      
      var x1 = d3.scaleTime()
                 .range([0, width])
                 .domain([parseDate(minDate), parseDate(maxDate)])
                 .clamp(true);
​
      var slider = svg.append("g")
                      .attr("class", "slider")
                      .attr("transform", "translate(" + margin.left + ",30)");
​
      slider.append("line")
            .attr("class", "track")
            .attr("x1", x1.range()[0])
            .attr("x2", x1.range()[1])
            .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
            .attr("class", "track-inset")
            .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
            .attr("class", "track-overlay")
            .call(d3.drag()
                  .on("start.interrupt", function() { slider.interrupt(); })
                  .on("drag end", function() { sliderFunc(x1.invert(d3.event.x)); }));
​
          slider.insert("g", ".track-overlay")
            .attr("class", "ticks")
            .attr("transform", "translate(0," + 10 + ")")
            .selectAll("text")
            .data(x1.ticks(15))
            .enter()
            .append("text")
            .attr("x", x1)
            .attr("y", 10)
            .attr("text-anchor", "middle")
            .text(function(d) { return displayDate(d); });
​
      var label = slider.append("text")  
                        .attr("class", "label")
                        .attr("text-anchor", "middle")
                        .text(minDate)
                        .attr("transform", "translate(0," + (-10) + ")");
​
      var handle = slider.insert("circle", ".track-overlay")
                          .attr("class", "handle")
                          .attr("r", 7);
​
      function sliderFunc(h) {
        handle.attr("cx", x1(h));
        label.attr("x", x1(h))
             .text(displayDate(h));
        chartDate = forChartDate(h);
        //console.log(chartDate);
        newData = data.filter(function(d){
          return d.date<=chartDate;
        })
        
        displayText(newData);
        displayBar(newData);
      }
    }
​
    var displayBar = function(data){ 
      var bar = chartGroup.selectAll(".bar")
                                            .data(data, function(d){
                                                return d;
                                            })
      
      bar_enter = bar.enter().append("rect");
      
      bar_enter.attr("class", "bar")
               .attr("x", function(d) { return window.x(d.id); })
               .attr("y", function(d) { return window.y(d.points); })
               .attr("width", window.x.bandwidth())
               .attr("fill", "green")
               .transition()
                .duration(800)
                .attr("height", function(d) { return height - window.y(d.points); })
​
      bar_enter.on('mousemove', function(d,i){
        tooltip.style("opacity","1")
               .style("left",(d3.event.pageX+10)+"px")
               .style("top",d3.event.pageY+"px");
        tooltip.html(" Points:"+d.points);
      })
      
      bar_enter.on('mouseout', function(){
        tooltip.style("opacity","0")
      });
      
      bar.exit()
         .transition()
            .duration(50)
            .remove()
            .attr("height", function(d) { return height - window.y(d.points); });
    }
    
     var displayText = function(data){
       
       legend.selectAll("text")
                 .transition()
                    .duration(50)           
                  .remove()
       
       data.forEach(function(d){
        dataById = d3.nest()
            .key(function(d){ return d.id; })
            .rollup((function(d){
            return {
                highDate: d3.max(d,function(d){ 
                return d.date; }),
                highPoints: d3.max(d,function(d){ 
                return d.points; }),
                highPercent: d3.max(d, function(d){
                console.log(d);
              return d.percent;
            })};
            }))
            .entries(data)
       });
​
       dataById.forEach(function(d){
         console.log(d.value.highPoints)
         legend.append("text")
           .attr("x", window.x(d.key)+3.52)
           .attr("y", window.y(d.value.highPoints)-5)
           .style("fill", "steelblue")
           .attr("class", "legend")
           .text(d.value.highPercent);
        })
        }
     
     displaySlider(window.data);
  </script>
</body>
    