visualización_notas

What:

Ordered: Quantitative.
Dataset Types: Tables.
Dataset Availability: Static.
Ordering Direction: Diverging.

Why:

Analyze: Consume - Present.
Search: Lookup.
Query: Summarize.
Target: Present student's note.

How:

Arrange: Order, Align.
Map: Color - Hue, Shape - circle.
Manipulate: Select.
Facet: Yuxtaponer.
Reduce: Embed.

Marks:

Line: Identifies student's code position.
Point: Identifies student's note relative to the student's code.

Channels:

Vertical position: Identifies student's note low to high.
Horizontal position: Identifies student's code low to high.
Color Hue: Unlike the marks for range of notes.

To proper reading of the information in the first instance, the four number firsts in student's code are removed, because have pattern 2800. Moreover, it was decided to use color hue to create better identification in the rank of the student's note. Finally it was decided to separate each student in order to facilitate identification of the student's note relative to the student's code.

forked from ragut's block: visualización_notas

<!DOCTYPE html>
<meta charset="utf-8">
<title>Transform Transitions</title>
<style>

body {
  margin: 0;
}
.axis path,
  .axis line{
    fill: none;
    stroke: black;
}

.line{
fill: none;
stroke: blue;
stroke-width: 2px;
}
path.area {
    fill: #E2B2B2;
}
        
path.line {
  fill: none;
  stroke: purple;
  stroke-width: 1.5;
}

.tick text{
font-size: 12px;
}

.tick line{
opacity: 0.2;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.legend .legend-bg {
    fill: rgba(241, 209, 209, 0.5);
    stroke: rgba(195, 33, 33, 0.5);
}

.notas, .marker-bg {
  fill: rgba(0, 153, 51, 0.8);
  stroke: rgba(0, 153, 51, 0.8);
  stroke-width: 3;
}

</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>

var svg = d3.select("body").append("svg")
    .attr("height", h + margin.top + margin.bottom)
    .attr("width", w + margin.left + margin.right)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

xScale =  d3.scale.ordinal().rangeRoundBands([0, w]);
xScale.domain(estudiantes.map(function(d) { return d.code; }));

yScale = d3.scale.linear()
    .domain([0, d3.max(estudiantes, function(d){ return d.grade; })])
    .range([h, 0]);
    
var rectClip = svg.append('clipPath')
    .attr('id', 'rect-clip')
    .append('rect')
      .attr('width', 0)
      .attr('height', h);
      
//--------------- ANIMACIONES ---------------//
rectClip.transition()
    .duration(250*estudiantes.length)
    .attr('width', w);

estudiantes.forEach(function (nota, i) {
    setTimeout(function () {
      puntos(nota, svg, h, xScale, yScale);
    }, 1000 + 500*i);
  });
 
//------------------------------------------//
 
var legendWidth  = 210, legendHeight = 95;
 
 
legend = svg.append('g')
    .attr('class', 'legend')
    .attr('transform', 'translate(' + (w/2 - legendHeight) + ','+ (-legendHeight) +')');

legend.append('rect')
    .attr('class', 'legend-bg')
    .attr('width',  legendWidth)
    .attr('height', legendHeight);

legend.append('text')
    .attr('x', 5)
    .attr('y', 25)
    .attr("font-family", "sans-serif")
    .attr("font-size", "10px")
    .attr("font-weight", "bold")
    .text('Presione el nodo para mayor información');

// clipping to make sure nothing appears behind legend
  svg.append('clipPath')
    .attr('id', 'axes-clip')
    .append('polygon')
      .attr('points', (-margin.left)                 + ',' + (-margin.top)                 + ' ' +
                      (w - legendWidth - 1) + ',' + (-margin.top)                 + ' ' +
                      (w - legendWidth - 1) + ',' + legendHeight                  + ' ' +
                      (w + margin.right)    + ',' + legendHeight                  + ' ' +
                      (w + margin.right)    + ',' + (h + margin.bottom) + ' ' +
                      (-margin.left)                 + ',' + (h + margin.bottom));

//---- PINTA LA LINEA CONTINUAS ----//

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom")
    .innerTickSize(-h)
    .outerTickSize(0);

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")
    .innerTickSize(-w)
    .outerTickSize(0)
    .tickPadding(10);
    
svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
      .call(xAxis)
        .append('text')
  		.attr('dx', w)  
                .attr('x', 5)
                .attr('y', 5)	
  		.style('font-weight','bold')
                .style('','')
		.text('Código');

svg.append("g")
     .attr("class", "y axis")
     .call(yAxis)
        .append('text')
            .attr('x',40)
            .attr('y', -15)
            .attr('dy', '.71em')
            .style('text-anchor', 'end')
            .style('font-weight','bold')
            .text('Calificación');
            
   
});

var circles = svg.append('g')
        .attr('class', 'notas')
        .style("fill", colorF)
        .style("stroke", colorS)
        .attr('transform', 'translate(' + xPos + ', ' + yPosStart + ')')
        .attr('opacity', 0);

circles.transition()
        .duration(200)
        .attr('transform', 'translate(' + xPos + ', ' + yPosEnd + ')')
        .attr('opacity', 1);

circles.append('path')
        .attr('d', 'M' + 24 + ',' + (h-yPosStart) + 'L' + 24 + ',' + (h-yPosStart))
        .transition()
          .duration(200)
          .attr('d', 'M' + 24 + ',' + (h-yPosEnd) + 'L' + 24 + ',' + (radius));
          
      circles.append('circle')
        .attr('class', 'marker-bg-'+i++)
        .attr('data-grade', nota.grade)
        .attr('data-code', nota.code)
        .attr('cx', 24)
        .attr('cy', 0)
        .attr('r', radius)
        .attr('transform', 'translate(' + 0 + ', ' + 0 + ')')
        .style("cursor", "pointer")
        .style("fill", colorF)
        .style("stroke", colorS)
        .on("click", imprimir);
        
 
}

function translate(d) {
    return "translate("+posX+","+ posY+")";
}

function imprimir(d) {
    
    var a = this.parentNode.appendChild(this);
    
    posX = d3.transform(d3.select(this).attr("transform")).translate[0];
    posY = d3.transform(d3.select(this).attr("transform")).translate[1]; 
           
    code_aux = d3.select(this).attr("data-code");
    grade_aux = d3.select(this).attr("data-grade");
    
    d3.select(this)
        .transition()
          .duration(750)
          .attr("r", radius*2);
      
    d3.select(this)
         .transition()
          .delay(1000)
          .attr("r", radius);
   
   d3.select("#update").remove();
   d3.select("#update").remove();
   
   legend.append('text')
        .attr('id', 'update')
        .attr('x', 50)
        .attr('y', 55)
        .text("Código: 2800"+code_aux);
    
   legend.append('text')
        .attr('id', 'update')
        .attr('x', 50)
        .attr('y', 75)
        .text("Calificación: "+grade_aux);
   
}

</script>
</body>

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