jhon0010/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    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


## grades.json
[
	{"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}
]

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

.bar { fill: steelblue; }

</style>
<body>

<!-- load the d3.js library -->
<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>
	[
	{"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}
	]
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style> /* set the CSS */

	.bar { fill: steelblue; }

	</style>
	<body>

	<!-- load the d3.js library -->
	<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>