notasEstudiantes

Built with blockbuilder.org

Análisis mediante el framework de Tamara

What : The source of data is a json file, which can be taken as a table with columns like code and note; these data are static. The amount of data to display are few, exactly 25 rows.
Why : This grapich have as action present the exact information to estudents, this isn't interactive and the principal function is search fast of each grade by student and may be compare with the rest of course and see the trend of the all grades.
How : I try keep the graphic simple and show only the relevant information based in bar diagram with the size of bar how principal element to recognize the grades and obviously keep align all data of graphic

<!DOCTYPE html>
<meta charset="utf-8">
<style> /* set the CSS */

.bar { fill: steelblue; }

</style>
<body>
	
    	
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

// set the dimensions and margins of the graph
var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

// set the ranges
var x = d3.scaleBand()
          .range([0, width])
          .padding(0.1);
var y = d3.scaleLinear()
          .range([height, 0]);
          
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", 
          "translate(" + margin.left + "," + margin.top + ")");

// get the data
d3.json("grades.json", function(error, data) {
  if (error) throw error;

// format the data
  data.forEach(function(d) {
    d.grade = +d.grade;
  });

// Scale the range of the data in the domains
  x.domain(data.map(function(d) { return d.code; }));
  y.domain([0, d3.max(data, function(d) { return d.grade; })]);

// append the rectangles for the bar chart
  svg.selectAll(".bar")
      .data(data)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.code); })
      .attr("width", x.bandwidth())
      .attr("y", function(d) { return y(d.grade); })
      .attr("height", function(d) { return height - y(d.grade); });

// add the x Axis
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

// add the y Axis
  svg.append("g")
      .call(d3.axisLeft(y));

});

</script>
</body>

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