f94f/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

-What:
-Data Types: Items and attributes.
-Dataset Types: Tables.
-Atributes Types: Quantitative.
-Ordering direction: Diverging.
-Why:
-Analyze:
-Consume: Present and Enjoy.
-Query: Compare.
-All Data: Features.
-Attributes: One.
How:
-Encode: Align.
-Map:
-Color: Hue.
-Size.
-Facet: Superimpose.

2)Argumentation
The mark used was the line because is one of the simplest figures to recognize and understand for humans. The length was used to be a simple chanel and to witch people are accustomed. The color are vivid to not discourage the students and changes color when is put the mouse over, to make more easy understand witch is being observed.
Documentos de apoyo:

URL: http://bl.ocks.org/Jverma/887877fc5c2c2d99be10 de Juna Verma
URL: http://bl.ocks.org/weiglemc/6185069 de Michele Weigle

forked from f94f's block: fresh block

  
## data.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">

<head>
	<style>

  .bar{
    fill: orange;
  }

  .bar:hover{
    fill: brown;
  }

	.axis {
	  font: 10px sans-serif;
	}

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

   .tooltip {
  position: absolute;
  width: 150px;
  height: 35px;
  pointer-events: none;
}

	</style>
</head>

<body>

<script src="http://d3js.org/d3.v3.min.js"></script>

<script>
// set the dimensions of the canvas
var margin = {top: 20, right: 20, bottom: 70, left: 40},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;


// set the ranges
var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

var y = d3.scale.linear().range([height, 0]);

//Tooltip
var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip");


// define the axis
var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10);


// add the SVG element
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 + ")");


// load the data
d3.json("data.json", function(error, data) {

    data.forEach(function(d) {
        d.code = +d.code;
        d.grade = +d.grade;
    });

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

  // add axis
  svg.append("g")
  .transition().duration(3000)
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .selectAll("text")
      .style("text-anchor", "end")
      .attr("dx", "-.8em")
      .attr("dy", "-.55em")
      .attr("transform", "rotate(-90)" );

  svg.append("g")
  	.transition().duration(3000)
      .attr("class", "y axis")
      .call(yAxis)

  svg.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 5)
      .attr("dy", ".71em")
      .style("text-anchor", "end");

  var bars = svg.selectAll(".bars")
  	.data(data);

  //Enter
  var barsEnter = bars.enter()
  	.append("rect")
    .attr("class", "bar")
      .attr("x", function(d) { return x(d.code); })
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.grade); })
      .attr("height", function(d) { return height - y(d.grade); });

  //Exit
  bars.exit()
  	.transition()
    .duration(1000)
    .attr("width", 0)
  	.remove();

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

  .on("mouseover", function(d) {
          tooltip.transition()
               .duration(700)
               .style("opacity", 1);
          tooltip.html("Student: " +d.code + "<br/> Grade: " + d.grade)
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      });
  });

</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">

	<head>
	<style>

	.bar{
	fill: orange;
	}

	.bar:hover{
	fill: brown;
	}

	.axis {
	font: 10px sans-serif;
	}

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

	.tooltip {
	position: absolute;
	width: 150px;
	height: 35px;
	pointer-events: none;
	}

	</style>
	</head>

	<body>

	<script src="http://d3js.org/d3.v3.min.js"></script>

	<script>
	// set the dimensions of the canvas
	var margin = {top: 20, right: 20, bottom: 70, left: 40},
	width = 600 - margin.left - margin.right,
	height = 300 - margin.top - margin.bottom;


	// set the ranges
	var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);

	var y = d3.scale.linear().range([height, 0]);

	//Tooltip
	var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip");


	// define the axis
	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.ticks(10);


	// add the SVG element
	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 + ")");


	// load the data
	d3.json("data.json", function(error, data) {

	data.forEach(function(d) {
	d.code = +d.code;
	d.grade = +d.grade;
	});

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

	// add axis
	svg.append("g")
	.transition().duration(3000)
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis)
	.selectAll("text")
	.style("text-anchor", "end")
	.attr("dx", "-.8em")
	.attr("dy", "-.55em")
	.attr("transform", "rotate(-90)" );

	svg.append("g")
	.transition().duration(3000)
	.attr("class", "y axis")
	.call(yAxis)

	svg.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 5)
	.attr("dy", ".71em")
	.style("text-anchor", "end");

	var bars = svg.selectAll(".bars")
	.data(data);

	//Enter
	var barsEnter = bars.enter()
	.append("rect")
	.attr("class", "bar")
	.attr("x", function(d) { return x(d.code); })
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.grade); })
	.attr("height", function(d) { return height - y(d.grade); });

	//Exit
	bars.exit()
	.transition()
	.duration(1000)
	.attr("width", 0)
	.remove();

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

	.on("mouseover", function(d) {
	tooltip.transition()
	.duration(700)
	.style("opacity", 1);
	tooltip.html("Student: " +d.code + "<br/> Grade: " + d.grade)
	.style("left", (d3.event.pageX + 5) + "px")
	.style("top", (d3.event.pageY - 28) + "px");
	})
	.on("mouseout", function(d) {
	tooltip.transition()
	.duration(500)
	.style("opacity", 0);
	});
	});

	</script>

	</body>