Built with blockbuilder.org
Table
Static
Code
Grades
Secuential
Discover and Present
Locate
Identify
Features
Order Align
Hue
Select
Bars were used because the type of attributes (categorical and ordained ) have a better understanding, using this type of graph.
Bars in direction horizontally rather than vertical, because many of the codes are long and placing them horizontally allows to be read more clearly.
A conditional color was added to indicate who are losing the course ( taking advantage of the relation "green = good", "red = bad").
It allows Order By Code and Grades, so if you wanna find a student you can do it for code and if you wanna know who are the best or wost grades, you can order it for code-
Added
forked from davidgutierrez's block: Tarea3
xxxxxxxxxx<meta charset="utf-8"><style> body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; width: 950px; height: 500px; position: relative; } svg { width: 100%; height: 100%; position: center; } .toolTip { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; position: absolute; display: none; width: auto; height: auto; background: none repeat scroll 0 0 white; border: 0 none; border-radius: 8px 8px 8px 8px; box-shadow: -3px 3px 15px #888888; color: black; font: 12px sans-serif; padding: 5px; text-align: center; } text { font: 10px sans-serif; color: white; } text.grade { font-size: 80%; fill: white; } .axisHorizontal path{ fill: none; } .axisHorizontal .tick line { stroke-width: 1; stroke: rgba(0, 0, 0, 0.2); }.label { fill:red;}</style><body><!-- New buttons to trigger sorting! use divs to setup buttons --> <div id="buttonContainer"> <button id="sortByCode">Sort By Code</button> <button id="sortByGrade">Sort By Grade</button> </div><script src="https://d3js.org/d3.v3.min.js"></script><script> 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}]; grades.sort(function(a, b) { return a.code - b.code;}); var div = d3.select("body").append("div").attr("class", "toolTip"); var axisMargin = 10, margin = 40, valueMargin = 4, width = parseInt(d3.select('body').style('width'), 10), height = parseInt(d3.select('body').style('height'), 10), barHeight = (height-axisMargin-margin*2)* 0.6/grades.length, barPadding = (height-axisMargin-margin*2)*0.5/grades.length, grades, bar, svg, scale, xAxis, labelWidth = 0; max = d3.max(grades, function(d) { return d.grade; }); svg = d3.select('body') .append("svg") .attr("width", width) .attr("height", height); bar = svg.selectAll("g") .data(grades) .enter() .append("g"); bar.attr("class", "bar") .attr("cx",0) .attr("transform", function(d, i) { return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")"; }) .attr("fill", function(d) { return (d.grade <= 3.5 ? "#bc0000" : "#009e00"); }); bar.append("text") .attr("class", "code") .attr("y", barHeight / 2) .attr("dy", ".35em") //vertical align middle .text(function(d){ return d.code; }).each(function() { labelWidth = Math.ceil(Math.max(labelWidth, this.getBBox().width)); }); var xScale = d3.scale.ordinal() .domain(grades) .rangeRoundBands([0, height], .1); scale = d3.scale.linear() .domain([0, max]) .range([0, width - margin*2 - labelWidth]); xAxis = d3.svg.axis() .scale(scale) .tickSize(-height + 2*margin + axisMargin) .orient("bottom"); bar.append("rect") .attr("transform", "translate("+labelWidth+", 0)") .attr("height", barHeight) .attr("width", function(d){ return scale(d.grade); }); bar.append("text") .attr("class", "grade") .attr("y", barHeight / 2) .attr("dx", -valueMargin + labelWidth) //margin right .attr("dy", ".35em") //vertical align middle .attr("text-anchor", "end") .text(function(d){ return (d.grade); }) .attr("x", function(d){ var width = this.getBBox().width; return Math.max(width + valueMargin, scale(d.grade)); }); bar .on("mousemove", function(d){ div.style("left", d3.event.pageX+10+"px"); div.style("top", d3.event.pageY-25+"px"); div.style("display", "inline-block"); div.html((d.code)+"<br> grade:"+(d.grade)); }); bar .on("mouseout", function(d){ div.style("display", "none"); }); svg.insert("g",":first-child") .attr("class", "axisHorizontal") .attr("transform", "translate(" + (margin + labelWidth) + ","+ (height - axisMargin - margin)+")") .call(xAxis); //Sorting logic d3.select("#sortByGrade") .on("click", function() { bar.sort(function(a, b) { return a.grade - b.grade; }) .transition() .delay(function(d, i) { return i * 50; }) .duration(1000) .attr("transform", function(d, i) { return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")"; }); }); //Sorting logic d3.select("#sortByCode") .on("click", function() { bar.sort(function(a, b) { return a.code - b.code; }) .transition() .delay(function(d, i) { return i * 50; }) .duration(1000) .attr("transform", function(d, i) { return "translate(" + margin + "," + (i * (barHeight + barPadding) + barPadding) + ")"; }); }); bar.append("text") .attr("text-anchor", "middle") // this makes it easy to centre the text as the transform is applied to the anchor .attr("transform", "translate("+ (width/2) +","+(height-(barPadding/3))+")") // centre below axis .text("Grade");</script></body> Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js