Built with blockbuilder.org
This bar chart was created using D3. The main purpose of this graph is to represent the grades from 23 different students.
This visualization seeks to present the grades, in a range between 0
and 5
, of 23
different students. The different variables considered in the problem are:
Student's code: Categorical variable The student's code. Despite it's a numeric value, the numeric value has no semantic value.
Grade: Quantitative variable The student's grade. It's a continuos value in a range between 0
and 5
.
The purpose of this visualization is to present an overview of the grades of some students. In addition, it supports a filtering function that shows the grade of an specific student and locates it in the graph, in order to compare the individual results with the general performance. Lastly, the visualization allows to see the student's detail, which is implemented using a mouseover function.
The different functionalities offered in the visualization are developed accordingly to the primary visualization rules: expressiveness and effectiveness. In the first place, it needs to be made clear that there's a new variable proposal: a fail indicator. This is the result of data aggregation and fulfills the purpose of indicate which students failed. Taking this into account, there's a channel associated to each variable: aligned position in the vertical axis for the grades, aligned position in the horizontal axis for the students, and color for the new categorical value: the fail indicator.
As it is explained in the What, Why and How Analysis, the decisions took in order to choose this specific visualization are based taking into account the visualization mantra overview first, zoom and filter and detail on demand and the rules of visualization effectiveness and expressiveness.
xxxxxxxxxx
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
h1 {
font-family: sans-serif;
font-size: 21px;
}
h3 {
font-family: sans-serif;
font-size: 16px;
}
p {
font-family: sans-serif;
font-size: 14px;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
div.leggend {
float: right;
clear: both;
border-radius: 25px;
background-color: transparent;
padding: 0px 0px 15px 15px;
width: 120px;
height: 100px;
}
rect {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
rect:hover {
fill: orange;
}
</style>
</head>
<body>
<h1>
Grades
</h1>
<input id="searchedCode">
<button id="search" onclick="search">Search</button>
<div class="leggend" id="leggend"></div>
<script>
var w = 940;
var h = 230;
var startsAxis = 30
var leggend = d3.select("#leggend");
var grades = [
{"code":23802620, "grade":4.85},
{"code":23802825, "grade":4.865},
{"code":23801894, "grade":3.24},
{"code":23802926, "grade":5},
{"code":23800661, "grade":3.19},
{"code":23800768, "grade":3.98},
{"code":23800972, "grade":4.89},
{"code":23801922, "grade":3.73},
{"code":23805498, "grade":4.795},
{"code":23805913, "grade":4.85},
{"code":23800311, "grade":2.81},
{"code":23806395, "grade":4.72},
{"code":23808850, "grade":3.85},
{"code":23802872, "grade":2.16},
{"code":23802105, "grade":4.715},
{"code":23809880, "grade":4.92},
{"code":23802056, "grade":4.48},
{"code":23807897, "grade":5.2},
{"code":23807916, "grade":5},
{"code":23801962, "grade":3.62},
{"code":23808246, "grade":4.61},
{"code":23802600, "grade":0.11},
{"code":23808311, "grade":4.7}
];
var margin = {
top: 30,
right: 20,
bottom: 70,
left: 50
},
width = 1200 - margin.left - margin.right,
height = 360 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal()
.domain(grades.map(function(d) {
return d.code;
}))
.rangeRoundBands([0, w - startsAxis], 0.05);
var yScale = d3.scale.linear()
.domain([0, d3.max(grades, function(d) {
return d.grade;
})])
.range([h, 0]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("top");
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var code = function(d) {
return d.code;
};
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right + startsAxis)
.attr("height", height + margin.top + margin.bottom);
//Create bars
svg.selectAll("rect")
.data(grades, code)
.enter()
.append("rect")
.attr("x", function(d, i) {
return xScale(d.code) + startsAxis;
})
.attr("y", function(d) {
return yScale(d.grade) + 10;
})
.attr("width", xScale.rangeBand())
.attr("height", function(d) {
return h - yScale(d.grade);
})
.attr("fill", function(d) {
if (d.grade >= 3) return "#66bd63";
return "#f46d43";
})
//Tooltip
.on("mouseover", function(d) {
//Get this bar's x/y grades, then augment for the tooltip
var xPosition = parseFloat(d3.select(this).attr("x")) + xScale.rangeBand() / 2;
var yPosition = parseFloat(d3.select(this).attr("y")) + 14;
leggend.style("background-color", "orange");
leggend.selectAll("h3").remove()
leggend.selectAll("p").remove()
leggend.append("h3")
.attr("label", "pLabel")
.text("Detail:");
leggend.append("p")
.attr("code", "pCode")
.text("Code: " + d.code);
leggend.append("p")
.attr("grade", "pGrade")
.text("Grade: " + (d.grade).toFixed(2));
//Update Tooltip Position & grade
d3.select("#tooltip")
.style("left", xPosition + "px")
.style("top", yPosition + "px")
.select("#grade")
.text(d.grade);
d3.select("#tooltip").classed("hidden", false)
})
.on("mouseout", function() {
//Remove the tooltip
d3.select("#tooltip").classed("hidden", true);
leggend.style("background-color", "transparent");
leggend.selectAll("h3").remove()
leggend.selectAll("p").remove()
});
svg.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(" + startsAxis + "," + (h + 10) + ")")
.call(xAxis)
.selectAll("text")
.style("text-anchor", "end")
.attr("dx", "-.8em")
.attr("dy", "2.5em")
.attr("transform","rotate(-65)");
// yAxis
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + startsAxis + ",+10)")
.call(yAxis);
svg.append("text")
.attr("transform", "translate(" + (w - startsAxis) + "," + (h + 3) + ")")
.attr("font-family","sans-serif")
.attr("font-size","12")
.text("Code");
svg.append("text")
.attr("transform","translate(" + 0 + "," + (9) +")")
.attr("font-family","sans-serif")
.attr("font-size","12")
.text("Grade");
function search() {
var searchedCode = document.getElementById("searchedCode").value;
grades.forEach(function (d) {
if (d.code == searchedCode) {
leggend.style("background-color", "orange");
leggend.append("h3")
.attr("label", "pLabel")
.text("Detail:");
leggend.selectAll("p").remove()
leggend.append("p")
.attr("code", "pCode")
.text("Code: " + d.code);
leggend.append("p")
.attr("grade", "pGrade")
.text("Grade: " + (d.grade).toFixed(2));
leggend.selectAll("p").style("color", "black");
}
})
}
d3.select("#search").on("click",search);
</script>
</body>
https://d3js.org/d3.v3.min.js