Skip to content

Instantly share code, notes, and snippets.

@fall16mis

fall16mis/.block

Last active April 27, 2018 20:36
Show Gist options
  • Save fall16mis/ee2ec497d64933d75d1faa780b13fece to your computer and use it in GitHub Desktop.
Save fall16mis/ee2ec497d64933d75d1faa780b13fece 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,
"activity": "Intro1"
},
{
"student_id": "pk_37567",
"percent": "20",
"time": 5,
"activity": "Intro2"
},
{
"student_id": "pk_37567",
"percent": "50",
"time": 12,
"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,
"activity": "Intro1"
},
{
"student_id": "pk_63169",
"percent": "25",
"time": 10,
"activity": "Intro2"
},
{
"student_id": "pk_63169",
"percent": "50",
"time": 20,
"activity": "Intro3"
},
{
"student_id": "pk_63169",
"percent": "75",
"time": 30,
"activity": "Intro4"
},
{
"student_id": "pk_63169",
"percent": "95",
"time": 40,
"activity": "Intro5"
},
{
"student_id": "pk_51055",
"percent": "0",
"time": 0,
"activity": "Intro1"
},
{
"student_id": "pk_51055",
"percent": "10",
"time": 8,
"activity": "Intro2"
},
{
"student_id": "pk_51055",
"percent": "40",
"time": 15,
"activity": "Intro3"
},
{
"student_id": "pk_51055",
"percent": "80",
"time": 21,
"activity": "Intro4"
},
{
"student_id": "pk_51055",
"percent": "100",
"time": 26,
"activity": "Intro5"
}
]
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>
.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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment