Homework 3 Grades

Analysis about this visualization

What: Data is a table, information about each student: code and grade.
Why:
- Actions
- Targets
How: Arrange-Express
- Marks: Points.
- Channel:Horizontal position and color.
- Manipulate: Select student can select each point to identify grade associated (not code,because there are certain privacity level).

WHY I DECIDED THAT

I thought, as student what is I want to know when I receive my grades and my conclusion was:

See a general perspective about all course while preserving privacity about my classmates' grades.
Identify my note.
Know average, maximum and minimum grade.

By other hand, keeping in mind marks ranking I thought points were the best option , not only because it is first, I thought in other marks and don't support very well my tasks, e.g. lines, 23 bar didn’t sound well and they aren't practical for this case. As a channel, horizontal position to visualize differents grades (just one atributte so I didn't need another axis) and color to highlight user's grade, from other.

Built with blockbuilder.org

forked from anonymous's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
circle {
  fill: lightSeaGreen ;
  fill-opacity: .6;
}
label {
    color:indianRed;
  	font-weight: bold;
}
 .red {
    fill: red;
 }
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: antiqueWhite;
  color: indianRed;
	filter:alpha(opacity=75);
  border-radius: 10px;
}
    
input[type=text] {
    border: 2px solid lightSeaGreen;
    border-radius: 4px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
  box-sizing: border-box;
  display: inline;
  font-size: 10px;
  width: 100%;
  line-height: 1;
  color: antiqueWhite;
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}
    
button {
 border: none;
 background: #3a7999;
 color: #f2f2f2;
 padding: 10px;
 font-size: 18px;
 border-radius: 5px;
 position: relative;
 box-sizing: border-box;
 transition: all 500ms ease;
}
button:hover {
 background: rgba(0,0,0,0);
 color: #3a7999;
 box-shadow: inset 0 0 0 3px #3a7999;
}

</style>
</head>

<body>

<h1>Visual Analytics Course - Universidad de los Andes</h1>
  <h2>Nychol Bazurto Gómez</h2>
<p>You can see grades mousing over each point.

</p>
<div id="scatter"></div>
  
<div id="visualization">
  
  </div>

<label for="txtCode">Code</label>
<input type="text" id="txtCode" />
   <label for="txtAvg">Mean</label>
<input align="center" type="text" id="txtAvg" disabled/>
  <label for="txtMax">Maximum</label>
<input align="center" type="text" id="txtMax" disabled/>
  <label for="txtMin">Minimum</label>
<input align="center" type="text" id="txtMin" disabled/>
  <br>
  <div id="option">
    <button id="btnCode">Search</button>
<div id="result"></div>
</div>

var main = chart.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
  .attr('width', width)
  .attr('height', height)
  .attr('class', 'main')   
        
    // draw the x axis
    var xAxis = d3.svg.axis()
  .scale(x);

main.append('g')
  .attr('transform', 'translate(0,15)')
  .attr('class', 'main axis date')
  .call(xAxis);
  
    main.append('g')
  .attr('transform', 'translate(0,0)')
  .attr('class', 'main axis date')
;
    
      var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, 0])
  .html(function(d) {
    return "<strong>Grade:</strong> <span style='color:slateGray'>" + d.grade + "</span><br>";
  });
    var g = main.append("svg:g"); 
      g.call(tip);
    g.selectAll("scatter-dots")
      .data(grades)
      .enter().append("svg:circle")
          .attr("cx", function (d,i) { return x(d.grade); } )
    			.attr("grade", function (d,i) { return d.grade; } )
          .attr("id",function (d) { return d.code; })
          .attr("r", 8)
    			.on('mouseover', tip.show)
      		.on('mouseout', tip.hide);
   
d3.select("#btnCode").on("click", function() {
  var userText=document.getElementById("txtCode").value;
  if(userText!="")
  	update(userText);
});

function update(code) {

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js to a secure url

https://d3js.org/d3.v3.min.js

https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js