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>
    .grid line {
      stroke: lightgrey;
      stroke-opacity: 0.7;
      shape-rendering: crispEdges;
    }

.tooltip {
      opacity: 0;
      position: absolute;
      background-color: lightskyblue;
    }
  </style>
</head>

<body>
  <script type="text/javascript">
  d3.json("data.json", function(json_data) {

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%");

svg.call(d3.zoom()
               .scaleExtent([0.8,10])
               .on("zoom",function(){
      						svg.attr("transform",d3.event.transform);
    						})
    );

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

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

chartGroup.append("g")
              .attr("class","axis y")
              .call(d3.axisLeft(y));
    									//.tickFormat(d3.format(".0%")));

chartGroup.append("text")
              .attr("transform","translate("+(-30)+","+(height/1.8)+")rotate(-90)")
              .attr("font-size", "20px")
              .attr("font-family", "sans-serif")
              .text("Percentage");

chartGroup.append("g")
              .attr("class","axis x")
              .attr("transform","translate(0,"+height+")")
              .call(d3.axisBottom(x));

chartGroup.append("text")
              .attr("transform", "translate("+(width-width/2)+","+(height+50)+")")
              .attr("font-size", "20px")
              .attr("font-family", "sans-serif")
              .text("Time");

function make_y_gridlines() {
      return d3.axisLeft(y)
        			 .ticks(10)
    };

chartGroup.append("g")
              .attr("class", "grid")
              .call(make_y_gridlines()
              	.tickSize(-width)
                .tickFormat("")
              );

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 l = margin.top - 10;

var color = function () {
      return "hsl(" + Math.random() * 360 + ",100%,50%)";
    };

var c = -10;

data.forEach(function(data, i){

chartGroup.append('path')
                .attr('d', lineGen(data.values))
                .attr('class', 'thegraph')
                .attr('id', 'line_' + data.key)
                .attr('fill', 'none')
                .style('stroke', color)
                .on("mouseover", function () {
                  d3.select(this)
                    .style("stroke-width",'5px');
                  d3.select("#legend_" + data.key)
                    .style("fill",'black')
                    .style("font-size", "25px");
                })
                .on("mouseout",	function() {
                  d3.select(this)
                    .style("stroke-width",'1px');
                  d3.select("#legend_" + data.key)
                    .style("fill",'steelblue')
                    .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){
        				tooltip.style("opacity","1")
          			 			 .style("left",(d3.event.pageX+10)+"px")
                 				.style("top",d3.event.pageY+"px");
        				tooltip.html("Student: "+d.student_id+" &nbsp Lesson: "+d.percent+" &nbsp Time: "+d.time)
        				d3.select(this)
          				.attr("r",'5px');
      				})
              .on("mouseout", function(){
                  tooltip.style("opacity","0")
                  d3.select(this)
                    .attr("r",'3px');
              });

chartGroup.append("text")
                .attr("x", width+20)
                .attr("y", c+=24)
                .style("fill", "steelblue")
                .attr("class", "legend")
                .attr('id', 'legend_' + data.key)
                .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<5; f++){
                    d3.select("#circle_" + data.key + "_" +f)
                      .style("opacity", opacity);
                  };
                  data.active = active;
                })
                .text(data.key);
    	});
  	})
  </script>
</body>

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