Skip to content

Instantly share code, notes, and snippets.

@fall16mis

fall16mis/.block

Created March 28, 2018 22:21
Show Gist options
  • Save fall16mis/649bd6c202e0dee82fe106449584f8e0 to your computer and use it in GitHub Desktop.
Save fall16mis/649bd6c202e0dee82fe106449584f8e0 to your computer and use it in GitHub Desktop.
Download ZIP
PercentageView
Raw
.block
license: mit
Raw
data.json
[
{
"student_id": "pk_37567",
"percent": "0",
"time": 0
},
{
"student_id": "pk_37567",
"percent": "20",
"time": 5
},
{
"student_id": "pk_37567",
"percent": "50",
"time": 12
},
{
"student_id": "pk_37567",
"percent": "75",
"time": 18
},
{
"student_id": "pk_37567",
"percent": "100",
"time": 30
},
{
"student_id": "pk_63169",
"percent": "0",
"time": 0
},
{
"student_id": "pk_63169",
"percent": "25",
"time": 10
},
{
"student_id": "pk_63169",
"percent": "50",
"time": 20
},
{
"student_id": "pk_63169",
"percent": "75",
"time": 30
},
{
"student_id": "pk_63169",
"percent": "100",
"time": 40
},
{
"student_id": "pk_51055",
"percent": "0",
"time": 0
},
{
"student_id": "pk_51055",
"percent": "10",
"time": 8
},
{
"student_id": "pk_51055",
"percent": "40",
"time": 15
},
{
"student_id": "pk_51055",
"percent": "80",
"time": 21
},
{
"student_id": "pk_51055",
"percent": "100",
"time": 26
}
]
Raw
index.html
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment