tizon9804/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
What:
structure:Table    
A categorical attribute: code
A quantitive attribute: grade

Why:
	Discover distribution, compare values, look for

How:
	mark:

			lines
      
channels:

			lenght: to express quant grade
      color: to express if the grade was good, regular or bad
      spatial regions:one per code, it has a transition that sort the marks by grade
      embed: embed information like code and grade when mouse is over a bar

Development:
The best form to show quantitive attributes like grades is with lines because the human      vision can compare the lenght in a frame undertanding the general information without 		 think a lot.
I also use embed information because it was showing the codes in x axis, so the lenght of 		that label producedoverlaps. my solution is embed the code with the grade when you mouse 		over the a specific bar.
To finish, The bars have color, it depends if the grade are very 			     good(green),normal(Yellow), bad(Red). the colors use the same as the traffic lights and if you want to look for a specific code, in the input text it is possible.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
  width: 960px;
}

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

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

.bar {
  fill: steelblue;
  fill-opacity: .9;
}
 .bar:hover{
		fill-opacity:0.5;
	}

.x.axis path {
  display: none;
}

label {
  position: absolute;
  top: 10px;
  right: 10px;
}
.d3-tip {
  line-height: 1;
  font-weight: bold;
  padding: 12px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 2px;
}

/* 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: rgba(0, 0, 0, 0.8);
  content: "\25BC";
  position: absolute;
  text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
  margin: -1px 0 0 0;
  top: 100%;
  left: 0;
}

</style>
<h2><Strong>Notas Finales del Examen de Visual Analitics</Strong></h2>
Code: <input class="search" type="text" hide="Código" value="2380">
<input class="order" type="checkbox" hidden="true">
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script>

 var grades = [
	{"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}
];


var margin = {top: 50, right: 20, bottom: 15, left: 40},
    width = 960 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1, 1);

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

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
 //#####################################################################
 //TIP
 //#####################################################################
var tip = d3.tip()
  .attr('class', 'd3-tip')
  .offset([-10, -7])
  .html(function(d) {
    return "<div><strong>Code:</strong> <span style='color:red'>" + d.code + "</span></div><div><strong>Grade:</strong> <span style='color:forestgreen'>" + d.grade + "</span></div>";
  });

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 + ")");

svg.call(tip);

function update(data) {

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

  svg.append("g")
      .attr("transform", "translate(0," + height + ")")


  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Grade");

  var barra=svg.selectAll(".bar").data(data);
      barra.enter().append("rect").attr("class", "bar");

  		//barra.exit().remove();

  		barra.on("mouseover", tip.show)
 		  .on("mouseout",tip.hide)
  		.style("fill",function(d){
    			if(d.grade<3){
            return "darkred";
          }
  				else if(d.grade<4){
            return "darkgoldenrod"
          }
  				else{
            return "forestgreen"
          }
      })
      .attr("x", function(d) { return x(d.code); })
      .attr("y", function(d) { return y(d.grade); })
      .attr("width", x.rangeBand())
      .attr("height", function(d) { return height - y(d.grade); });

  d3.select(".order").on("change", change);
  var searchinput = d3.select("input.search");
  		searchinput.on("keyup",search);

  var sortTimeout = setTimeout(function() {
    d3.select("input").property("checked", true).each(change);
  }, 5000);
  //##############################################################
  //search
  //##############################################################
  function search(){
    var barr=svg.selectAll(".bar")
      barr.each(function(d,i){
        var bari=d3.select(this);
        //console.log(bari.select(".rect"));
        var codeinput=searchinput.property("value");
        if(d.code==codeinput){
          bari.style("fill-opacity","0.5");
          bari.append(tip.show).offset([20,0]);
        }
        else{
          bari.style("fill-opacity","0.9");
        }
    });
  }

  function change() {
    clearTimeout(sortTimeout);

    // Copy-on-write since tweens are evaluated after a delay.
    var x0 = x.domain(data.sort(this.checked
        ? function(a, b) { return b.grade - a.grade; }
        : function(a, b) { return d3.ascending(a.code, b.code); })
        .map(function(d) { return d.code; }))
        .copy();

    svg.selectAll(".bar")
        .sort(function(a, b) { return x0(a.code) - x0(b.code); });

    var transition = svg.transition().duration(2000),
        delay = function(d, i) { return i * 50; };

    transition.selectAll(".bar")
        .delay(delay)
        .attr("x", function(d) { return x0(d.code); });

    transition.select(".x.axis")
        .selectAll("g")
        .delay(delay);
  }

  barra.exit().remove();
};

update(grades);

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	position: relative;
	width: 960px;
	}

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

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

	.bar {
	fill: steelblue;
	fill-opacity: .9;
	}
	.bar:hover{
	fill-opacity:0.5;
	}

	.x.axis path {
	display: none;
	}

	label {
	position: absolute;
	top: 10px;
	right: 10px;
	}
	.d3-tip {
	line-height: 1;
	font-weight: bold;
	padding: 12px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 2px;
	}

	/* 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: rgba(0, 0, 0, 0.8);
	content: "\25BC";
	position: absolute;
	text-align: center;
	}

	/* Style northward tooltips differently */
	.d3-tip.n:after {
	margin: -1px 0 0 0;
	top: 100%;
	left: 0;
	}

	</style>
	<h2><Strong>Notas Finales del Examen de Visual Analitics</Strong></h2>
	Code: <input class="search" type="text" hide="Código" value="2380">
	<input class="order" type="checkbox" hidden="true">
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
	<script>

	var grades = [
	{"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}
	];



	var margin = {top: 50, right: 20, bottom: 15, left: 40},
	width = 960 - margin.left - margin.right,
	height = 400 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1, 1);

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

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

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");
	//#####################################################################
	//TIP
	//#####################################################################
	var tip = d3.tip()
	.attr('class', 'd3-tip')
	.offset([-10, -7])
	.html(function(d) {
	return "<div><strong>Code:</strong> <span style='color:red'>" + d.code + "</span></div><div><strong>Grade:</strong> <span style='color:forestgreen'>" + d.grade + "</span></div>";
	});

	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 + ")");

	svg.call(tip);

	function update(data) {

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

	svg.append("g")
	.attr("transform", "translate(0," + height + ")")


	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Grade");

	var barra=svg.selectAll(".bar").data(data);
	barra.enter().append("rect").attr("class", "bar");

	//barra.exit().remove();

	barra.on("mouseover", tip.show)
	.on("mouseout",tip.hide)
	.style("fill",function(d){
	if(d.grade<3){
	return "darkred";
	}
	else if(d.grade<4){
	return "darkgoldenrod"
	}
	else{
	return "forestgreen"
	}
	})
	.attr("x", function(d) { return x(d.code); })
	.attr("y", function(d) { return y(d.grade); })
	.attr("width", x.rangeBand())
	.attr("height", function(d) { return height - y(d.grade); });

	d3.select(".order").on("change", change);
	var searchinput = d3.select("input.search");
	searchinput.on("keyup",search);

	var sortTimeout = setTimeout(function() {
	d3.select("input").property("checked", true).each(change);
	}, 5000);
	//##############################################################
	//search
	//##############################################################
	function search(){
	var barr=svg.selectAll(".bar")
	barr.each(function(d,i){
	var bari=d3.select(this);
	//console.log(bari.select(".rect"));
	var codeinput=searchinput.property("value");
	if(d.code==codeinput){
	bari.style("fill-opacity","0.5");
	bari.append(tip.show).offset([20,0]);
	}
	else{
	bari.style("fill-opacity","0.9");
	}
	});
	}

	function change() {
	clearTimeout(sortTimeout);

	// Copy-on-write since tweens are evaluated after a delay.
	var x0 = x.domain(data.sort(this.checked
	? function(a, b) { return b.grade - a.grade; }
	: function(a, b) { return d3.ascending(a.code, b.code); })
	.map(function(d) { return d.code; }))
	.copy();

	svg.selectAll(".bar")
	.sort(function(a, b) { return x0(a.code) - x0(b.code); });

	var transition = svg.transition().duration(2000),
	delay = function(d, i) { return i * 50; };

	transition.selectAll(".bar")
	.delay(delay)
	.attr("x", function(d) { return x0(d.code); });

	transition.select(".x.axis")
	.selectAll("g")
	.delay(delay);
	}

	barra.exit().remove();
	};

	update(grades);

	</script>