PercentageView

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>Teacher View</title>
  <script type="text/javascript" src="https://d3js.org/d3.v4.js"></script>
  <style>
    .y line {
      display: none;
      stroke: none;
    }
    
    .y path {
      stroke: none;
    }
    
    .grid line {
      stroke: #ddd;
    }
        
    .legend_font{
      font-family: sans-sarif;
      font-size: 20px;
    }

.tooltip {
      opacity: 0;
      position: absolute;			
      text-align: center;			
      width: 110px;					
      height: 50px;					
      padding: 3px;				
      font: 12px sans-serif;		
      background: lightskyblue;	
      border: 0px;		
      border-radius: 10px;			
      pointer-events: none;
    }
  </style>
</head>

<body>
  <script type="text/javascript">
    
    var json_data = [
    {
        "student_id": "pk_37567",
        "percent": "0",
        "time": 0,
        "activity": "Intro1"
    },
    {
        "student_id": "pk_37567",
        "percent": "20",
        "time": 5.2,
        "activity": "Intro2"
    },
    {
        "student_id": "pk_37567",
        "percent": "50",
        "time": 12.3,
        "activity": "Intro3"
    },
    {
        "student_id": "pk_37567",
        "percent": "75",
        "time": 18,
        "activity": "Intro4"
    },
    {
        "student_id": "pk_37567",
        "percent": "90",
        "time": 30,
        "activity": "Intro5"
    },
    {
        "student_id": "pk_63169",
        "percent": "0",
        "time": 0.4,
        "activity": "Intro1"
    },
    {
        "student_id": "pk_63169",
        "percent": "25",
        "time": 10,
        "activity": "Intro2"
    },
    {
        "student_id": "pk_63169",
        "percent": "50",
        "time": 20.9,
        "activity": "Intro3"
    },
    {
        "student_id": "pk_63169",
        "percent": "75",
        "time": 30,
        "activity": "Intro4"
    },
    {
        "student_id": "pk_63169",
        "percent": "95",
        "time": 40.2,
        "activity": "Intro5"
    },
    {
        "student_id": "pk_51055",
        "percent": "0",
        "time": 0,
        "activity": "Intro1"
    },
    {
        "student_id": "pk_51055",
        "percent": "10",
        "time": 8.5,
        "activity": "Intro2"
    },
    {
        "student_id": "pk_51055",
        "percent": "40",
        "time": 15,
        "activity": "Intro3"
    },
    {
        "student_id": "pk_51055",
        "percent": "80",
        "time": 21.1,
        "activity": "Intro4"
    },
    {
        "student_id": "pk_51055",
        "percent": "100",
        "time": 26,
        "activity": "Intro5"
    }
  ];

data = d3.nest()
             .key(function(d){ return d.student_id; })
             .entries(json_data);
    
    var maxTime = d3.max(json_data, function(d){
      																return d.time; });

var height = 500;
    var width = 800;
    var margin = {left: 50, right: 20, bottom: 0, top: 70};

var y = d3.scaleLinear()
		          .domain([0, 100])
		          .range([height, 0]);

var x = d3.scaleLinear()
    					.domain([0, maxTime])
    					.range([0, width]);

var svg = d3.select("body")
    						.append("svg")
                .attr("height","1000px")
                .attr("width","100%");

var tooltip = d3.select("body")
    								.append("div")
    								.attr("class", "tooltip");

var chartGroup = svg.append("g")
    										.attr("transform","translate("+margin.left+
                          									","+margin.top+")")

chartGroup.append("text")
              .attr("transform","translate("+(width/2)+","+(-20)+")")
              .attr("class", "legend_font")
              .text("Percentage Points Achieved");
    
    chartGroup.append("text")
              .attr("transform","translate("+(-40)+","+(height/2)+")")
              .attr("class", "legend_font")
              .text("%");

chartGroup.append("text")
              .attr("transform", "translate("+(width/2)+","+(height+40)+")")
              .attr("class", "legend_font")
              .text("Time (In Minutes)");

function make_y_gridlines() {
      return d3.axisRight(y)
    };

chartGroup.append("g")
              .attr("class", "grid")
              .call(make_y_gridlines()
              	.tickSize(width)
                .tickFormat("")
              );
    
    chartGroup.append("g")
              .attr("class","axis x")
              .attr("transform","translate(0,"+height+")")
              .call(d3.axisBottom(x));
    
    chartGroup.append("g")
              .attr("class","axis y")
              .call(d3.axisLeft(y));

var lineGen = d3.line()
    								.x(function (d) {
      								return x(d.time);
    								})
    								.y(function (d) {
     									return y(d.percent);
    								});

var circles = chartGroup.selectAll(".circle")
    												.data(data);
    var thegraph = chartGroup.selectAll(".thegraph")
    												 .data(data.values);
    var legend = chartGroup.selectAll(".legend")
    											 .data(data);

var color = d3.scaleOrdinal(d3.schemeCategory20b);

var c = -10;

data.forEach(function(data, i){

chartGroup.append('path')
                .attr('class', 'thegraph')
      					.attr('d', lineGen(data.values))
                .attr('id', 'line_' + data.key)
                .attr('fill', 'none')
      					.style('stroke', function() {
                	return data.color = color(data.key); })
                
        				.on("mouseover", function () {
                  d3.select(this)
                    .style("stroke-width",'5px');
                  d3.select("#legend_" + data.key)
                    .style("font-size", "25px");
                })
                
        				.on("mouseout",	function() {
                  d3.select(this)
                    .style("stroke-width",'1px');
                  d3.select("#legend_" + data.key)
                    .style("font-size", "16px");
                });

var j = -1;

circles.data(data.values)
        		 .enter().append("circle")
        		 .attr("cx",function(d, i){
        				return x(d.time);
      				})
        			.attr("cy",function(d,i){
        				return y(d.percent);
      				})
       		 		.attr("r","3")
        			.attr('id', function(d){
        										j+=1;
        										return 'circle_' + d.student_id + '_' + j;
      										})
        			.on("mousemove", function(d,i){
         				console.log(data.values[i-1].time);
        				tooltip.style("opacity","1")
          			 			 .style("left",(d3.event.pageX+10)+"px")
                 				.style("top",d3.event.pageY+"px");
        				tooltip.html("Student: "+d.student_id+" Activity: "+d.activity+" ActivityTime: "+data.values[i-1].time+" TotalTime: "+d.time)
        				d3.select(this)
          				.attr("r",'6px');
      				})
              .on("mouseout", function(){
                  tooltip.style("opacity","0")
                  d3.select(this)
                    .attr("r",'3px');
              });

chartGroup.append("text")
                .attr("x", width+20)
                .attr("y", c+=24)
      					.attr("class", "legend")
                .style("fill", function() { 
        					return data.color = color(data.key); })
                .attr('id', 'legend_' + data.key)
       					.on("mouseover", function () {
                  d3.select("#line_" + data.key)
                    .style("stroke-width",'5px');
                })
       					.on("mouseout",	function() {
                  d3.select("#line_" + data.key)
                    .style("stroke-width",'1px');
                })
                .on('click', function () {
                  var active = data.active ? false : true;
                  var opacity = active ? 0 : 1;
                  d3.select("#line_" + data.key)
                    .style("opacity", opacity);
                  for (var f=0; f<=j; f++){
                    d3.select("#circle_" + data.key + "_" +f)
                      .style("opacity", opacity);
                  };
                  data.active = active;
                })
                .text(data.key);
    	});
  </script>
</body>

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