Skip to content

Instantly share code, notes, and snippets.

@kaz-a

kaz-a/data.csv

Last active December 16, 2016 18:52
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kaz-a/9752f6d7a7a4eb039cf9165249eda2f6 to your computer and use it in GitHub Desktop.
Save kaz-a/9752f6d7a7a4eb039cf9165249eda2f6 to your computer and use it in GitHub Desktop.
Download ZIP
Employee Rating
Raw
data.csv
fullname DISTRICT_CODE EMPLOYEE_ID MOTP_POINTS MOTP_RATING MOSL_POINTS_STATE MOSL_RATING_STATE MOSL_POINTS_LOCAL MOSL_RATING_LOCAL OVERALL_POINTS OVERALL_RATING
0 Jimmie Clayton 6 1413 49 Developing 15 Effective 15 Effective 79 Effective
1 Clyde Turner 6 3391 53 Effective 15 Effective 18 Highly Effective 86 Effective
2 Carol Hubbard 6 4270 45 Effective 16 Effective 20 Highly Effective 81 Effective
3 Dennis Flores 6 1068 56 Highly Effective 15 Effective 15 Effective 86 Effective
4 Stewart Bowers 6 5157 50 Effective 15 Effective 15 Effective 80 Effective
5 Nichole Bush 6 2596 50 Effective 15 Effective 20 Highly Effective 85 Effective
6 Anne Brady 6 5784 48 Developing 9 Ineffective 20 Highly Effective 77 Effective
7 Kristina Riley 6 2152 55 Highly Effective 16 Effective 13 Developing 84 Effective
8 Evan Martin 6 3595 48 Developing 15 Effective 15 Effective 78 Effective
9 Josephine Mason 6 2394 47 Developing 16 Effective 13 Developing 76 Effective
10 Manuel Houston 6 2780 49 Developing 16 Effective 15 Effective 80 Effective
11 Robyn Fernandez 6 3698 54 Effective 15 Effective 15 Effective 84 Effective
12 Bessie Richardson 6 1051 51 Effective 15 Effective 15 Effective 81 Effective
13 Christie Henderson 6 2632 53 Effective 17 Effective 16 Effective 86 Effective
14 Andrea Osborne 6 4559 45 Developing 17 Effective 20 Highly Effective 82 Effective
15 Margarita Gordon 7 4694 46 Developing 11 Effective 15 Effective 72 Developing
16 Minnie Herrera 8 1755 46 Developing 10 Effective 11 Developing 67 Effective
17 Della Obrien 9 2760 47 Developing 14 Effective 12 Developing 73 Effective
18 Terence Buchanan 10 1461 50 Effective 9 Ineffective 15 Effective 74 Developing
19 Frances Cruz 11 3686 50 Effective 15 Effective 11 Developing 76 Effective
20 Tasha Reese 12 5803 51 Effective 8 Ineffective 16 Effective 75 Effective
21 Kim Davis 13 4941 48 Developing 13 Effective 12 Developing 73 Developing
22 Mario Peterson 14 3939 44 Developing 14 Effective 15 Effective 73 Developing
23 Julio Hampton 15 5466 43 Developing 12 Effective 18 Effective 73 Developing
24 Bryan Leonard 16 4703 56 Highly Effective 18 Effective 20 Highly Effective 94 Highly Effective
25 Ervin Morgan 17 3602 51 Effective 17 Effective 15 Effective 83 Effective
26 Faye Greer 18 2851 53 Effective 20 Highly Effective 16 Effective 89 Effective
27 Margie Rose 19 1862 57 Highly Effective 16 Effective 9 Ineffective 82 Effective
28 Verna Fisher 20 4508 58 Highly Effective 12 Effective 20 Highly Effective 90 Highly Effective
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOE Data Task</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style type="text/css">
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,600');
body {
font-family: 'Open Sans', sans-serif;
font-weight: 500;
font-size: 11px;
}
.axis line,
.axis path {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
font-size: 11px;
}
h1, h3, .title>p, .title>h5, .buttons {
text-align: center;
}
div.tooltip {
position: absolute;
text-align: left;
width: auto;
height: auto;
padding: 8px;
font: 12px sans-serif;
background: black;
border-radius: 0px;
pointer-events: none;
color: white;
}
.svg {
display: block;
margin: auto;
}
span {
color: red;
}
hr, div.tooltip>h5 {
margin-top:0;
margin-bottom: 0;
}
</style>
</head>
<body>
<div class="container">
<div class="row title">
<h1>Employee Rating</h1>
<h5>Districts 16 and 20 seem to be generally performing well, with the highest overall rating of employees. <br />
Each district is color coded. The bigger the circle, the more "Effective". <br />
Hover on a circle for details. Click on a button to see a different evaluation measure.<br />
(The names and IDs of employees are fake, in order to reserve confidentiality)<br /></h5>
<p>(MOTP = Measure of Teaching Progress | MOSL = Measures of Student Learning)</p>
</div>
<div class="buttons"></div>
<div class="row chart"></div>
<div class="row legend"></div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script type="text/javascript">
var margin = {top: 20, right: 40, bottom: 100, left: 40},
width = 860 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangePoints([0, width]);
var y = d3.scale.linear()
.range([height, 0])
.domain([0, 100]);
var color = d3.scale.category20();
var tooltip = d3.select(".chart").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select(".chart").append("svg")
.attr("class", "svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(ready, data){
console.log(data);
data.forEach(function(d){
d.motp = +d.MOTP_POINTS;
d.mosl_state = +d.MOSL_POINTS_STATE;
d.mosl_local = +d.MOSL_POINTS_LOCAL;
d.overall = +d.OVERALL_POINTS;
d.district = +d.DISTRICT_CODE;
d.employee = +d.EMPLOYEE_ID;
});
x.domain(data.map(function(d) { return d.employee; }));
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.selectAll("text")
.attr("class", "label")
.attr("y", 0)
.attr("x", 9)
.attr("transform", "rotate(90)")
.style("text-anchor", "start")
.style({"font-size": "11px", "font-family": "'Open Sans', sans-serif", "font-weight": 500 });
svg.append("text")
.attr("x", width/2 )
.attr("y", height + 90 )
.style("text-anchor", "middle")
.text("Employee ID");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Points")
.style({"font-size": "11px", "font-family": "'Open Sans', sans-serif", "font-weight": 500 });
var circles = svg.selectAll(".dot")
.data(data);
// buttons to switch among ratings
var overall = d3.select(".buttons").append("button")
.attr("class", "btn btn-default")
.text("Overall")
.on("click", function() { showOverall(); });
var motp = d3.select(".buttons").append("button")
.attr("class", "btn btn-default")
.text("MOTP")
.on("click", function() { showMotp(); });
var moslState = d3.select(".buttons").append("button")
.attr("class", "btn btn-default")
.text("MOSL State")
.on("click", function() { showMoslState(); });
var moslLocal = d3.select(".buttons").append("button")
.attr("class", "btn btn-default")
.text("MOSL Local")
.on("click", function() { showMoslLocal(); });
var highly_effective = 20,
effective = 15,
developing = 10,
ineffective = 5;
function showOverall() {
removeCircles()
circles.enter().append("g")
.append("circle")
.attr("class", "dot")
.attr("r", function(d) { return d.OVERALL_RATING == "Highly Effective" ? highly_effective : d.OVERALL_RATING == "Effective" ? effective : d.OVERALL_RATING == "Developing" ? developing : ineffective; })
.attr("cy", function(d) { return y(d.overall); })
.attr("cx", function(d) { return x(d.employee); })
.style("fill", function(d) { return color(d.district); })
.style("opacity", 0.6)
.on("mouseover", mouseOver)
.on("mouseout", mouseOut);
};
function showMotp() {
removeCircles();
circles.enter().append("g")
.append("circle")
.attr("class", "dot")
.attr("r", function(d){ return d.MOTP_RATING == "Highly Effective" ? highly_effective : d.MOTP_RATING == "Effective" ? effective : d.MOTP_RATING == "Developing" ? developing : ineffective; })
.attr("cy", function(d) { return y(d.motp); })
.attr("cx", function(d) { return x(d.employee); })
.style("fill", function(d) { return color(d.district); })
.style("opacity", 0.6)
.on("mouseover", mouseOver)
.on("mouseout", mouseOut);
};
function showMoslState() {
removeCircles();
circles.enter().append("g")
.append("circle")
.attr("class", "dot")
.attr("r", function(d) { return d.MOSL_RATING_STATE == "Highly Effective" ? highly_effective : d.MOSL_RATING_STATE == "Effective" ? effective : d.MOSL_RATING_STATE == "Developing" ? developing : ineffective; })
.attr("cy", function(d) { return y(d.mosl_state); })
.attr("cx", function(d) { return x(d.employee); })
.style("fill", function(d) { return color(d.district); })
.style("opacity", 0.6)
.on("mouseover", mouseOver)
.on("mouseout", mouseOut);
};
function showMoslLocal() {
removeCircles();
circles.enter().append("g")
.append("circle")
.attr("class", "dot")
.attr("r", function(d) { return d.MOSL_RATING_LOCAL == "Highly Effective" ? highly_effective : d.MOSL_RATING_LOCAL == "Effective" ? effective : d.MOSL_RATING_LOCAL == "Developing" ? developing : ineffective; })
.attr("cy", function(d) { return y(d.mosl_local); })
.attr("cx", function(d) { return x(d.employee); })
.style("fill", function(d) { return color(d.district); })
.style("opacity", 0.6)
.on("mouseover", mouseOver)
.on("mouseout", mouseOut);
};
function removeCircles(){
d3.selectAll(".dot").transition().duration(500).style("opacity", 0).remove();
};
// tooltips
function mouseOver(d) {
d3.select(this).transition()
.ease("quad")
.duration("200")
.style("opacity", 1)
tooltip.html("<h5>Employee ID: " + d.employee + "</h5><br />District: " + d.district + "<hr/><br />Overall rating: <span>" + d.OVERALL_RATING + "</span> (" + d.overall + ")<br />MOTP rating: <span>" + d.MOTP_RATING + "</span> (" + d.motp + ")<br />MOSL State rating: <span>" + d.MOSL_RATING_STATE + "</span> (" + d.mosl_state + ")" + "<br />MOSL Local rating: <span>" + d.MOSL_RATING_LOCAL + "</span> (" + d.mosl_local + ")")
.style("opacity", 0.8)
.style("left", (d3.event.pageX)+0 + "px")
.style("top", (d3.event.pageY)-0 + "px");
};
function mouseOut(d) {
d3.select(this).transition()
.ease("quad")
.delay("100")
.duration("200")
.style("opacity", 0.6)
tooltip.style("opacity", 0);
};
// default to show all ratings on page load
window.onload = showOverall();
})
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment